Input報錯“Form elements must have labels: Element has no title attribute Element has no placeholde”

代码喵仔發表於2024-11-30

喵~
專案開發難免會遇到些不解的問題,以下總結的是簡化版,重在復現問題,解決問題。

寫表單時,如果只是單獨寫了input元素,發現在後臺管理會飄紅。感覺很奇怪,明明沒有寫錯語法,為什麼會飄紅呢?

1、寫一段最普通的html頁面

2、右鍵,選擇 “檢查”,開啟後臺管理器,指向input元素

此時,可以看到飄紅的input,滑鼠指向input,會顯示一段提示:

3、按照提示,Shift + Click,可直接跳至錯誤的詳細說明

Form elements must have labels: Element has no title attribute Element has no placeholder attribute
簡而言之就是說:input 元素要有配套的label元素,還要有 title 和 placeholder 屬性

也就是說,按照規範來講,它是建議我們補全對應的配套標籤和屬性的。

我順便測試了Chrome瀏覽器,並沒有出現Error提示,只有使用Edge瀏覽器才會出現。

所以,這個問題,實際上不能算 Error 吧,最多是 Warning ~

既然出現了,就接著測試,如果你的專案就是單純的需要一個獨立的Input,請往下看:

經過測試,三種情況可以消除Error:

4、解決方案
4.1 新增 title 屬性

<input type="text" title="Please input">

4.2 新增 placeholder 屬性

<input type="text" placeholder="Please input">

以上就是,無需 label 標籤,只需給 input 新增 title 或 placeholder 任一屬性,即可消除Error。
當然啦,如果想更標準,寫全套就更好了:
<label for="target"></label>
<input type="text" id="target" title="input title" placeholder="Please input">

相關文章