HTML要素 ・ フォーム
<label>
入力欄のラベル
入力欄に名前（項目名）を付ける要素です。ラベルをクリックすると、対応する入力欄が選択されます。
01
サンプルコード
HTML
1<p>
2 <label for="email">メールアドレス</label>
3 <input type="email" id="email">
4</p>
5<p>
6 <label><input type="checkbox"> メールマガジンを受け取る</label>
7</p>
CSS
1label {
2 display: block;
3 margin-bottom: 4px;
4}
5input, textarea, select {
6 padding: 6px 10px;
7 border: 1px solid #bbb;
8 border-radius: 4px;
9 font: inherit;
10}
11input[type="checkbox"] {
12 padding: 0;
13}
14label:has(input[type="checkbox"]) {
15 display: inline;
16}
02
実行結果
ブラウザでの表示ラベルの文字をクリックすると入力欄やチェックボックスが選択されます
03
解説
label は、入力ボックスと案内テキスト（項目名）を関連付けるタグです。読み上げソフトは、入力欄にフォーカスしたときにラベルを読み上げます。ユーザビリティ・アクセシビリティの向上につながる重要なタグです。
結びつけ方は2通りです。for 属性に入力欄の id を書く方法と、label で入力欄ごと囲む方法です。
ラベルをクリックしても入力欄が選択されるため、小さなチェックボックスも押しやすくなります。
04
応用例・注意点
結びつけ方
| 方法 | 説明 |
|---|---|
for ＋ id | <label for="x"> と <input id="x"> を対応させる |
囲む | <label>文字 <input></label> のように中に入れる |
ラジオボタンを label で囲む
小さな丸だけでなく、「CSS」などの文字をクリックしても選べるようになります。同じ name を付けたラジオボタンは、1つだけ選べるグループになります。
HTML
1<label><input type="radio" name="acthouse" value="HTML"> HTML</label>
2<label><input type="radio" name="acthouse" value="CSS"> CSS</label>
3<label><input type="radio" name="acthouse" value="JS"> JS</label>
必須項目であることを示す
ラベルに「必須」を書き、入力欄には required を付けます。
HTML
1<label for="tel">電話番号 <span class="req">必須</span></label>
2<input type="tel" id="tel" required>
CSS
1.req {
2 color: #c0392b;
3 font-size: 12px;
4}
注意点
- 01for の値と input の id が一致していないと、結びつきません。
- 021つの label の中に入力欄を2つ以上入れないでください。