HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのlabel要素におけるfor属性の使い方を解説

<label>要素のfor属性は、ラベルを特定のフォーム部品（入力要素）に関連付けるために使用されます。この属性を設定することで、ラベルをクリックした際に対応する入力フィールドがアクティブになり、ユーザビリティとアクセシビリティが向上します。

構文

for属性の基本的な構文は以下の通りです。

<label for="id">

ここで指定する「id」は、関連付けたい要素のid属性の値です。

サンプルコード

それでは、<label>要素のfor属性を実装した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Last Semester Results</h2>
<form>
<fieldset>
<legend>Result</legend>
<label for="stinfo">Student:</label>
<input type="text" id ="stinfo" value="Jack"><br>
<label for="sub">Subject:</label>
<input type="text" value="Maths"><br>
<label for="rank">Rank:</label>
<input type="number" value="8"><br>
</fieldset>
</form>
</body>
</html>

出力結果

上記のコードを実行すると、以下のような出力が得られます。

HTMLのlabel要素におけるfor属性の使い方を解説

コードの解説

上記の例では、複数の入力フィールドを持つフォームを作成しています。

<form>
<fieldset>
<legend>Result</legend>
<label for="stinfo">Student:</label>
<input type="text" id ="stinfo" value="Jack"><br>
<label for="sub">Subject:</label>
<input type="text" value="Maths"><br>
<label for="rank">Rank:</label>
<input type="number" value="8"><br>
</fieldset>
</form>

<label>要素のfor属性を使って、各入力フィールドにラベルを設定しています。例えば、以下の部分です。

<label for="stinfo">Student:</label>
<input type="text" id ="stinfo" value="Jack"><br>

このようにfor属性に「stinfo」を指定することで、idが「stinfo」であるテキスト入力欄には「Student」というラベルが関連付けられます。

<label for="stinfo">Student:</label>

なお、for属性で関連付ける際は、ラベルのfor属性の値と、対象となる入力要素のid属性の値を必ず一致させる必要があります。正しく関連付けられていれば、ラベル部分をクリックするだけで対応する入力フィールドにフォーカスが移動します。これは特にチェックボックスやラジオボタンで効果を発揮し、操作性の向上につながります。

  1. HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。構文（シンタックス）required属性の基本的な構文は以下の通りです。<t

  2. HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次