HP

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>

年齢は?
  • この記事を書いた人

sasuke

インフラエンジニアからwebエンジニアに転職し両方の強みを生かしていければと思います。

-HP

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