# 第 10 章 表單元素[中]
學習要點:?
1.type 屬性總匯
?2.type 屬性解析
主講教師:李炎恢
本章主要探討 HTML5?中表單中 input?元素的 type?屬性,根據不同的值來顯示不同的輸入框。
**一.****type****?屬性總匯**
input 元素可以用來生成一個供用戶輸入數據的簡單文本框。在默認的情況下,什么樣的數據均可以輸入。而通過不同的屬性值,可以限制輸入的內容。
| **屬性名稱** | **說明** |
| --- | --- |
| text | 一個單行文本框,默認行為 |
| password | 隱藏字符的密碼框 |
| search | 搜索框,在某些瀏覽器鍵入內容會出現叉標記取消 |
| submit、reset、button | 生成一個提交按鈕、重置按鈕、普通按鈕 |
| number、range | 只能輸入數值的框;只能輸入在一個數值范圍的框 |
| checkbox、radio | 復選框,用戶勾選框;單選框,只能在幾個中選一個 |
| image、color | 生成一個圖片按鈕,顏色代碼按鈕 |
| email、tel、url | 生成一個檢測電子郵件、號碼、網址的文本框 |
| date、month、time、week、datetime、datetime-local | 獲取日期和時間 |
| hidden | 生成一個隱藏控件 |
| file | 生成一個上傳控件 |
?**二.****input****?元素解析**
****1.type?****為****?text?****值時****
```
<input type="text">
```
解釋:當 type?值為 text?時,呈現的就是一個可以輸入任意字符的文本框,這也是默認行為。并且,還提供了一些額外的屬性。
| **屬性名稱** | **?說明** |
| --- | --- |
| list | 指定為文本框提供建議值的 datalist?元素,其值為datalist 元素的?id 值 |
| maxlength | 設置文本框最大字符長度 |
| pattern | 用于輸入驗證的正則表達式 |
| placeholder | 輸入字符的提示 |
| readonly | 文本框處于只讀狀態 |
| disabled | 文本框處于禁用狀態 |
| size | 設置文本框寬度 |
| value | 設置文本框初始值 |
| required | 表明用戶必須輸入一個值,否則無法通過輸入驗證 |
//設置文本框長度
```
<input type="text" size="50">
```
//設置文本框輸入字符長度
```
<input type="text" maxlength="10">
```
//設置文本框的初始值
```
<input type="text" value="初始值">
```
//設置文本框輸入提示
```
<input type="text" placeholder="請輸入內容">
```
//設置文本提供的建議值
```
<input list="footlist">
<datalist id="footlist">
<option value="蘋果">蘋果</option>
<option value="桔子">桔子</option>
<option value="香蕉" label="香蕉">
<option value="梨子">
</datalist>
```
//設置文本框內容為只讀,可以提交數據
```
<input type="text" readonly>
```
//設置文本框內容不可用,不可以提交數據
```
<input type="text" disabled>
```
**2.type** **為****?password** **值時**
```
<input type="password">
```
解釋:當 type?值為 password?時,一般用于密碼框的輸入,所有的字符都會顯示星號。密碼框也有一些額外屬性。
| **屬性名稱** | **說明** |
| --- | --- |
| maxlength | 設置密碼框最大字符長度 |
| pattern | 用于輸入驗證的正則表達式 |
| placeholder | 輸入密碼的提示 |
| readonly | 密碼框處于只讀狀態 |
| disabled | 文本框處于禁用狀態 |
| size | 設置密碼框寬度 |
| value | 設置密碼框初始值 |
| required | 表明用戶必須輸入同一個值 |
這里除了正則和驗證需要放在下一節,其余和文本框一致。
**3.type** **為****?search** **時**
```
<input type="search">
```
解釋:和文本框一致,在除 Firefox?瀏覽器的其他現代瀏覽器,會顯示一個叉來取消搜索內容。額外屬性也和 text?一致。
**4.type** **為****?number****、****range** **時**
```
<input type="number">
<input type="range">
```
解釋:只限輸入數字的文本框,不同瀏覽器可能顯示方式不同。生成一個數值范圍文本框,只是樣式是拖動式。額外屬性如下:
| **屬性名稱** | **說明** |
| --- | --- |
| list | 指定為文本框提供建議值的 datalist?元素,其值為datalist 元素的?id 值 |
| min | 設置可接受的最小值 |
| max | 設定可接受的最大值 |
| readonly | 設置文本框內容只讀 |
| required | 表明用戶必須輸入一個值,否則無法通過輸入驗證 |
| step | 指定上下調節值的步長 |
| value | 指定初始值 |
//范圍和步長
```
<input type="number" step="2" min="10" max="100">
```
**5.type** **為****?date** **系列時**
```
<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">
```
解釋:實現文本框可以獲取日期和時間的值,但支持的瀏覽器不完整。我們測試 Chrome?和 Opera?支持,其他瀏覽器尚未支持。所以,在獲取日期和時間,目前還是推薦使用 jQuery?等前端庫來實現日歷功能。額外屬性和 number?一致。
**6.type** **為****?color** **時**
```
<input type="color">
```
解釋:實現文本框獲取顏色的功能,最新的現代瀏覽器測試后 IE?不支持,其余的都能顯示一個顏色對話框提供選擇。
**7.type** **為****?checkbox****、****radio** **時**
```
音樂<input type="checkbox"> 體育<input type="checkbox">
<input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女"> 女
```
解釋:生成一個獲取布爾值的復選框或固定選項的單選框。額外屬性如下:
| **屬性名稱** | **說明** |
| --- | --- |
| checked | 設置復選框、單選框是否為勾選狀態 |
| required | 表示用戶必須勾選,否則無法通過驗證 |
| value | 設置復選框、單選框勾選狀態時提交的數據。默認為 on |
//默認勾選,默認值為?1
```
<input type="checkbox" name="music" checked value="1">
```
**8.type** **為****?submit****、****reset** **和****?button** **時**
```
<input type="submit">
```
解釋:生成一個按鈕,三種模式:提交、重置和一般按鈕,和<button>元素相同。
| **值名稱** | **說明** |
| --- | --- |
| submit? | 生成一個提交按鈕 |
| reset | ?生成一個重置按鈕 |
| button | ?生成一個普通按鈕 |
如果是 submit?時,還提供了和<button>元素一樣的額外屬性:formaction、formenctype、formmethod、formtarget 和?formnovalidate。
**9.type** **為****?image** **時**
```
<input type="image" src="img.png">
```
解釋:生成一個圖片按鈕,點擊圖片就實現提交功能,并且傳送了分區響應數據。圖片按鈕也提供了一些額外屬性。
| **屬性名稱** | **說明** |
| --- | --- |
| src | 指定要顯示圖像的 URL |
| alt | 提供圖片的文字說明 |
| width | 圖像的長度 |
| height | 圖像的高度 |
| 提交額外屬性 | formaction、formenctype、formmethod、formtarget和 formnovalidate。 |
**10.type** **為****?email****、****tel****、****url** **時**
```
<input type="email">
<input type="tel">
<input type="url">?
```
解釋:email?為電子郵件格式、tel?為電話格式、url?為網址格式。額外屬性和 text?一致。但對于這幾種類型,瀏覽器支持是不同的。email?支持比較好,現在瀏覽器都支持格式驗證;tel?基本不支持;url?支持一般,部分瀏覽器只要檢測到 http://就能通過。
**11.type** **為****?hidden** **時**
```
<input type="hidden">
```
解釋:生成一個隱藏控件,一般用于表單提交時關聯主鍵 ID?提交,而這個數據作為隱藏存在。
**12.type** **為****?file** **時**
```
<input type="file">
```
解釋:生成一個文件上傳控件,用于文件的上傳。額外提供了一些屬性:
| **屬性名稱** | **說明** |
| --- | --- |
| accept | 指定接受的 MIME?類型 |
| required | 表明用戶必須提供一個值,否則無法通過驗證 |
```
accept="image/gif, image/jpeg, image/png"
```
- 介紹
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超鏈接和路徑
- 第 5 章 分組元素
- 第 6 章 表格元素
- 第 7 章 文檔元素
- 第 8 章 嵌入元素
- 第 9 章 音頻和視頻
- 第 10 章 表單元素[上]
- 第 10 章 表單元素[中]
- 第 10 章 表單元素[下]
- 第 11 章 全局屬性和其他
- 第 12 章 CSS 入門
- 第 13 章 CSS 選擇器[上]
- 第 14 章 CSS 顏色與度量單位
- 第 15 章 CSS 文本樣式[上]
- 第 15 章 CSS 文本樣式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 邊框與背景[上]
- 第 17 章 CSS 邊框與背景[下]
- 第 18 章 CSS 表格與列表
- 第 19 章 CSS 其他樣式
- 第 20 章 CSS3 前綴和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 邊框圖片效果
- 第 24 章 CSS3 變形效果[下]
- 第 25 章 CSS3 過渡效果
- 第 26 章 CSS3 動畫效果
- 第 27 章 CSS 傳統布局[上]
- 第 27 章 CSS 傳統布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 彈性伸縮布局[上]
- 第 29 章 CSS3 彈性伸縮布局[中]
- 第 29 章 CSS3 彈性伸縮布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介紹
- 第 2 章 排版樣式
- 第 3 章 表格和按鈕
- 第 4 章 表單和圖片
- 第 5 章 柵格系統
- 第 6 章 輔組類和響應式工具
- 第 7 章 圖標菜單按鈕組件
- 第 8 章 輸入框和導航組件
- 第 9 章 路徑分頁標簽和徽章組件
- 第 10 章 巨幕頁頭縮略圖和警告框組件
- 第 11 章 進度條媒體對象和 Well 組件
- 第 12 章 列表組面板和嵌入組件
- 第 13 章 模態框插件
- 第 14 章 下拉菜單和滾動監聽插件
- 第 15 章 標簽頁和工具提示插件
- 第 16 章 彈出框和警告框插件
- 第 17 章 按鈕和折疊插件
- 第 18 章 輪播插件
- 第 19 章 附加導航插件
- 第 20 章 項目實戰--響應式導航[1]
- 第 20 章 項目實戰--響應式輪播圖[2]
- 第 20 章 項目實戰--首頁內容介紹[上][3]
- 第 20 章 項目實戰--首頁內容介紹[下][4]
- 第 20 章 項目實戰--資訊內容[5,6]
- 第 20 章 項目實戰--案例和關于[7]
- javaScript 教程
- javascript快速入門1--JavaScript前世今生,HelloWorld與開發環境
- javascript快速入門2--變量,小學生數學與簡單的交互
- javascript快速入門3--分支判斷與循環
- javascript快速入門4--函數與內置對象
- javascript快速入門5--數組與對象
- javascript快速入門6--Script標簽與訪問HTML頁面
- javascript快速入門7--ECMAScript語法基礎
- javascript快速入門8--值,類型與類型轉換
- javascript快速入門9--引用類型
- javascript快速入門10--運算符,語句
- javascript快速入門11--正則表達式
- javascript快速入門12--函數式與面向對象
- javascript快速入門13--BOM——瀏覽器對象模型(Browser Object Model)
- javascript快速入門14--DOM基礎
- javascript快速入門15--節點
- javascript快速入門15--表單
- javascript快速入門16--表格
- javascript快速入門17--事件
- javascript快速入門18--樣式
- javascript快速入門19--定位
- javascript快速入門20--Cookie
- javascript快速入門21--DOM總結
- javascript快速入門22--Ajax簡介
- javascript快速入門23--XHR—XMLHttpRequest對象
- javascript快速入門24--XML基礎
- javascript快速入門25--瀏覽器中的XML
- javascript快速入門26--XPath
- javascript快速入門27--XSLT基礎
- PHP 教程
- 第一章 如何加載運行已發布的PHP項目
- 第二章 PHP基礎
- 第三章 操作符與控制結構
- 第四章 數學運算
- 第五章 數組
- 第六章 目錄與文件
- 第七章 自定義函數
- 第八章 字符串處理
- 第九章 正則表達式
- 第十章 日期與時間
- 第十一章 表單與驗證
- 第十二章 會話控制
- 第十三章 上傳文件
- 第十四章 處理圖像
- 第十五章 MySQL 數據庫
- 第十六章 PHP 操作MySQL
- 第十七章 面向對象基礎
- 第十八章 面向對象的特性
- 第十九章 面向對象的工具