我們知道一個完整的表單是由表單標籤<form></form>與其中包裹的各種表單控制元件組成的。label標籤是一種常見的表單控制元件。它的作用是使使用者在填寫表單的專案時有更好的體驗。比如說如下這個例子

<label for="email">E-mail:</label>
<input type="text" id="email">

顯示效果如下：

表單控制元件都是內聯元素所以他倆會在一行顯示。在網頁中當我們點選E-mai字樣或文字框時都會在文字框中出現游標，這個就是label標籤的功能了。說白了label標籤就是他所關聯的表單控制元件的延伸，即滑鼠點選了他，就會出現和點選他所關聯的表單控制元件一樣的效果。而這前提是label的for屬性的屬性值與想要關聯的表單控制元件的id一樣。

若不想用id和for關聯還可用第二種方法。

<label>E-mail:<input type="text"></label>

效果是和以前一樣的。
 

當然其他表單控制元件也可以與label關聯。比如下面的例子：

<label for="a">a:</label> <input type="radio" id="a"><br>

<label for="b">b:</label> <input type="radio" id="b"><br>

<label for="c">c:</label> <input type="radio" id="c">
 

顯示效果如下：

那你可能說，這label標籤好想也沒多大用嘛。

嗯，當然有用。除了增強使用者體驗外，還為行動不便人士上網提供了便利。比如說，視力障礙者是藉助“網頁朗讀器”發出的聲音來瀏覽網頁的，若沒有label標籤的關聯，上網者就在腦海中不能想象出那種對應性，不能很好理解網站表單所想表達的內容。再比如，肢體有缺陷的上網者對於滑鼠的控制是很辛苦的，運用label後點擊的目標變大了，有利於操作。

So，一個真正的好的頁面既要能跨瀏覽器，還要能適配各種大小螢幕的裝置，還應該對各類上網者（無論是老年人，還是有缺陷的人）提供便利。