HTML ラジオボタン、チェックボックス、セレクトボックス

1 min 41 views

ラジオボタン

ラジオボタンは一般的に少数の項目などに使用される場合が多いです。
今回は性別を例にしたいと思います。
同じ名前にすることにより、同一グループになり片方だけ選択できるようになります。
デフォルトでチェックをしたい場合はchecked を使用します。

構文

<input type="radio" name="名前" value="送信する値" checked>

使用例

<input type="radio" name="seibetu" value="0">男
<input type="radio" name="seibetu" value="1">女


チェックボックス

複数の項目を選択することができます。
好きな動物を選択できるようにした例です。
デフォルトでチェックをしたい場合はchecked を使用します。

構文

構文
<input type="checkbox" name="名前" value="送信する値" checked>

使用例

好きな動物は?
<input type="checkbox" name="doubutu" value="1">犬
<input type="checkbox" name="doubutu" value="2">猫
<input type="checkbox" name="doubutu" value="3">猿
<input type="checkbox" name="doubutu" value="4">豚

好きな動物は?



セレクトボックス

セレクトボックスは複数の項目から1つを選択することが出来ます。
デフォルトはselectedで指定します。

構文

<select name="名前">
<option value="送信する値">表示する文字</option>
</select>

使用例

年齢は?
<select name="tosi">
<option value="1">10歳未満</option>
<option value="2">10歳~20歳未満</option>
<option value="3" selected>20~30歳未満</option>
<option value="4">30歳以上</option>
</select>

使用例

年齢は?

さすけ

さすけ

インフラエンジニアとして数々の大手サーバーを構築を実施し、現在はWebサーバーの構築、サイト作成を中心に活躍しています。

FOLLOW

カテゴリー:
関連記事