第 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>