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

HTMLのfor属性とは？label要素との紐付け方法を実例で解説

HTMLのfor属性は、<label>要素を、for属性の値と同じidを持つ最初のラベル付け可能な要素（labelable要素）に結び付けるための属性です。ラベルとフォーム部品を関連付けることで、ユーザーがラベルをクリックした際に該当する入力欄へフォーカスが移動するなど、操作性やアクセシビリティが向上します。

構文

for属性の構文は以下のとおりです。

1. for属性の値を取得する場合

labelObject.htmlFor

2. for属性の値を設定する場合

labelObject.htmlFor = "対象要素のid"

JavaScriptからは<label>要素の htmlFor プロパティとしてアクセスでき、値の参照だけでなく動的な変更も可能です。

サンプルコード

for属性の具体的な使用例を見てみましょう。ボタンをクリックすると、ラベルの紐付け先が別のテキスト入力欄に切り替わる仕組みです。

<!DOCTYPE html>
<html>
<head>
<title>Label htmlFor</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Label-htmlFor</legend>
<label id="CurrentEditor" for="editorTwo">Current Editor:</label><br>
<input type="text" id="editorOne" placeholder="editorOne">
<input type="text" id="editorTwo" placeholder="editorTwo">
<input type="button" onclick="getEventData()" value="Change Editor">
<div id="divDisplay">Label for attribute set as editor two</div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var labelSelect = document.getElementById("CurrentEditor");
    function getEventData() {
        if(labelSelect.htmlFor === 'editorTwo'){
            divDisplay.textContent = 'Label for attribute set as editor one';
            labelSelect.htmlFor = 'editorOne';
        }
    }
</script>
</body>
</html>

このコードでは、初期状態で「Current Editor」ラベルのfor属性には「editorTwo」が設定されています。ボタンをクリックすると、htmlForプロパティの値が「editorOne」に書き換えられ、表示メッセージも更新されます。

実行結果

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

1) 「Change Editor」ボタンをクリックする前

HTMLのfor属性とは？label要素との紐付け方法を実例で解説

2) 「Change Editor」ボタンをクリックした後

HTMLのfor属性とは？label要素との紐付け方法を実例で解説

このように、for属性（htmlForプロパティ）を使えば、ラベルとフォーム部品の関連付けをJavaScriptから柔軟に制御できます。動的にフォームを生成・変更する場面などで非常に便利な機能なので、ぜひ活用してみてください。

  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属性の基本構文は次