HTML 入門

フォームを使ってみよう

チェックボックスとラジオボタン

チェックボックス

1個以上の選択肢について個別に On/Off を切り替えるためのコントロールとしてチェックボックスがあります．次のように入力するとチェックボックスを配置できますが，隣の文字列をクリック（タップ）しても On/Off を切り替えられず，切り替えるためにはチェックボックスそのものをクリック（タップ）しなけばなりません．これでは使い勝手が非常に悪いでしょう．

index.html（抜粋）
<form>
  <div><input type="checkbox" name="check1"> オプション項目1</div>
  <div><input type="checkbox" name="check2"> オプション項目2</div>
  <div><button>送信</button></div>
</form>

文字列をクリック（タップ）しても On/Off が切り替えられるようにするためには <label> を使います．さらに送信ボタンを押したときにどのようなパラメータが URL に含まれて送信されているかについて確認するようにしてください．

index.html（抜粋）
<form>
  <div>
    <label><input type="checkbox" name="check1"> オプション項目1</label>
  </div>
  <div>
    <label><input type="checkbox" name="check2"> オプション項目2</label>
  </div>
  <div><button>送信</button></div>
</form>

オプションボタンや次のラジオボタンを利用するときには複数の選択肢をグループ化することがよくあります．グループ化するには <fieldset> タグで全体を囲います．その後，<legend> タグでそのグループの見出しを追加すると良いでしょう．

index.html（抜粋）
<form>
  <fieldset>
    <legend>追加したいオプションを選択してください</legend>
    <div><label><input type="checkbox" name="check1"> オプション項目1</label></div>
    <div><label><input type="checkbox" name="check2"> オプション項目2</label></div>
  </fieldset>
  <div><button>送信</button></div>
</form>

目次に戻る

ラジオボタン

複数の選択肢の中から1つだけを選ぶようにするためにはラジオボタンコントロールを使用します．このとき，同じ name 属性を指定したコントロールが一つのグループになります．また，各選択肢には異なる value 属性値を指定することにも注意してください．

index.html（抜粋）
<form>
  <fieldset>
    <legend>オプションを1つ選択してください</legend>
    <div>
      <label><input type="radio" name="radio1" value="1"> オプション項目1</label>
    </div>
    <div>
      <label><input type="radio" name="radio1" value="2"> オプション項目2</label>
    </div>
  </fieldset>
  <div><button>送信</button></div>
</form>

ページを読み込んだときにあらかじめ一つの選択肢を選択しておくためには checked 属性を指定すると良いでしょう．なお，checked は論理属性ですので，checked="checked" と書くべきところを checked のように省略することが可能です．

index.html（抜粋）
<form>
  <fieldset>
    <legend>オプションを1つ選択してください</legend>
    <div>
      <label><input type="radio" name="radio2" value="1"> オプション項目1</label>
    </div>
    <div>
      <label><input type="radio" name="radio2" value="2" checked> オプション項目2</label>
    </div>
    <div>
      <label><input type="radio" name="radio2" value="3"> オプション項目3</label>
    </div>
  </fieldset>
  <div><button>送信</button></div>
</form>

目次に戻る