第 10 章表單元素[下] · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 10 章表單元素[下] 學習要點： 1.其他元素 2.輸入驗證 **主講教師：李炎恢** 本章主要探討 HTML5?中表單中剩余的其他元素，然后重點了解一下表單的輸入驗證功能。 **一．其他元素** 表單元素還剩下幾個元素沒有講解，包括下拉框列表 select、多行文本框 textarea、和 output?計算結果元素。 | **元素名稱** | **說明** | | --- | --- | | select | 生成一個下拉列表進行選擇 | | optgroup | 對 select?元素進行編組 | | option | select 元素中的項目 | | textarea | 生成一個多行文本框 | | output | 表示計算結果 | **1.****生成下拉列表** ``` <select name="fruit"> 　　<option value="1">蘋果</option> 　　<option value="2">橘子</option> 　　<option value="3">香蕉</option> </select> ``` 解釋：<select>下拉列表元素至少包含一個<option>子元素，才能形成有效的選項列表。<select>元素包含兩個子元素<option>項目元素和<optgroup>分組元素，還包含了一些額外屬性。 | **屬性名稱** | **說明** | | --- | --- | | name | 設定提交時的名稱 | | disabled | 將下拉列表禁用 | | form | 將表單外的下拉列表與某個表單掛鉤 | | size | 設置下拉列表的高度 | | multiple | 設置是否可以多選 | | autofocus? | 獲取焦點 | | required? | 選擇驗證，設置后必須選擇才能通過 | //設置高度并實現多選 ``` <select name="fruit" size="30" multiple> ``` //默認首選 ``` <option value="2" selected>橘子</option> ``` //使用?optgroup 進行分組，label 為分組名稱，disabled 可以禁用分組 ``` <optgroup label="水果類"> <option value="1">蘋果</option> <option value="2" selected>橘子</option> <option value="3" label="香蕉">香蕉</option> </optgroup> ``` **2.****多行文本框** ``` <textarea name="content">請留下您的建議！ </textarea> ``` 解釋：生成一個可變更大小的多行文本框。屬性如下： | **屬性名稱** | **說明** | | --- | --- | | name | 設定提交時的名稱 | | form | 將表單外的多行文本框與某個表單掛鉤 | | readonly | 設置多行文本框只讀 | | disabled | 將多行文本框禁用 | | maxlength | 設置最大可輸入的字符長度 | | autofocus | 獲取焦點 | | placeholder | 設置輸入時的提示信息 | | rows | 設置行數 | | cols | 設置列數 | | wrap | 設置是否插入換行符，有 soft?和 hard?兩種 | | required | 設置必須輸入值，否則無法通過驗證 | //設置行高和列寬，設置插入換行符 ``` <textarea name="content" rows="20" cols="30" wrap="hard"></textarea> ``` 3.計算結果 ``` <form 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> ``` 解釋：output?就是計算兩個文本框之間的值，其實就是內嵌了 JavaScript?功能。 **二．輸入驗證** HTML5 對表單提供了輸入驗證檢查方式，但這種驗證還是比較簡陋的，并且不同的瀏覽器支持的成熟度還不同。在大部分情況下，可能還是要借助 jQuery?等前端庫來實現豐富的驗證功能和顯示效果。 //必須填寫一個值? ``` <input type="text" required> ``` //限定在某一個范圍內 ``` <input type="number" min="10" max="100"> ``` //使用正則表達式 ``` <input type="text" placeholder="請輸入區號+座機" required pattern="^[\d]{2,4}\-[\d]{6,8}$"> ``` //禁止表單驗證 ``` <form action="http://li.cc" novalidate> ```