先舉個(gè)例子：

[html] view plain copy
<label for="email">E-mail:</label> 
<input type="text" id="email">

表單控件都是內(nèi)聯(lián)元素所以他倆會(huì)在一行顯示。在網(wǎng)頁(yè)中當(dāng)我們點(diǎn)擊E-mai字樣或文本框時(shí)都會(huì)在文本框中出現(xiàn)光標(biāo)，這個(gè)就是label標(biāo)簽的功能了。說白了label標(biāo)簽就是他所關(guān)聯(lián)的表單控件的延伸，即鼠標(biāo)點(diǎn)擊了他，就會(huì)出現(xiàn)和點(diǎn)擊他所關(guān)聯(lián)的表單控件一樣的效果。而這前提是label的for屬性的屬性值與想要關(guān)聯(lián)的表單控件的id一樣。

若不想用id和for關(guān)聯(lián)還可用第二種方法。

[html] view plain copy
</pre><pre name="code" class="html"><label>E-mail:<input type="text"></label>

效果是和以前一樣的。

當(dāng)然其他表單控件也可以與label關(guān)聯(lián)。比如下面的例子：

[html] view plain copy
<label for="a">a:</label> <input type="radio" id="a"><br> 
[html] view plain copy
<pre name="code" class="html" style="font-size: 14px;"><label for="b">b:</label> <input type="radio" id="b"><br> 
[html] view plain copy
<label for="c">c:</label> <input type="radio" id="c">

那你可能說，這label標(biāo)簽好想也沒多大用嘛。

嗯，當(dāng)然有用。除了增強(qiáng)用戶體驗(yàn)外，還為行動(dòng)不便人士上網(wǎng)提供了便利。比如說，視力障礙者是借助“網(wǎng)頁(yè)朗讀器”發(fā)出的聲音來瀏覽網(wǎng)頁(yè)的，若沒有l(wèi)abel標(biāo)簽的關(guān)聯(lián)，上網(wǎng)者就在腦海中不能想象出那種對(duì)應(yīng)性，不能很好理解網(wǎng)站表單所想表達(dá)的內(nèi)容。再比如，肢體有缺陷的上網(wǎng)者對(duì)于鼠標(biāo)的控制是很辛苦的，運(yùn)用label后點(diǎn)擊的目標(biāo)變大了，有利于操作。

So，一個(gè)真正的好的頁(yè)面既要能跨瀏覽器，還要能適配各種大小屏幕的設(shè)備，還應(yīng)該對(duì)各類上網(wǎng)者（無論是老年人，還是有缺陷的人）提供便利。

html中的label標(biāo)簽使用方法就這么多，有需要的朋友可以保存一下，也請(qǐng)大家持續(xù)關(guān)注本站的其他更新。

相關(guān)閱讀：

HTML里的命名規(guī)則

怎樣隱藏溢出DIV邊框的內(nèi)容

怎么用CSS修改鼠標(biāo)樣式

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com