HTML <label> 表單欄位標題

<label> 用來給表單的控制元件一個說明標題，可以搭配 <label> 的像是 input, textarea, select, button, meter, output, progress 這些表單元件。

舉個例子：

<div>
    <label>Do you like cheese?</label>
    <input type="checkbox">
</div>
<div>
    <label>Do you like peas?</label>
    <input type="checkbox">
</div>

顯示結果：

<label> 還有一個常見的用途，是用來增加表單元件的可點擊範圍，什麼意思呢？就是當你點 label 的文字時，等於你同時點擊了 label 關聯的表單元件。

而我們是利用 label 的 for 屬性，將 for 的屬性值設定為某表單元件的 id 值，藉此來建立關聯。

語法範例：

<label for="emailadd">Email address: </label>
<input type="email" name="emailadd" id="emailadd">

顯示結果：

試試點一下 "Email address" 文字，效果會等於你直接點了 input 輸入框。

如果你不想麻煩的還要設定 for 和 id，還有另外一種簡便的方法，就是將表單元件直接包在 <label></label> 裡面，也可以有一樣的效果。

例如：

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

顯示結果：

試試點一下 "Do you like peas" 文字，效果會等於你直接點了 checkbox。