次の 2 つのコード スニペットの違いは何でしょうか。
<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>
そして
<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>
特別な JavaScript ライブラリを使用すると何かが行われるのは確かですが、それ以外に HTML を検証したり、他の何らかの理由で必要になったりするのでしょうか?
ベストアンサー1
タグ<label>を使用すると、ラベルをクリックすることができ、関連付けられた入力要素をクリックした場合と同じように扱われます。この関連付けを作成するには、次の 2 つの方法があります。
1 つの方法は、ラベル要素を入力要素の周りにラップすることです。
<label>Input here:
<input type='text' name='theinput' id='theinput'>
</label>
もう 1 つの方法はfor、属性を使用して、関連付けられた入力の ID を指定することです。
<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>
これは、ボックス自体をクリックするのではなく、関連付けられたテキストをクリックしてボックスをチェックできるため、チェックボックスやボタンで使用する場合に特に便利です。
テキストを入力に関連付けることは、アクセシビリティにとって非常に重要です。入力にアクセシブルな名前が提供されるため、支援技術が障害を持つユーザーに提供できるようになります。スクリーン リーダーは、ユーザーが入力にフォーカスすると、ラベル テキストを読み上げます。音声コマンド ソフトウェアにその入力にフォーカスするように指示することもできますが、そのためには (目に見える) 名前が必要です。