HTML5 為Web表單創(chuàng)建帶來了很多新特性,添加了多個新屬性和輸入類型,這些新特性提供了更好的輸入控制和驗證。
HTML5 中的表單創(chuàng)建方式與 HTML 一樣:
<form> <input type="text" name="username" /> </form>
< > < type="text" name="username" /> </form>
placeholder 屬性
HTML5 添加了一個名為 placeholder 的新屬性。在 <input> 和 <textarea> 元素上,此屬性提供一種提示,描述輸入域所期待的值。
簡短的提示在用戶輸入值前會顯示在輸入域上。
實例
<form> <input type="text" name="fname" placeholder="First name" /> <input type="text" name="lname" placeholder="Last name" /> <input type="submit" value="提交" /> </form>
運(yùn)行顯示結(jié)果如下圖:
autofocus 屬性
當(dāng)表autofocus 屬性規(guī)定在頁面加載時,域自動地獲得焦點。
實例
讓 "First name" input 輸入域在頁面載入時自動聚焦:
<form> First name: <input type="text" name="fname" autofocus><br> Last name: <input type="text" name="lname"><br> <input type="submit"> </form>
運(yùn)行顯示結(jié)果如下圖:
<form> <input type="text" name="username" ="輸入你的用戶名" /> </form>
帶必填字段的表單
required 屬性規(guī)定必須在提交之前填寫輸入域(不能為空)。
實例
不能為空的 input 字段:
<form autocomplete="off"> Username: <input type="text" name="username" required /> <input type="submit" /> </form>
運(yùn)行顯示結(jié)果如下圖:
autocomplete 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動完成功能。
當(dāng)用戶在自動完成域中開始輸入時,瀏覽器應(yīng)該在該域中顯示填寫的選項。
<form> <input type="text" name="username" /> < type="text" name="name" required /> </form>