完整的表單屬性可以通過查閱w3cschool-h5表單屬性獲取,這里僅針對常見屬性講解
<b>autocomplete(自動完成)</b>
能夠記錄用戶的輸入,并且給予提示
取值:
on:開啟
off:關(guān)閉
示例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" >
<input type="text" autocomplete="on" name="userName">
<input type="submit">
</form>
</body>
</html>
<b>autofocus(獲取焦點(diǎn))</b>
指定頁面中默認(rèn)選中的元素
示例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" >
姓名:<input type="text" name="userName"> <br/>
年齡<input type="number" name="telNum" autofocus>
<input type="submit">
</form>
</body>
</html>
<b>form(表單關(guān)聯(lián))</b>
當(dāng)我們想要提交數(shù)據(jù)時,需要把表單元素放到對應(yīng)的form標(biāo)簽中,
這個屬性的出現(xiàn)讓表單元素的放置位置不在受到約束
使用方法:
想要某個表單外元素跟該表單建立聯(lián)系,只需要為元素添加屬性form="表單id"設(shè)置為想要建立聯(lián)系的表單id即可
示例代碼
讓表單外輸入愛好的input標(biāo)簽跟id為userForm表單建立聯(lián)系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="userForm" >
姓名:<input type="text" name="userName">
<br/>
年齡:<input type="number" name="telNum" autofocus>
<br/>
<input type="submit">
</form>
<br/>
愛好:<input type="text" name="habbit" form="userForm">
</body>
</html>
使用注意:雖然這個屬性可以讓元素的放置位置不在成為限制,但是編碼時依舊建議將元素放置到對應(yīng)的表單中,除了兼容性問題以外,也為了提升代碼的可讀以及可維護(hù)性
multiple(多選)
在某個input標(biāo)簽中選擇多個值
適用情況:
該屬性可以用在type為file標(biāo)簽內(nèi)
示例代碼
選擇多文件時,需要按住ctrl按鈕
<input type="file" multiple >
placeholder(占位提示)
輸入元素內(nèi)默認(rèn)顯示一些提示信息,當(dāng)用戶輸入之后自動消失
使用方式:
直接為該屬性賦值想要提示的內(nèi)容即可
示例代碼:
<input type="text"placeholder="輸入用戶名">
新的表單元素
除了在input標(biāo)簽中增加了一些新的type屬性以外,H5也推出了一些新的表單元素,由于瀏覽器的兼容問題,使用頻率并不廣,了解即可 w3cSchool_新表單元素
datalist
該元素規(guī)定了輸入?yún)^(qū)域的選項(xiàng)列表,可以讓用戶有一些選項(xiàng)
測試代碼:注:測試代碼只是body
內(nèi)部的代碼
網(wǎng)址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn"/>
<option label="Google" value="http://www.google.com"/>
<option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>
電話: <input type="tel" list="tel_list">
<datalist id="tel_list">
<option value="186xxx" label="移動">移動</option>
<option value="187xxx" label="聯(lián)通">聯(lián)通</option>
<option value="135xxx" label="天翼">天翼</option>
</datalist>
datalist:id:id屬性,想要使用該datalist的元素需要通過list=id的方式來指定
option:value:指定具體的值
label:提示信息
注意:如果input的type為url,option中對應(yīng)的value需要使用http://開始
