網頁報錯"Form?elements?must?have?labels"的處理方法

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

這篇文章主要給大家介紹了關于網頁報錯"Form?elements?must?have?labels"的處理方法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

網頁報錯“Form elements must have labels”的處理

先給出錯誤現象源碼：

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>錯誤測試2</title>
</head>
<body">
    請輸入文本<input type="text"/>
</body>
</html>

保存文件名為：錯誤發(fā)生2.html

順便提示：打開瀏覽器開發(fā)工具（DevTools），可用下面方式之一：

按Ctrl+Shift+I（Windows、Linux）或 Command+Option+I （macOS）。

按 F12。

右鍵單擊網頁上的任何項，然后選擇 “檢查”。

用Microsoft Edge打開運行后，再按下F12鍵打開瀏覽器開發(fā)工具可查看到報錯信息用瀏覽器打開，就會看到錯誤：

Form elements must have labels: Element has no title attribute Element has no placeholder attribute（表單元素必須具有標簽：元素沒有標題屬性元素沒有占位符屬性）

特別說明，Microsoft Edge瀏覽器中有報錯提示，這個報錯提示不影響運行。使用Google Chrome和Firefox瀏覽器，沒有報錯提示。

原因及解決方法

在html中，<label>用于用戶界面中某個元素的說明。<label>通常和<input>一起使用，<label> 的 for 屬性應當與相關元素的 id 屬性相同。

上面的“請輸入文本<input type="text"/>”代碼中，label元素使用不正確，因為label元素和input元素關聯。要將label元素關聯到特定的輸入元素，請使用以下任一選項：

將input元素嵌套在label元素中。

在label元素中，添加與input元素的id屬性（attribute）匹配的for屬性——label標簽中的for值等于input標簽的id值。

當將label元素關聯到特定的輸入元素后，點擊label標簽里面的文字時，光標會定位在特定的輸入元素中。

另外，使用input元素的placeholder屬性，也能消除錯誤提示。

【參考：Axe Rules | Deque University | Deque Systems】

對于本例，可將請輸入文本<input type="text" /> 改為：

<label>請輸入文本<input type="text"/></label>

或

<label for="abc">請輸入文本</label> <input type="text" id="abc" />

或

請輸入文本<input type="text" placeholder ="可在此輸入文字" />

修改后源碼如下：

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>錯誤修改2</title>
</head>
<body">
<label for="abc">請輸入文本</label> <input type="text" id="abc" />
</body>
</html>

再用 Microsoft Edge 中打開瀏覽器測試，No Issues(無問題)！

總結

到此這篇關于網頁報錯"Form elements must have labels"的處理方法的文章就介紹到這了,更多相關網頁報錯Form elements must have labels內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！