【HTML】labelタグ - 入力項目の見出し
HTMLのlabelタグをご紹介します。
labelタグ
labelタグは入力項目の見出しをマークアップします。
基本構文
<label for="id属性値">テキスト</label>
属性
主な属性をご紹介します。
属性名 | 必須 | 内容 |
---|---|---|
for | - | id属性値 |
サンプルコード
入力項目の見出し
<label>検索</label>
<input name="keyword" type="search">
入力項目へフォーカス
for属性で入力要素のid属性値を設定すると、クリックした時、その入力要素にフォーカスします。
<label for="searchbox">検索</label>
<input id="searchbox" name="keyword" type="search">
チェックボックス
labelタグをinput要素ごとマークアップすると、その中のinput要素にフォーカスします。
<label><input name="consent" type="checkbox"> 同意する</label>
排他選択
labelタグをinput要素ごとマークアップすると、その中のinput要素にフォーカスします。
<label><input name="course" type="radio"> Aコース</label><br>
<label><input name="course" type="radio"> Bコース</label><br>
<label><input name="course" type="radio"> Cコース</label>