1. 其他元素
2. 輸入驗證

一、其他元素

1、生成下拉列表

<form>
    <select name="fruit01">
        <option value="1">蘋果</option>
        <option value="2">香蕉</option>
        <option value="3">橘子</option
 
>
    </select>
    <button>提交</button>
</form>

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

①、設定高度並實現多選

<form action="http://www.so.com" target="_blank">
    <select name="fruit02" size="4" multiple>
        <option value="1">橘子</option>
        <option value="2">香蕉</option>
        <option value="3">蘋果</option>
        <option value="4">菠蘿</option>
        <option value="5">橙子</option>
        <option value="6">山楂</option>
        <option value="7">葡萄</option>
        <option value="8">柚子</option>
        <option value="9">櫻桃</option>
        <option value="0">西瓜</option>
    </select>
    <button>提交</button>
</form>

②、預設首選

<form action="http://www.so.com" target="_blank">
    <select name="fruit03">
        <option value="1">橘子</option>
        <option value="2">香蕉</option>
        <option value="3">蘋果</option>
        <option value="4">菠蘿</option>
        <option value="5">橙子</option>
        <option value="6" selected="">山楂</option>
        <option value="7">葡萄</option>
        <option value="8">柚子</option>
        <option value="9">櫻桃</option>
        <option value="0">西瓜</option>
    </select>
    <button>提交</button>
</form>

③、使用optgroup進行分組，label為分組名稱，disabled可以禁用分組

<form action="http://www.baidu.com" target="_blank">
    <select>
        <optgroup label="水果類">
            <option value="1">蘋果</option>
            <option value="2" selected>香蕉</option>
            <option value="3" label="橘子"></option>
        </optgroup>
        <optgroup label="粗糧">
            <option value="4">小米</option>
            <option value="5">大米</option>
            <option value="6">玉米</option>
        </optgroup>

    </select>
</form>

2、多文字框textarea

<form>
    <textarea name="content" placeholder="請留下您的建議！"></textarea>
    <button>提交</button>
</form>

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

①、設定行高和列寬，設定插入換行符

<form>
    <textarea name="content" rows="5" cols="10" warp="hard"></textarea>
    <button>提交</button>
</form>

3、計算結果

<form action="http://www.so.com" target="_blank" oninput="res.value=num1.valueAsNumber * num2.valueAsNumber">
    <input type="number" id="num1">x<input type="number" id="num2"> =
    <output for="num1 num2" name="res">
</form>

二、輸入驗證

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

1、必須填寫一個值

<form action="http://www.so.com" target="_blank">
    <input type="text" name="user01" required="">
    <button>提交</button>
</form>

2、限定在一個範圍內

<form action="http://www.so.com" target="_blank">
    <input type="number" name="user02" min="10" max="100">
    <button>提交</button>
</form>

3、使用正則表示式

<form action="http://www.so.com" target="_blank">
    <input type="text" id="user03" placeholder="請輸入區號+座機" required pattern="^(0[0-9]{2,3}/-)?([2-9][0-9]{6,7})+(/-[0-9]{1,4})?$">
    <button>提交</button>
</form>

4、禁用表單驗證

<form action="http://www.so.com" target="_blank" novalidate>
    <input type="text" id="user03" placeholder="請輸入區號+座機" required pattern="^(0[0-9]{2,3}/-)?([2-9][0-9]{6,7})+(/-[0-9]{1,4})?$">
    <button>提交</button>
</form>