喵~
項目開發難免會遇到些不解的問題,以下總結的是簡化版,重在復現問題,解決問題。
寫表單時,如果只是單獨寫了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">
