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