HTML 表單元素(下)
阿新 • • 發佈:2019-01-04
- 其他元素
- 輸入驗證
一、其他元素
元素名稱 | 說明 |
---|---|
select | 生成一個下拉列表進行選擇 |
optgroup | 對select元素進行編組 |
option | select元素中的專案 |
textarea | 生成一個多行文字框 |
output | 表示計算結果 |
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 > 分組元素,還包含了一些額外屬性。
name | 設定提交時的名稱 |
disabled | 將下拉列表禁用 |
form | 將表單的下拉列表和某個表單掛鉤 |
size | 設定下拉列表的高度 |
multiple | 設定是否可以多選 |
autofocus | 獲取焦點 |
required | 選擇驗證,設定後必須選擇才能通過 |
selected | 預設首選 |
屬性名稱 | 說明 |
---|
①、設定高度並實現多選
<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>
解釋:生成一個可變更大小的多行文字框。屬性如下:
name | 設定提交時的名稱 |
form | 將表單外的多行文字框與某個表單掛鉤 |
readonly | 設定多行文字框只讀 |
disabled | 將多行文字框禁用 |
maxlength | 設定最大可輸入的字元長度 |
autofocus | 獲取焦點 |
placeholder | 設定輸入時的提示資訊 |
rows | 設定行數 |
cols | 設定列數 |
wrap | 設定是否插入換行符,有soft和hard兩種 |
required | 設定必須輸入值,否則無法通過驗證 |
屬性名稱 | 說明 |
---|
①、設定行高和列寬,設定插入換行符
<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>