動態

詳情 返回 返回

Input報錯“Form elements must have labels: Element has no title attribute Element has no placeholde” - 動態 詳情

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

寫表單時,如果只是單獨寫了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">

user avatar smalike 頭像 kobe_fans_zxc 頭像 aqiongbei 頭像 leexiaohui1997 頭像 huajianketang 頭像 inslog 頭像 banana_god 頭像 huichangkudelingdai 頭像 zero_dev 頭像 solvep 頭像 Z-HarOld 頭像 wmbuke 頭像
點贊 136 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.