🙆
inputタグのid, name、labelタグのfor属性をおさらい
inputタグにおける、name属性とid属性の役割
フロントエンドの開発において、フォームの実装においてほぼ必須で書くと言っていいinputタグですが、idとname属性を雰囲気で使っていたので、改めておさらいします。
name属性
MDNによると
入力欄コントロールの名前。名前/値の組の部分としてフォームと一緒に送信される
つまり、htmlの機能を使ってフォームをpostしたときのキー名として機能します。
<form action="action" method="post">
<label>Name: <input type="text" name="name" value="taro"></label>
<input type="submit"/>
</form>
上記の場合、name: "taro"としてサーバーにリクエストされるというわけです。
id属性
MDNによると
すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。..(中略),, この値は、ラベルとフォームコントロールをリンクするための <label> の for 属性の値として使用されます。
ユニークな識別子であり、かつラベルとフォームをリンクさせるためだということです。
<div class="preference">
<label for="firstName">your first name</label> // forとidを同じ値にする
<input type="text" name="name" id="firstName">
</div>
labelタグのfor属性とinputタグのid属性を統一させ、ラベルとフォームをリンクさせることができます。リンクさせるメリットは、ラベルをクリックしたときに、そのラベルに関連するフォームにフォーカスが当たること。チェックボックスなんかだと、ラベルをクリックすると、自動でチェックを当てたいようなケースで活躍します。
idとforをリンクさせていれば、labelとinputの間に別のdivタグなどを挟んだとしても、正常にフォームのキャプションとしてラベルが機能します。
<div class="preference">
<label for="firstName">First Name</label>
<div>type your first name ...</div>
<input type="text" name="name" id="firstName">
</div>
これでも問題なく機能するということです。
参考:
Discussion