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

HTMLのlabelタグについて解説します。

検証環境

HTML

macOS

14.1

labelタグ

labelタグは“入力項目の見出し”を意味するタグです。

label要素をクリックした際、label要素のfor属性値と同じid属性値を持つ要素にフォーカスを当てます。

基本構文

<label for="id属性値">テキスト</label>

属性

主な属性は次の通りです。

属性名	必須	内容
for	-	id属性値

サンプル

入力項目の見出し

sample.html

___ih_hl_start
<label>検索</label>
___ih_hl_end
<input name="keyword" type="search">

プレビュー

入力項目へフォーカス

label要素をクリックした際に、label要素のfor属性値と同じid属性値を持つ要素にフォーカスします。

sample.html

___ih_hl_start
<label for="searchbox">検索</label>
___ih_hl_end
<input id="searchbox" name="keyword" type="search">

プレビュー

input要素のマークアップ１

labelタグでinput要素ごとマークアップすると、label要素のどこかをクリックするとinput要素にフォーカスします。

sample.html

___ih_hl_start
<label>
    <input name="consent" type="checkbox"> 同意する
</label>
___ih_hl_end

プレビュー

input要素のマークアップ２

sample.html

___ih_hl_start
<label>
    <input name="course" type="radio"> Aコース
</label>
___ih_hl_end
<br>
___ih_hl_start
<label>
    <input name="course" type="radio"> Bコース
</label>
___ih_hl_end
<br>
___ih_hl_start
<label>
    <input name="course" type="radio"> Cコース
</label>
___ih_hl_end

プレビュー