HTML チェックボックス

JPKODA 編集部 May 6, 2026

チェックボックス（Checkbox）を使用すると、ユーザーはあらかじめ定義されたリストの中から複数のオプションを選択できるようになります。
ユーザーに一つの選択肢のみを強制するラジオボタンとは異なり、チェックボックスは任意の組み合わせを選択できる柔軟性を提供します。

1. `<input type="checkbox">` 要素の理解

HTML におけるチェックボックスの基礎は <input> 要素であり、その type 属性を "checkbox" に設定することで機能します。各チェックボックスは、選択肢グループの中の一つの独立したオプションを表します。

1.1 基本構文

チェックボックスを作成する基本的な構文は以下の通りです。

<input type="checkbox" id="option1" name="options" value="value1">
<label for="option1">オプション 1</label><br>

<input type="checkbox" id="option2" name="options" value="value2">
<label for="option2">オプション 2</label><br>

<input type="checkbox" id="option3" name="options" value="value3">
<label for="option3">オプション 3</label>

各パーツの役割を分解してみましょう：

<input type="checkbox">: タイプが "checkbox" である入力要素を宣言します。
id="option1": id 属性はチェックボックスに一意の識別子（Identifier）を提供します。これは、チェックボックスと対応する <label> 要素を紐付けるために不可欠です。
name="options": name 属性は関連するチェックボックスをグループ化します。フォームが送信される際、同じ name を持つチェックされたすべての項目が値の配列として送信されます。これにより、サーバー側のスクリプトはユーザーが行ったすべての選択を識別できます。
value="value1": value 属性は、チェックボックスが選択された場合にサーバーへ送信される値を指定します。この値はユーザーには表示されず、データ処理に使用されます。
<label for="option1">オプション 1</label>: <label> 要素はチェックボックスに対してユーザーフレンドリーな説明を提供します。for 属性は対応する <input> 要素の id と一致させる必要があり、これにより明示的な関連付けが作成されます。ラベルをクリックするとチェックボックスのオン/オフが切り替わるため、アクセシビリティとユーザビリティが向上します。
<br>: <br> タグは改行を挿入し、各チェックボックスとラベルを新しい行に配置します。

1.2 主要属性の詳細

type: 入力要素のタイプを指定します。この場合は "checkbox" です。
id: チェックボックスの一意の識別子。ラベルとの紐付けに使用します。
name: 関連するチェックボックスをグループ化し、複数の選択を配列として送信できるようにします。
value: チェックボックスが選択された場合にサーバーへ送信されるデータ。
checked: ページロード時にチェックボックスを初期状態で選択しておくためのブーリアン（Boolean）属性です。

2. checked 属性

checked 属性を使用すると、フォームの初期読み込み時にチェックボックスをあらかじめ選択状態にできます。これはデフォルトのオプションを提供したり、ユーザーの好みを記憶させたりする際に便利です。

<input type="checkbox" id="agree" name="agreement" value="yes" checked>
<label for="agree">利用規約に同意します</label>

この例では、ページが表示された瞬間に「利用規約に同意します」のチェックボックスが既に選択されています。

3. アクセシビリティの考慮事項

常に for と id 属性を使用して、<label> 要素を各チェックボックスに関連付けてください。これによりクリック可能な領域が広がり、特にタッチデバイスにおいてチェックボックスの選択が容易になります。また、スクリーンリーダーを使用する障害を持つユーザーにとっても、フォーム構造が理解しやすくなりアクセシビリティが大幅に改善されます。

4. 実戦的なサンプルとデモ

HTML フォームでチェックボックスを使用する具体的な例を見ていきましょう。

4.1 趣味の選択

ユーザーに自分の趣味を選択してもらう例です。

<form>
  <p>趣味を選択してください：</p>
  <input type="checkbox" id="reading" name="hobbies" value="reading">
  <label for="reading">読書</label><br>
    
  <input type="checkbox" id="sports" name="hobbies" value="sports">
  <label for="sports">スポーツ</label><br>
    
  <input type="checkbox" id="music" name="hobbies" value="music">
  <label for="music">音楽</label><br>
    
  <input type="checkbox" id="travel" name="hobbies" value="travel" checked>
  <label for="travel">旅行</label><br>
</form>

解説：

すべてのチェックボックスの name 属性を "hobbies" に設定してグループ化しています。
value 属性で各趣味に対応する値を指定しています。
checked 属性により「旅行」が初期状態で選択されています。

4.2 ピザのトッピング注文

複数のトッピングを選択できるようにする例です。

<form>
  <p>ピザのトッピングを選んでください：</p>
  <input type="checkbox" id="pepperoni" name="toppings" value="pepperoni">
  <label for="pepperoni">ペパロニ</label><br>
    
  <input type="checkbox" id="mushrooms" name="toppings" value="mushrooms">
  <label for="mushrooms">マッシュルーム</label><br>
    
  <input type="checkbox" id="onions" name="toppings" value="onions">
  <label for="onions">玉ねぎ</label><br>
    
  <input type="checkbox" id="olives" name="toppings" value="olives">
  <label for="olives">オリーブ</label>
</form>

4.3 複数のニュースレター購読

<form>
  <p>購読するニュースレターを選択してください：</p>
  <input type="checkbox" id="tech" name="newsletters" value="tech">
  <label for="tech">テック情報</label><br>
    
  <input type="checkbox" id="sports_news" name="newsletters" value="sports">
  <label for="sports_news">スポーツ情報</label><br>
    
  <input type="checkbox" id="fashion" name="newsletters" value="fashion">
  <label for="fashion">ファッション情報</label><br>
</form>

5. チェックボックスデータの送信

チェックボックスを含むフォームが送信されると、サーバーは同じ name 属性を持つ、チェック（選択）されたすべてのチェックボックスの値を受信します。

例えば、上記の「趣味」の例でユーザーが「読書」と「音楽」を選択した場合、サーバーは以下のようなデータを受け取ります（フォームが GET メソッドを使用していると仮定）：

?hobbies=reading&hobbies=music

もしフォームが POST メソッドを使用している場合、これらのデータはリクエストのボディ（Body）内に含まれます。サーバー側のプログラムはこのデータを配列として処理し、ユーザーの選択に基づいたアクションを実行します。

1. <input type="checkbox"> 要素の理解