<input type="checkbox">

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能自動大文字化継承ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 無し(空要素)

input要素type="checkbox" を指定すると、チェックボックスを作成できます。(複数の選択肢から複数を選べるタイプ)


<input type="checkbox" name="example" value="選択肢1">選択肢1

<input type="checkbox" name="example" value="選択肢2" checked>選択肢2

属性
任意属性(共通)
type="" 部品のタイプ checkbox チェックボックス
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 文字列 選択時の値
disabled 部品の無効化 disabled 値は省略可能
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
任意属性(部品タイプに依存)
checked 選択された状態にする checked 値は省略可能
required 入力必須 required 値は省略可能
  • 各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています)

どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。

この部品タイプの特徴

チェックボックスは、複数の選択肢から複数を選択することができます。

選択肢1 選択肢2 選択肢3 (実際の表示例)

チェックボックスのグループについて

複数のチェックボックスに同じ部品名を付けることで、1つのグループを作成することができます。

次の例では、example という名前によって1つのグループを作成しています。チェックボックスの場合、このグループの中から複数を選択することができます。

<input type="checkbox" name="example" value="選択肢1">選択肢1
<input type="checkbox" name="example" value="選択肢2">選択肢2
<input type="checkbox" name="example" value="選択肢3">選択肢3

また、次のように単体で使用することもできます。

<input type="checkbox" name="agree" value="1">同意する

checked属性について

checked属性は、最初から選択された状態を指定します。この属性は、1つのグループの中で複数に指定することができます。

次の例では、選択肢1選択肢3が選択された状態になります。

<input type="checkbox" name="example" value="選択肢1" checked>選択肢1
<input type="checkbox" name="example" value="選択肢2">選択肢2
<input type="checkbox" name="example" value="選択肢3" checked>選択肢3

required属性について

required属性は、そのフォーム部品が入力必須であることを指定します。

  • ラジオボタンとは異なり、チェックボックスでは部品単位で指定することになります。
<input type="checkbox" name="agree" value="1" required>同意する

使用例

checked属性を指定した例

<p>デフォルト:
<label><input type="checkbox" name="q1" value="その1">その1</label>
<label><input type="checkbox" name="q1" value="その2">その2</label>
<label><input type="checkbox" name="q1" value="その3">その3</label>
<label><input type="checkbox" name="q1" value="その4">その4</label>
<label><input type="checkbox" name="q1" value="その5">その5</label>
</p>

<p>選択済み:
<label><input type="checkbox" name="q2" value="その1">その1</label>
<label><input type="checkbox" name="q2" value="その2" checked>その2</label>
<label><input type="checkbox" name="q2" value="その3">その3</label>
<label><input type="checkbox" name="q2" value="その4" checked>その4</label>
<label><input type="checkbox" name="q2" value="その5">その5</label>
</p>

表示例

デフォルト:

選択済み:

required属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_checkbox.html">

<p>
<label><input type="checkbox" name="agree" value="1" required>同意する</label>
 <strong>必須</strong>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

必須

  • 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。