ラジオボタンの作成

初めに！

• 学習した内容をアウトプットすることで学習効率を向上させます。

• 初学者にもわかりやすいように解説していきます。

完成図

コード

<form action="#" method="post">
<dl>
    <dt><label for="gender">性別</label></dt>
    <dd>
      <label for="gender"><input type="radio" name="gender" value="male" checked>男性</label>
      <label for="gender"><input type="radio" name="gender" value="female">女性</label>
    </dd>
</form>

コードの説明

• dl要素の中にdt要素とdd要素を挿入し説明リストを作成する。

• dt要素の内容に性別を記述し、性別をlabel要素で囲む。

• dd要素の中にinput要素を２つ挿入する。そしてその横に男性、女性を記述。

 <dd>
      <input type="radio" name="gender" value="male">男性
     <input type="radio" name="gender" value="female">女性
 </dd>

• lnputタグ内のtype属性にはradio。name属性にはgender。value属性には男性の場合male、女性の場合はfemaleを記述。

• label要素を性別、男性、女性に対して囲む。for="gender"と記述。

• 男性側のinputタグ内にcheckedを記述することでデフォルトで男性が選択されている状態になる。

<label for="gender"><input type="radio" name="gender" value="male" checked>男性</label>

チェックボックスとラジオボタンの違いは？

• チェックボックスは複数の選択肢に対して複数チェックができる。

• ラジオボタンは複数の選択肢の中から１つ選択する。

まとめ

*ラジオボタンを作成をするためにinputタグのtype属性にradioを記述する。

• デフォルトで任意の選択肢を選択した状態にしたければinputタグの中にcheckedを記述する。