本節(jié)重點
- HTML5中添加了許多新特性的表單元素
- 表單元素主要表現(xiàn)在 元素Element + 類型Type + 屬性attribute
表單元素匯總解析
- 表單元素列表
| 元素名稱 | 說明 |
|---|---|
| form | 表示 HTML 表單 |
| input | 表示用來收集用戶輸入數(shù)據(jù)的控件 |
| textarea | 表示可以輸入多行文本的控件 |
| select | 表示用來提供一組固定的選項 |
| option | 表示提供提供一個選項 |
| optgroup | 表示一組相關(guān)的 option 元素 |
| button | 表示可用來提交或重置的表單按鈕(或一般按鈕) |
| datalist | 定義一組提供給用戶的建議值 |
| fieldset | 表示一組表單元素 |
| legend | 表示 fieldset 元素的說明性標(biāo)簽 |
| label | 表示表單元素的說明標(biāo)簽 |
| output | 表示計算結(jié)果 |
- 其他表單元素
| 元素名稱 | 說明 |
|---|---|
| select | 生成一個下拉列表進(jìn)行選擇 |
| optgroup | 對 select 元素進(jìn)行編組 |
| option | select 元素中的項目 |
| textarea | 生成一個多行文本框 |
| output | 表示計算結(jié)果 |
-
表單元素解析
表單元素有許多共有的屬性，大家注意分辨 不同
表單元素的特有屬性
1.form 表單解析
<form method="post" action="http://www.haosou.com/">
<button>提交</button>
</form>
form 表單的屬性
| 屬性名稱 | 說明 |
|---|---|
| action | 表單需要提交的頁面 |
| method | 表單需要提交的方式 get/post |
entype |
entype與文件上傳息息相關(guān)<br /> 1. application/x-www-form-urlencoded(默認(rèn)編碼，不能將進(jìn)行文件上傳) 2. multipart/form-data (用于將文件上傳到服務(wù)器的編碼) <br /> 3. text/plain (未規(guī)范編碼，不建議使用) |
| name | 表單名稱，建議書寫，用于程序識別表單 |
| target | 設(shè)置提交時的目標(biāo)位置:_blank、_parent、_self、_top |
| autocomplete | 設(shè)置瀏覽器記住用戶輸入的數(shù)據(jù),實現(xiàn)自動完成表單。<br />默認(rèn)為on自動完成 , 如果不想自動完成則設(shè)置 off。 |
| novalidate | 是否進(jìn)行表單的有效性檢查(瀏覽器m默認(rèn)的檢查效果) |
2.input 表單的屬性
| 屬性名稱 | 說明 |
|---|---|
| autofocues | 讓光標(biāo)聚焦在input上，可以讓用戶直接輸入 |
| disable | 禁用input,(禁止用戶輸入) |
| autocomplete | 設(shè)置input的自動完成功能 |
form |
設(shè)置表單掛鉤 讓表單外的元素設(shè)置表單掛鉤提交 |
| type | 元素的 type 屬性是最多的 |
3.<label>設(shè)置表單說明
<label for="user">用戶名:</label>
4.<fieldset>對表單進(jìn)行編組
`<fieldset>`元素可以將一些表單元素組織在一起,形成一個整體,并且可與外部掛鉤
| 屬性名稱 | 說明 |
|---|---|
| name | 給分組定義一個名稱 |
| form | 讓表單外的分組與表單掛鉤
|
| disabled | 禁用分組內(nèi)的表單 |
5.<legend>添加分組說明標(biāo)簽
<fieldset>
<legend>注冊表單</legend>
</fieldset>
6.<button>添加按鈕
button 按鈕的type 屬性有如下幾個值:
| 值名稱 | 說明 |
|---|---|
| submit | 表示按鈕的作用是提交表單,默認(rèn) |
| reset | 表示按鈕的作用是重置表單 |
| button | 表示按鈕為一般性按鈕,沒有任何作用 |
button 的 type = submit 時會提供額外的屬性 主要用作覆蓋已有的 form 表單屬性
| 屬性名稱 | 說明 |
|---|---|
| form | 指定按鈕關(guān)聯(lián)的表單 |
| formaction | 覆蓋 form 元素的 action 屬性 |
| formenctype | 覆蓋 form 元素的 enctype 屬性 |
| formmethod | 覆蓋 form 元素的 method 屬性 |
| formtarget | 覆蓋 form 元素的 target 屬性 |
| formnovalidate | 覆蓋 form 元素的 novalidate 屬性 |
表單元素(主要為 Input)的類型 Type
input 表單的屬性用于 限制表單的內(nèi)容 + 表單的樣式
1.表單的屬性匯總
| 屬性 | 說明 |
|---|---|
| text | 簡單的文本框，input的默認(rèn)行為 |
| password | 密碼框 |
| search | 搜索框 |
| submit 、reset 、button | 提交按鈕、重置按鈕、普通按鈕 |
| number range | 只能輸入數(shù)字的按鈕，range 用于設(shè)置數(shù)字范圍 |
| checkbox 、radio | 復(fù)選框，單選框 |
| image | 生成一個圖片按鈕 |
| color | 生成顏色代碼的按鈕 |
| email、tel、url | 生成一個檢測電子郵件、號碼、網(wǎng)址的文本框 |
| date、month、time、<br /> week、datetime、 datetime-local | 獲取日期和時間 |
| hidden | 生成一個隱藏的控件 |
| file | 生成一個上傳文件的組件 |
表單元素類型的分類解析
1.type值為text時 <input type = "text"> 元素屬性
| 屬性 | 說明 |
|---|---|
| list | 和為 input 框提供值的datalist一塊使用，相當(dāng)于select的變形形式 |
| maxlength | 設(shè)置文本框的最大寬度 |
| pattern | 用于輸入的正則表達(dá)式 |
| placeholder | 用于輸入字符的提示 |
| readonly | 設(shè)置只讀狀態(tài) |
| disabled | 設(shè)置禁用狀態(tài) |
| size | 設(shè)置文本框的寬度 |
| value | 文本框的初始值 |
| required | 是否為必填字段 |
設(shè)置文本提供的建議值 為 select 的變相形式
<input list="footlist">
<datalist id="footlist">
<option value="蘋果">蘋果</option>
<option value="桔子">桔子</option>
<option value="香蕉" label="香蕉"> <option value="梨子">
</datalist>
2.type值為password時 一般用于密碼框的輸入,所有的字符都會顯示星號
| 屬性名稱 | 說明 |
|---|---|
| maxlength | 設(shè)置密碼框最大字符長度 |
| pattern | 用于輸入驗證的正則表達(dá)式 |
| placeholder | 輸入密碼的提示 |
| readonly | 密碼框處于只讀狀態(tài) |
| disabled | 文本框處于禁用狀態(tài) |
| size | 設(shè)置密碼框?qū)挾?/td> |
| value | 設(shè)置密碼框初始值 |
| required | 表明用戶必須輸入同一個值 |
3.type值search search表單會顯示一個叉來取消搜索內(nèi)容
search 表單的屬性和 text 表單的屬性相同
-
type 為 number、range 時
type = number 生成一個只能填寫數(shù)字的文本框 type = range 生成一個表示數(shù)字范圍的文本框，并且只能拖動
| 屬性 | 說明 |
|---|---|
| list | 指定為文本框提供建議值的 datalist 元素,其值為 datalist 元素的 id 值 |
min |
設(shè)置可接受的最小值 |
max |
設(shè)定可接受的最大值 |
| readonly | 設(shè)置文本框內(nèi)容只讀 |
| required | 表明用戶必須輸入一個值,否則無法通過輸入驗證 |
step |
指定上下調(diào)節(jié)值的步長 |
| value | 指定初始值 |
設(shè)置數(shù)字的步長以及范圍
<input type="number" step="2" min="10" max="100">
5.type = data時 文本框可以獲取日期和時間的值
<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">
6.type = color 實現(xiàn)文本框獲取顏色的功能
7.type = image 生成一個圖片按鈕,點擊圖片就實現(xiàn)提交功能
| 屬性名稱 | 說明 |
|---|---|
| src | 指定要顯示圖像的 URL |
| alt | 提供圖片的文字說明 |
| width | 圖像的長度 |
| height | 圖像的高度 |
提交額外屬性 |
formaction、formenctype、formmethod、formtarget和 formnovalidate。 |
8.type 為 checkbox、radio 時 生成一個獲取布爾值的復(fù)選框或固定選項的單選框
| 屬性名稱 | 說明 |
|---|---|
| checked | 設(shè)置復(fù)選框、單選框是否為勾選狀態(tài) |
| required | 表示用戶必須勾選,否則無法通過驗證 |
value |
設(shè)置復(fù)選框、單選框勾選狀態(tài)時提交的數(shù)據(jù)。默認(rèn)為 on |
9.type 為 submit、reset 和 button 生成 提交、重置和一般按鈕
如果是 type = submit 時,提供了和<button>元素一樣的額外屬性
formaction、
formenctype、
formmethod、
formtarget、
formnovalidate
10.**type 為 email、tel、url **
<input type="email">
<input type="tel">
<input type="url">
11.type 為 hidden 生成一個隱藏控件
<input type="hidden">
12.type 為 file 生成一個文件上傳控件
| 屬性名稱 | 說明 |
|---|---|
| accept | 指定接受的 MIME 類型 |
| required | 表明用戶必須提供一個值,否則無法通過驗證 |
accept="image/gif, image/jpeg, image/png"
其他元素解析 select + textarea
- 其他表單元素
| 元素名稱 | 說明 |
|---|---|
| select | 生成一個下拉列表進(jìn)行選擇 |
| optgroup | 對 select 元素進(jìn)行編組 |
| option | select 元素中的項目 |
| textarea | 生成一個多行文本框 |
| output | 表示計算結(jié)果 |
-
select表單元素 生成下拉列表
<select name="fruit"> <option value="1">蘋果</option> <option value="2">橘子</option> <option value="3">香蕉</option> </select><select>下拉列表元素至少包含一個<option>子元素,才能形成有效的選項列 表。<select>可以充分利用<optgroup>形成分組select選擇區(qū)域內(nèi)分組
slect的屬性解析 (所有的表單元素都有 autofocus 屬性)
| 屬性名稱 | 說明 |
|---|---|
| name | 設(shè)定提交時的名稱 |
| disabled | 將下拉列表禁用 |
| form | 將表單外的下拉列表與某個表單掛鉤 |
| size | 設(shè)置下拉列表的高度 |
multiple |
設(shè)置是否可以多選 |
<select name="fruit" size="30" multiple>
<option value="2" selected>橘子</option>
<optgroup label="水果類">
<option value="1">蘋果</option>
<option value="2" selected>橘子</option>
<option value="3" label="香蕉">香蕉</option>
</optgroup>
</select>
3.多行文本框
多行文本框的屬性設(shè)置
| 屬性名稱 | 說明 |
|---|---|
| name | 設(shè)定提交時的名稱 |
| form | 將表單外的多行文本框與某個表單掛鉤 |
| readonly | 設(shè)置多行文本框只讀 |
| disabled | 將多行文本框禁用 |
| maxlength | 設(shè)置最大可輸入的字符長度 |
| autofocus | 獲取焦點 |
| placeholder | 設(shè)置輸入時的提示信息 |
| rows | 設(shè)置行數(shù) |
| cols | 設(shè)置列數(shù) |
| wrap | 設(shè)置是否插入換行符,有 soft 和 hard 兩種 |
| required | 設(shè)置必須輸入值,否則無法通過驗證 |
輸入驗證 主要針對于表單中的 email password number 等形式的表單進(jìn)行驗證
-
必填驗證
<input type="text" required> -
范圍限制驗證
<input type="number" min="10" max="100"> -
正則表達(dá)式驗證
適用于所有的表單<input type="text" placeholder="請輸入?yún)^(qū)號+座機(jī)" required pattern="^[\d]{2,4}\-[\d]{6,8}$"> -
阻止表單的驗證動作
<form action="http://li.cc" novalidate>
