認(rèn)識 label 標(biāo)簽

label 標(biāo)簽的作用為 input 元素定義標(biāo)注（標(biāo)記）。label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。例如：

1. label 標(biāo)簽的使用

label 需要和 input 標(biāo)簽搭配一起使用。LABEL 標(biāo)簽的 for 屬性需要和 input 的 id 屬性一致，這樣才能點(diǎn)擊 label 標(biāo)簽的內(nèi)容使對應(yīng)的 input 輸入框自動(dòng)獲取焦點(diǎn)。代碼如下：

<label for="username">用戶名</label>
<input type="text" placeholder="請輸入內(nèi)容" id='username'>

效果如下：

2. label 標(biāo)簽的作用

表單控件都是內(nèi)聯(lián)元素所以他倆會(huì)在一行顯示。在網(wǎng)頁中當(dāng)我們點(diǎn)擊 label 標(biāo)簽的內(nèi)容或文本框時(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 一樣。

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

3. 注意事項(xiàng)

1. label 標(biāo)簽里面需要寫內(nèi)容，才會(huì)在頁面顯示。
2. label 標(biāo)簽的 for 屬性必須和 input 輸入框的 id 一致。

4. 真實(shí)案例分享

京東

 <div>
     <label for="loginname">用戶名</label>
     <input id="loginname" type="text" placeholder="郵箱/用戶名/登錄手機(jī)"/>
</div>

<div id="entry">
    <label for="nloginpwd">密碼</label>
    <input type="password" id="nloginpwd" placeholder="密碼"/>
    <span class="capslock">大小寫鎖定已打開</span>
</div>

拼多多

<div>
    <label for="user-mobile"></label>
    <input  id="user-mobile" placeholder="手機(jī)號碼">
</div>
<div>
    <label for="input-code"></label>
    <input type="tel" id="input-code" placeholder="驗(yàn)證碼">
</div>

5. 小結(jié)

1. label 標(biāo)簽一般和 input 一起使用。
2. label 標(biāo)簽的內(nèi)容會(huì)和 input 在同一排顯示。
3. 點(diǎn)擊 label 標(biāo)簽的內(nèi)容，會(huì)讓 input 輸入框獲取焦點(diǎn)。
4. label 標(biāo)簽的 for 屬性必須和 input 的 id屬性一致。