第 10 章 表單元素[中]

學習要點：

1.type 屬性解析

本章主要探討 HTML5 中表單中 input 元素的 type 屬性，根據不同的值來顯示不同的輸

入框。

input 元素可以用來生成一個供用戶輸入數據的簡單文本框。在默認的情況下，什麽樣

的數據均可以輸入。而通過不同的屬性值，可以限制輸入的內容。

一．input 元素解析

1.type 為 text 值時

<input type="text">

解釋：當 type 值為 text 時，呈現的就是一個可以輸入任意字符的文本框，這也是默

認行為。並且，還提供了一些額外的屬性。

List：指 定

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="香蕉

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

第 10 章 表單元素[中]