1. ホーム
  2. html

[解決済み] What does "for" attribute do in HTML <label> tag?

2022-03-22 19:29:26

Question

I wonder what is the difference between the following two code snippets:

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

and

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

I'm sure it does something when you use a special JavaScript library, but apart from that, does it validate the HTML or required for some other reason?

How to solved?

The <label> tag allows you to click on the label, and it will be treated like clicking on the associated input element. There are two ways to create this association:

One way is to wrap the label element around the input element:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

もう一つの方法は for 属性に、関連する入力の ID を指定します。

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

これは、チェックボックスやボタンで使用する場合に特に便利です。なぜなら、ボックス自体を叩く代わりに、関連するテキストをクリックすることでボックスをチェックできるようになるからです。

この要素について詳しくは MDN .