【HTML】labelタグ - 入力項目の見出し

【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>