瘋狂的表單
2015/11/27 16:44:07
從三方面來介紹html5表單的新特性
表單結構更靈活
要提交數據的控件可以布局在form標簽之外，看下面的代碼，表單元素可以寫到form元素之外，只需在元素中加入form="form1"屬性，也可提交到form元素指定的服務器地址
<body>
<form action="upload.php" method="post" accept-charset="utf-8" id="form1">
</form>
<input type="text" name="username" value="" form="form1">
<input type="submit" name="sub" value="提交" form="form1">
</body>
新增表單元素
我們以前學過的表單元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表單元素，下面列出這些元素及其作用
- email 類型用於驗證email的格式，當提交表單時會自動驗證email域的值
- url 類型用於驗證 URL 地址的格式，當提交表單時會自動驗證url域的值
- number 類型會根據你的設置提供選擇數字的功能，min屬性設置最小值、max屬性設置最大值，value屬性設置當前值，step屬性設定每次增長的值，某些瀏覽器還不支持
- range 類型用於應該包含一定范圍內數字值的輸入域，其會以一個滑塊的形式展現，min屬性設置最小值、max屬性設置最大值，value屬性設置當前值，如果沒有設置，則其默認值的范圍是1-100
- 日期和時間類型：HTML5 擁有多個可供選取日期和時間的新輸入類型：
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間（小時和分鍾）
datetime - 選取時間、日、月、年（UTC 時間）
datetime-local - 選取時間、日、月、年（本地時間） - search 類型用於搜索域，比如站點搜索或 Google 搜索，為其加上results="s"屬性，則會在搜索框前面加上一個搜索圖標
- tel類型用於驗證輸入的是否是電話格式的內容，此元素現在還沒有瀏覽器支持
- color類型會提供一個顏色拾取器，供用戶選擇顏色，並將用戶選擇的顏色填充到此元素中
案例如下，大家可以將代碼拷貝或者自己編寫之后，在瀏覽器中查看效果
<form action="upload.php" method="post" accept-charset="utf-8" id="form1">
<br> 主頁:
<input type="url" name="url" value="" placeholder="個人主頁" required>
<br> 郵箱:
<input type="email" name="email" value="" placeholder="郵箱" required>
<br> 生日:
<input type="date" name="date" value="" required>
<br> 時間:
<input type="time" name="time" value="" required>
<br> 星期:
<input type="week" name="week" value="" required>
<br> 年齡:
<input type="number" name="age" value="">
<br> 薪水:
<input type="range" name="range" value="">
<br> 電話:
<input type="tel" name="tell" value="" placeholder="都不支持">
<br> 顏色:
<input type="color" name="mycolor">
<br>
<input type="search" name="key" value="" results="s"><br>
<input type="submit" name="sub" value="提交" form="form1">
</form>
瀏覽器的支持情況
chrome：
firefox：
Opera：
Microsoft Edge：
好，我們對微軟的進步進行表揚！
新增表單屬性
除了新增的表單元素之外，html5中還新增了一些表單屬性
新的 form 屬性：
autocomplete
novalidate
新的 input 屬性：
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
在下面的案例中，我們對一些常用的屬性做了解釋，大家直接看代碼和代碼旁邊的注釋，然后對照瀏覽器的運行結果就理解其意義了
<body>
<!--
placeholder:用於在文本框未輸入時提示作用
autofocus:用於控件自動獲取焦點
-->
<input type="search" name="key" value="" results="s" placeholder="君樂寶" autofocus="true">
<input type="button" name="" value="搜索">
<br>
<!--
novalidate:在控件中加入了required、emial、url等驗證后，如果想讓這些驗證失效，可以在表單中將novalidate設置為tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<!--
required:必填
autocomplete:在網頁的文本框中輸入部分內容或者雙節時，經常會看到在下面顯示輸入過的內容，
這就是html5的新特性：自動完成，如果不想使用此功能，將其設置為off即可
-->
<input type="text" name="UserName" value="" required autocomplete="off">
<br>
<!--
multiple:在選擇文件時，默認只能單選，加上這個屬性后，則可以使用鼠標選中多個文件進行上傳
-->
選擇文件
<input type="file" name="upload" value="" multiple="multiple">
<br>
<!--
list：這個屬性要和datalist元素一起使用，指定此文本框的可選擇項，另外其相較於select的優點在於還可以輸入
-->
區號：
<input type="text" name="age" value="" list="list1">
<br>
<datalist id="list1">
<option value="0312">保定</option>
<option value="0311">石家庄</option>
<option value="010">北京</option>
<option value="0313">唐山</option>
</datalist>
<!--
formaction:可以更改點擊此按鈕式提交到服務器的處理程序
formmethod:可以更改向服務器提交數據的方式
-->
<input type="submit" name="subsave" value="提交">
<input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>