入力用ラベル
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 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を持つ必要があります。
チートシート
ラベルは、<label>タグを使用して、フォーム入力に明確な視覚的ヒントを提供します：
<label for="field">Label text</label>
<input type="text" id="field">ラベルの for 属性は、適切な接続を作成するために、対応する入力フィールドの id 属性と一致する必要があります。
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<form>
<!-- ここにコードを記述してください -->
</form>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
