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>

これでも問題なく機能するということです。

参考:
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#attr-form
https://developer.mozilla.org/ja/docs/Web/HTML/Element/label