【select/radio/checkbox】HTMLの選択ボタン【SE解説】

PROGRAM

今回は、HTMLの選択ボタンについて、selectタグとinputタグのradio、inputタグのcheckboxに分け、簡単に解説していきます。

selectタグ

selectタグではoptionタグとともにプルダウンリストを作れます。

optionタグは選択項目を作り、selected属性を付けると初期選択されます。

<select>
    <option value="red" selected>赤</option>
    <option value="green">緑</option>
    <option value="blue">青</option>
</select>

上記のコードでは、赤と緑、青の色の選択ができるプルダウンリストを作り、赤を初期選択させています。

inputタグのradio

inputタグのtype属性をradioにすることでラジオボタンを作れます。

name属性の値を統一すればいずれか一つのみ選択可能となり、checked属性を付けると初期選択されます。

<input type="radio" name="color" value="red" checked>赤
<input type="radio" name="color" value="green">緑
<input type="radio" name="color" value="blue">青

上記のコードでは、赤と緑、青の色の選択ができるラジオボタンをグループ化して作り、赤を初期選択させています。

inputタグのcheckbox

inputタグのtype属性をcheckboxにすることによってチェックボックスを作れます。

name属性の値は統一する場合は値の末尾に”[]”を付けることが多く、checked属性を付けると初期選択されます。

<input type="checkbox" name="color[]" value="red" checked>赤
<input type="checkbox" name="color[]" value="green">緑
<input type="checkbox" name="color[]" value="blue">青

上記のコードでは、赤と緑、青の色の選択ができるチェックボックスをグループ化して作り、赤を初期選択させています。