HTML5 為Web表單創(chuàng)建帶來了很多新特性,添加了多個(gè)新屬性和輸入類型,這些新特性提供了更好的輸入控制和驗(yàn)證。
HTML5 中的表單創(chuàng)建方式與 HTML 一樣:
<form> <input type="text" name="username" /> </form>
< > < type="text" name="username" /> </form>
placeholder 屬性
HTML5 添加了一個(gè)名為 placeholder 的新屬性。在 <input> 和 <textarea> 元素上,此屬性提供一種提示,描述輸入域所期待的值。
簡短的提示在用戶輸入值前會顯示在輸入域上。
實(shí)例
<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ī)定在頁面加載時(shí),域自動(dòng)地獲得焦點(diǎn)。
實(shí)例
讓 "First name" input 輸入域在頁面載入時(shí)自動(dòng)聚焦:
<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ī)定必須在提交之前填寫輸入域(不能為空)。
實(shí)例
不能為空的 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)完成功能。
當(dāng)用戶在自動(dòng)完成域中開始輸入時(shí),瀏覽器應(yīng)該在該域中顯示填寫的選項(xiàng)。
<form> <input type="text" name="username" /> < type="text" name="name" required /> </form>