HTML

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

投稿日:

formなどで囲ってよく使われる命令です。
項目などを一覧で表示して選択してもらうことができます。

ラジオボタン

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

-HTML

Copyright© さすけのプログラミング入門 , 2018 All Rights Reserved.