網(wǎng)頁(yè)報(bào)錯(cuò)“Form elements must have labels”的處理
先給出錯(cuò)誤現(xiàn)象源碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>錯(cuò)誤測(cè)試2</title>
</head>
<body">
請(qǐng)輸入文本<input type="text"/>
</body>
</html>
保存文件名為：錯(cuò)誤發(fā)生2.html
順便提示：打開(kāi)瀏覽器開(kāi)發(fā)工具（DevTools），可用下面方式之一：
按Ctrl+Shift+I（Windows、Linux）或 Command+Option+I （macOS）。
按 F12。
右鍵單擊網(wǎng)頁(yè)上的任何項(xiàng)，然后選擇 “檢查”。
用Microsoft Edge打開(kāi)運(yùn)行后，再按下F12鍵打開(kāi)瀏覽器開(kāi)發(fā)工具可查看到報(bào)錯(cuò)信息用瀏覽器打開(kāi)，就會(huì)看到錯(cuò)誤：
Form elements must have labels: Element has no title attribute Element has no placeholder attribute（表單元素必須具有標(biāo)簽：元素沒(méi)有標(biāo)題屬性元素沒(méi)有占位符屬性）
特別說(shuō)明，Microsoft Edge瀏覽器中有報(bào)錯(cuò)提示，這個(gè)報(bào)錯(cuò)提示不影響運(yùn)行。使用Google Chrome和Firefox瀏覽器，沒(méi)有報(bào)錯(cuò)提示。
原因及解決方法
在html中，<label>用于用戶(hù)界面中某個(gè)元素的說(shuō)明。<label>通常和<input>一起使用，<label> 的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
上面的“請(qǐng)輸入文本<input type="text"/>”代碼中，label元素使用不正確，因?yàn)閘abel元素和input元素關(guān)聯(lián)。要將label元素關(guān)聯(lián)到特定的輸入元素，請(qǐng)使用以下任一選項(xiàng)：
將input元素嵌套在label元素中。
在label元素中，添加與input元素的id屬性（attribute）匹配的for屬性——label標(biāo)簽中的for值等于input標(biāo)簽的id值。
當(dāng)將label元素關(guān)聯(lián)到特定的輸入元素后，點(diǎn)擊label標(biāo)簽里面的文字時(shí)，光標(biāo)會(huì)定位在特定的輸入元素中。
另外，使用input元素的placeholder屬性，也能消除錯(cuò)誤提示。
【參考：Axe Rules | Deque University | Deque Systems】
對(duì)于本例，可將? 請(qǐng)輸入文本<input type="text" />? 改為：
<label>請(qǐng)輸入文本<input type="text"/></label>
或
<label for="abc">請(qǐng)輸入文本</label> <input type="text" id="abc" />
或
請(qǐng)輸入文本<input type="text" placeholder ="可在此輸入文字" />
修改后源碼如下：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-809546.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>錯(cuò)誤修改2</title>
</head>
<body">
<label for="abc">請(qǐng)輸入文本</label> <input type="text" id="abc" />
</body>
</html>
再用 Microsoft Edge 中打開(kāi)瀏覽器測(cè)試，No Issues(無(wú)問(wèn)題)！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-809546.html
到了這里，關(guān)于網(wǎng)頁(yè)報(bào)錯(cuò)“Form elements must have labels”的處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
