<input> — 選択系

対応:		HTML 4（1997）

『input』要素の選択系タイプでは、複数の選択肢からユーザーに選ばせるフォームコントロールを作成できます。チェックボックスは複数選択、ラジオボタンは1つだけ選択するために使用します。

構文

<!-- チェックボックス（複数選択可） -->
<input type="checkbox" name="food" value="sushi"> 寿司

<!-- ラジオボタン（同じname属性で1つだけ選択） -->
<input type="radio" name="color" value="red"> 赤
<input type="radio" name="color" value="blue"> 青

<!-- あらかじめ選択状態にする -->
<input type="checkbox" name="agree" value="yes" checked> 同意する

属性一覧

属性	概要
type="checkbox"	チェックボックスを表示します。複数の選択肢を同時に選べます。
type="radio"	ラジオボタンを表示します。同じ『name』を持つグループの中から1つだけ選択できます。
name	フォームデータのキー名を指定します。ラジオボタンは同じ『name』でグループを作ります。
value	選択されたときにサーバーへ送信される値を指定します。
checked	ページ表示時にあらかじめ選択状態にします。値は不要な論理属性です。

サンプルコード

sample_input_select.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>選択系input</title>
</head>
<body>

  <form>
    <!-- チェックボックス：labelで囲んでクリック範囲を広げる -->
    <p>好きな食べ物（複数可）：</p>
    <label><input type="checkbox" name="food" value="sushi"> 寿司</label>
    <label><input type="checkbox" name="food" value="ramen" checked> ラーメン</label>
    <label><input type="checkbox" name="food" value="tempura"> 天ぷら</label>

    <!-- ラジオボタン：同じnameでグループを作る -->
    <p>好きな季節（1つだけ）：</p>
    <label><input type="radio" name="season" value="spring"> 春</label>
    <label><input type="radio" name="season" value="summer" checked> 夏</label>
    <label><input type="radio" name="season" value="autumn"> 秋</label>
    <label><input type="radio" name="season" value="winter"> 冬</label>

    <!-- disabledで選択不可にする -->
    <p>利用規約への同意（必須）：</p>
    <label><input type="checkbox" name="agree" value="yes" required> 同意する</label>
    <label><input type="checkbox" name="news" value="yes" disabled> ニュースレターを受け取る（現在受付停止中）</label>

    <p><button type="submit">送信</button></p>
  </form>

</body>
</html>

実行結果

チェックボックスは「ラーメン」があらかじめチェックされた状態で表示され、複数選択が可能です。ラジオボタンは「夏」が選択された状態で表示され、選択できるのは1つだけです。各コントロールが『label』で囲まれているため、テキスト部分をクリックしてもチェック状態を切り替えられます。「ニュースレター」はグレーアウトされて選択不可の状態です。

サンプルページはこちら

概要

チェックボックス（『type="checkbox"』）は「同意する」「通知を受け取る」など複数の項目を独立して選択させたいときに使います。一方、ラジオボタン（『type="radio"』）は「性別」「支払い方法」など選択肢が排他的（1つしか選べない）な場合に使います。ラジオボタンのグループは同じ『name』属性でまとめる点が重要です。

『value』属性はフォーム送信時にサーバーへ渡される値です。『value』を省略すると、チェックボックスは "on" という文字列が送信されてしまうため、必ず適切な値を設定してください。

ラベルと関連付けるには『label』要素を使用します。ラベルをクリックしてもチェック・選択が切り替わるので、クリック範囲が広がりユーザビリティが向上します。

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

2 以降 ○

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

JavaScriptとの連携

セレクトボックスの変更を検知して、連動する別のセレクトボックスの内容を動的に変える「連動プルダウン」は実務でよく使うパターンです。

<!-- 都道府県・市区町村の連動プルダウン -->
<label for="prefecture">都道府県</label>
<select id="prefecture" name="prefecture">
  <option value="">選択してください</option>
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
</select>

<label for="city">市区町村</label>
<select id="city" name="city" disabled>
  <option value="">先に都道府県を選択してください</option>
</select>

<script>
  var cityData = {
    tokyo: ['千代田区', '渋谷区', '新宿区', '港区'],
    osaka: ['大阪市', '堺市', '豊中市']
  };

  document.getElementById('prefecture').addEventListener('change', function() {
    var pref = this.value;
    var citySelect = document.getElementById('city');

    if (!pref) {
      citySelect.disabled = true;
      citySelect.innerHTML = '<option value="">先に都道府県を選択してください</option>';
      return;
    }

    var cities = cityData[pref] || [];
    var options = '<option value="">選択してください</option>';
    cities.forEach(function(city) {
      options += '<option value="' + city + '">' + city + '</option>';
    });
    citySelect.innerHTML = options;
    citySelect.disabled = false;
  });
</script>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典

<input> — 選択系

構文

属性一覧

サンプルコード

sample_input_select.html

実行結果

概要

対応ブラウザ

JavaScriptとの連携