快捷導(dǎo)航

網(wǎng)頁(yè)報(bào)錯(cuò)"Form?elements?must?have?labels"的處理方法

更新時(shí)間：2023年06月13日 09:49:24 作者：軟件開(kāi)發(fā)技術(shù)愛(ài)好者

這篇文章主要給大家介紹了關(guān)于網(wǎng)頁(yè)報(bào)錯(cuò)"Form?elements?must?have?labels"的處理方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

網(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 ="可在此輸入文字" />

修改后源碼如下：

<!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)題)！

總結(jié)

到此這篇關(guān)于網(wǎng)頁(yè)報(bào)錯(cuò)"Form elements must have labels"的處理方法的文章就介紹到這了,更多相關(guān)網(wǎng)頁(yè)報(bào)錯(cuò)Form elements must have labels內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！