<label>タグの解説
<label>は、入力項目などのユーザーインターフェイスにキャプションを与えます。主に<form>の中に配置された<input>や<textarea>などのパーツをラベリングして関連付ける目的で使用します。
<label>のfor属性に指定された値がキャプションとなります。for属性の値はキャプションが関連付けられる要素の名前を特定するために使ってもよいとされています。ラベル付け可能なフォーム・コントロールのパーツが関連付けられた場合、その要素はラベル付けされたコントロールとして扱われます。
この要素を他の要素と関連付ける方法は二種類あります。対象となる要素を直接囲んで子要素に配置した場合は、暗黙的なラベル付けとなります。そして、for属性を使って対象となる要素のid属性の値を参照する方法は、明示的なラベル付けとなります。
<label>には、関連付けられた項目の入力作業を補助する機能があります。具体的には、ラベルのボックス領域がクリックされると対象となる入力項目にフォーカスが当たります。これはパソコンやスマートフォンの画面で細かい作業をするユーザーの手助けとなります。
<label>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<label>要素に指定できる属性
for- 関連付けが可能な要素の
id属性を参照します。この値は単一でなければなりません。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<label>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<label>と関連付けたい要素を指定する方法は二種類あります。対象を<label>の子要素に配置する方法は暗黙的なラベル付けとなり、for属性を使って対象のid属性を参照する方法は明示的なラベル付けとなります。
// 暗黙的なラベル付け
<label>
text <input type="value" id="name">
</label>
// 明示的なラベル付け
<label for="name">text</label>
<input type="value" id="name">
ラベル付けされた項目と、そうでない項目を比較してみましょう。ラベル付けされていない項目に付随するテキストをクリックしても何の効果もありませんが、ラベル付けされた項目のキャプションをクリックすると、対象の項目にフォーカスが当たります。
<div class="sample-block">
<p>ラベルなし：<input type="text"></p>
// 暗黙的なラベル付け
<p><label>ラベルあり：<input type="text"></label></p>
// 明示的なラベル付け
<p>
<label for="name-1">ラベルあり：</label>
<input type="text" id="name-1">
</p>
</div>
CSSで<label>を装飾する
スタイルシートでラベルを装飾すると、より使いやすいフォームパーツを作ることができます。例えば、ラジオボタンなどの小さな操作項目にフォーカスしなくても、ラベルの表示領域を広げて選択しやすくできます。
<div class="sample-block">
<section>
<h3 class="heading">ラベルなし</h3>
<div><input type="radio" name="ce" value="2045">2045年</div>
<div><input type="radio" name="ce" value="2046">2046年</div>
<div><input type="radio" name="ce" value="2047">2047年</div>
</section>
<section>
<h3 class="heading">ラベルあり</h3>
<label><input type="radio" name="ce" value="2045">2045年</label>
<label><input type="radio" name="ce" value="2046">2046年</label>
<label><input type="radio" name="ce" value="2047">2047年</label>
</section>
</div>
.sample-block {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.sample-block section {
padding: 0.5rem;
border: 1px solid gray;
background-color: #333;
}
.sample-block .heading {
padding-block-end: 0.5rem;
margin: 0;
border-block-end: 1px solid gray;
color: #fff;
font-size: 1rem;
}
.sample-block section :where(label, div) {
display: block;
padding: 0.5rem;
border-block-end: 1px solid gray;
background-color: #fff;
}
.sample-block section label {
cursor: pointer;
}
<label>をCSSの切り替えスイッチに利用する
ラベルとフォームパーツの関連付けを利用すると、スタイルシートの切り替えスイッチを作ることができます。ユーザーが操作する項目を<label>で用意し、それによって切り替えられたフォームパーツの状態をトリガーにして、CSSのセレクターを変えるやり方です。
次のような複数のブロックを含むコンテナがあったとします。ここに段組みの数をユーザーが任意で切り替えられる機能を追加してみましょう。これはあくまで一つの例ですが、この仕組みを応用すれば様々な表現が可能となります。
サンプルでは動作を分かりやすくするためにフォームパーツを残していますが、スタイルシートで画面から見えなくすることも可能です。
<div class="sample-block">
<div class="controller">
<label for="column-1">１カラム</label>
<label for="column-2">２カラム</label>
<label for="column-3">３カラム</label>
</div>
<input type="radio" name="switch" id="column-1" checked>
<input type="radio" name="switch" id="column-2">
<input type="radio" name="switch" id="column-3">
<section class="target">
<div>Item</div>
<div>Item</div>
<div>Item</div>
</section>
</div>
.sample-block {
text-align: center;
}
.sample-block .controller {
display: flex;
}
.sample-block label {
flex-grow: 1;
padding: 0.5rem;
background: linear-gradient(#eee 50%, #999);
border: 1px solid #999;
cursor: pointer;
}
.sample-block .target {
display: grid;
gap: 1rem;
}
.sample-block .target div {
padding: 0.5rem;
background-color: #ccc;
}
.sample-block #column-1:checked ~ .target {
grid-template-columns: repeat(1, 1fr);
}
.sample-block #column-2:checked ~ .target {
grid-template-columns: repeat(2, 1fr);
}
.sample-block #column-3:checked ~ .target {
grid-template-columns: repeat(3, 1fr);
}