Web-表單專題
input控件
對於input控件,增加了幾個type,並且可以直接進行驗證；
1.email
<form method="post">
<!--郵件認證-->
<input type="email" name="emali">
<input type="submit" value="提交">
</form>
提交：
2.Url
<form method="post">
<!--郵件認證-->
<input type="url" name="url">
<input type="submit" value="提交">
</form>
3.number
<form>
<input type="number" name="number">
<input type="submit" value="提交">
</form>
屬性 值 描述
-
max number 規定允許的最大值
-
min number 規定允許的最小值
-
step number 規定合法的數字間隔（如果 step=”3”，則合法的數是 -3,0,3,6 等）
-
value number 規定默認值
4.range
屬性 值 描述
-
max number 規定允許的最大值
-
min number 規定允許的最小值
-
step number 規定合法的數字間隔（如果 step=”3”，則合法的數是 -3,0,3,6 等）
-
value number 規定默認值
5.Date pickers
date：顯示日期
datetime顯示完整日期；
datetime-local：顯示完整日期 不含時區；
time：顯示時間，不含時區；
week：顯示周；
month：顯示月；
<form>
<input type="datetime" name="date">
<input type="submit" value="提交">
</form>
6.search
<form>
<input type="search" name="search">
<input type="submit" value="提交">
</form>
這個其實跟普通的文本框沒有多大的區別，這樣更加規範；
7.color（顏色選擇器）
<form>
<input type="color" name="color">
<input type="submit" value="提交">
</form>
8.placeholder
<form>
<input type="email" name="email" placeholder="[email protected]">
<input type="submit" value="提交">
</form>
輸入正確就會提交；
錯誤會有提示，如下圖：
9.autocomplete（瀏覽器通過autocomplete特性能夠知曉是否應該保存輸入值以備將來使用，autocomplete應該用一保護用戶敏感數據，避免本地瀏覽器對它們進行不安全的存儲。）
- on 該字段無需保護，值可以被保存和恢復
- off 該字段需要保護，值不可以保存
- unspecified 包含的默認設置，如果沒有被包含在表單中或沒有指定值，則行為表現為on；
<form action="" method="get" autocomplete="on">
Name:<input type="text" name="name" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
當用戶提交過一次表單後，再次訪問，name的輸入框會提示你曾輸入的值，而email則不會提示。
因為email設置了off（該字段需要保護，值不會保存）
10.autofocus
給表單加入這個屬性，自動獲取焦點；
11.list特性和datalist
Select: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="baidu" value="https://www.baidu.com/" > <option label="Google" value="http://www.google.com" > <option label="xinwen" value="http://news.baidu.com/" > </datalist>效果展示：
Web-表單專題