HTML STUDY

チェックボックス

input要素にはいろいろな種類があり、type属性に入力する値によって用途を指定することができます。今回は複数選択可能なチェックボックスについてまとめていきます。

<input type="checkbox">

type属性の値にcheckboxを入力すると、複数選択可能な項目をチェックする枠が表示されます。name属性はサーバに送る項目名、value属性はサーバに送る値となります。checked属性は選択されている状態を示し、設定をしなければ未記入の状態で表示されます。項目名を表示させるためにinput属性のとなりに項目名をテキストで入力します。

属性(+値)解説
type="checkbox"複数選択の項目
nameチェック項目の名前(checkbox指定時)
valueサーバに送る値(checkbox指定時)
checked項目がチェックされた状態で表示される
type="submit"送信ボタン
value送信ボタンの表示テキスト(submit指定時)
<form action="post" method="send.cgi">

<p>好きな果物は何ですか?
<input type="checkbox" name="banana" value="1">バナナ
<input type="checkbox" name="ichigo" value="2" checked>イチゴ
<input type="checkbox" name="suika" value="3">スイカ
</p>
<p><input type="submit" value="送信する"></p>

</form>

ブラウザ表示例

好きな果物は何ですか? バナナ イチゴ スイカ

※表示例なので送信はされません。

フォーム 関連記事