HTML5表單（下）（20160811-0011）

一、表單的其他元素

元素名稱	說明
select	生成一個下拉列表進行選擇
optgroup	對 select 元素進行編組
option	select 元素中的項目
textarea	生成一個多行文本框
output	表示計算結果

1、生成下拉列表

<!-- 點擊提交時，下拉列表子元素 option 如果沒有設置 value ，參數爲 fruit=蘋果；設置 value 參數 ，參數爲 sport=1，此時的 url 爲 https://www.baidu.com/?fruit=蘋果&sport=1。默認白菜首選 -->
<form name="other" method="get" action="http://www.baidu.com" target="_blank">
    <select name="fruit">
    	<optgroup label="水果">
	        <option>蘋果</option>
	        <option>橘子</option>
	        <option>香蕉</option>
	    </optgroup>

	    <optgroup label="蔬菜">
	        <option>黃瓜</option>
	        <option selected>白菜</option>
	        <option>土豆</option>
	    </optgroup>
	</select>
	<select name="sport">
        <option value="1">籃球</option>
        <option value="2">足球</option>
        <option value="3">羽毛球</option>
	</select>
	<button> 提交 </button>
</form>

解釋：<select> 下拉列表元素至少包含了一個 <option> 子元素，才能形成有效的選項列表。<select> 元素包含兩個子元素 <option> 項目元素和 <optgroup> 分組元素，還包含了一些屬性：

屬性名稱	說明
name	設定提交時的名稱
disabled	將下拉列表禁用
form	將表單外的下拉列表與某個表單掛鉤
size	設置下拉列表的高度
multiple	設置是否可以多選
autofocus	獲取焦點
required	選擇驗證，設置後必須選擇才能通過

2、多行文本框

<textarea name="suggest"> 請留下您的建議！ </textarea>

解釋：生成一個可變更大小的多行文本框。屬性：

屬性名稱	說明
name	設定提交時的名稱
form	將表單外的多行文本框與某個表單掛鉤
readonly	設置多行文本框只讀
disabled	將多行文本框禁用
maxlength	設置最大可輸入的字符長度
autofocus	獲取焦點
placeholder	設置輸入時的提示信息
rows	設置行數
cols	設置列數
wrap	設置是否插入換行符，有 soft 和 hard 兩種
required	設置必須輸入值，否則無法通過驗證

<pre name="code" class="html"><!-- 多行文本框，添加提示信息，但是要注意在 </textarea> 之前不能有空格，否則不能正確顯示 -->
<textarea name="suggest" placeholder="快快留下您的建議吧" ></textarea>

注意：wrap 屬性值爲 soft 時，表示在提交表單時，textarea 中的文本不換行，默認值；屬性值爲 hard 值，表示在提交表單時，textarea 中的文本換行（包含換行符），使用 hard值時，必須規定 cols 屬性。

3、計算結果

<form οninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
	<input type="number" id="num1"> * <input type="number" id="num2">
	<output for="num1 num2" name="res">
</form>

解釋：output 就是計算兩個文本框之間的值，其中就是內嵌了 JavaScript 功能。

二、輸入驗證

HTML5 對錶單提供了輸入驗證檢查方式，但這種驗證還是比較簡單的，並且不同的瀏覽器支持的成熟度還不同。在大部分情況下，可能還是要藉助 jQuery 等前端庫來實現豐富的驗證功能和顯示效果。

必須填寫一個值 <input type="text" required> <br>
限定在某一個範圍內 <input type="number" min="12" max="89"> <br>
使用正則表達式 <input type="text" placeholder="請輸入區號+座機" pattern="^[\d]{2,4}\-[\d]{6,8}$"> <br>
禁止表單驗證 <from action="http://www.baidu.com" novalidate>

示例代碼地址