入力用ラベル
CoddyのHTMLジャーニー「基礎」セクションの一部。レッスン 39/60。
ラベルがないと、入力欄が何のためのものか必ずしも明確ではありません。ラベルは、そのフィールドにどのような入力が求められているのかを、ユーザーに視覚的に分かりやすく示します。ラベルは <label> タグを使って作成します。
基本的な構文は次のとおりです。
<label for="field">Label text</label>
<input type="text" id="field"><label>: ラベルを作成するタグ。
for: ラベルとフォームフィールドを関連付けます。forの値は、フォームフィールドのidと一致させます。
- ラベルテキスト：フォームフィールドの用途を説明するテキスト。
<input>: ラベルが参照するフォームフィールド。
id: フォームフィールドの一意の識別子で、ラベルのfor属性と一致します。
これらを関連付けると、ラベルのテキストをクリックしたときに入力欄にカーソルが置かれ（フォーカスされ）、ユーザーがクリックできる領域も広くなります。
チャレンジ
簡単<form>タグの内側に次のタグを追加します:
- テキストが 'First Name:' で、
for属性に 'firstname' が設定された<label>。 type="text"の<input>フィールド。<input>フィールドには、ラベルのfor属性と一致するidを設定します。
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<form>
<!-- ここにコードを書いてください -->
</form>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
基礎のすべてのレッスン
自分で練習してみよう: Webプレイグラウンド