1 用input 元素輸入文字
type屬性設置爲text的input元素在瀏覽器中顯示爲一個單行文本框，這是未設置type屬性情況下的默認形式。
text型input元素可用的額外屬性
| 屬性 | 說明 | 是否HTML5新增 |
|---|---|---|
| dirname | 指定元素內容文字方向的名稱，參見1.5節 | 是 |
| list | 指定爲文本框提供建議值的datalist元素，其值爲datalist元素的id值，詳見1.3節 | 是 |
| maxlength | 設定用戶可以在文本框中輸入的字符的最大數目，詳見1.3節 | 否 |
| pattern | 指定一個用於輸入驗證的正則表達式，詳見第14章 | 是 |
| placeholder | 指定關於所需數據類型的提示，詳見1.2節 | 是 |
| readonly | 用來將文本框設爲只讀以阻止用戶編輯其內容，詳見1.4節 | 否 |
| required | 表明用戶必須輸人一個值，否則無法通過輸入驗證，詳見第14章 | 是 |
| size | 通過指定文本框中可見的字符數目設定其寬度，詳見1.1節 | 否 |
| value | 設置文本框的初始值，詳見1.2節 | 否 |
1.1 設定元素大小
maxlength屬性設定了用戶能夠輸入的字符的最大數目， size屬性則設定了文本框能夠顯示的字符數目
<input size="10" maxlength="10" id="fave" name="fave"/>1.2 設置初始值和佔位式提示
可以用value屬性設置一個默認值，還可以用placeholder屬性設置一段提示文字
<input placeholder="Your name" id="name" name="name"/>
<input value="Apple" id="fave" name="fave"/>1.3 使用數據列表
可以將input元素的list屬性設置爲一個datalist元素的id屬性值，這樣用戶在文本框中輸入數據時只消從後一元素提供的一批選項中進行選擇就行了
| datalist元素 | |
|---|---|
| 元素類型 | 短語 |
| 允許具有的父元素 | 任何可以包含短語元素的元素 |
| 局部屬性 | 無 |
| 內容 | option元素和短語內容 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 是 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | 無 |
提供給用戶選擇的值各用一個option元素指定
| option元素 | |
|---|---|
| 元素類型 | 無 |
| 允許具有的父元素 | datalist 、select 、optgroup |
| 局部屬性 | disabled 、selected 、label和value |
| 內容 | 字符數據 |
| 標籤用法 | 虛元素形式，或開始標籤與結束標籤一起使用 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | 無 |
例子：
<!--使用datalist元素-->
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<label for="fave">
<!--使用list選定datalist-->
Fruit: <input list="fruitlist" id="fave" name="fave"/>
</label>
<button type="submit">Submit Vote</button>
</form>
<datalist id="fruitlist">
<!--其value屬性值在該元素代表的選項被選中時就是input元素所用的數據值
顯示的時候不會是value的值-->
<option value="Apples" label="Lovely Apples"/>
<option value="Oranges">Refreshing Oranges</option>
<option value="Cherries"/>
</datalist>
</body>
</html>1.4 生成只讀或被禁用的文本框
- readonly和disabled屬性都可以用來生成用戶不能編輯的文本框，其結果的外觀不同。
- 設置了disabled屬性的input元素的數據不會提交到服務器，readonly屬性會。
<input value="Adam" disabled id="name" name="name"/>
<input value="Boston" readonly id="city" name="city"/>2 用input 元素輸入密碼
type屬性值設置爲password 的input元素用於輸入密碼
password型input 元素可用的額外屬性
| 屬性 | 說明 | 是否HTML5新增 |
|---|---|---|
| maxlength | 設定用戶可以在密碼框中輸入的字符的最大數目，詳見1.1節 | 否 |
| pattern | 指定一個用於輸入驗證的正則表達式，詳見第14章 | 是 |
| palceholder | 指定關於所需數據類型的提示，詳見1.2節 | 是 |
| readonly | 將密碼框設爲只讀以阻止用戶編輯其中的內容，詳見1.4節 | 否 |
| required | 表明用戶必須輸入一個值，否則無法通過輸入驗證，詳見第14章 | 是 |
| size | 通過指定密碼框中可見的字符數目設定其寬度，詳見1.1節 | 否 |
| value | 設置初始密碼值 | 否 |
例子：
<input type="password" placeholder="Min 6 characters"
id="password" name="password"/>3 用input 元素生成按鈕
將input元素的type屬性設置爲submit 、reset和button會生成類似button元素
- submit：生成用來提交表單的按鈕
- reset：生成用來重置表單的按鈕
- button：生成不執行任何操作的按鈕
<input type="submit" value="Submit Vote"/>
<input type="reset" value="Reset Form"/>
<input type="button" value="My Button"!>4 用input 元素爲輸入數據把關
用千輸入受限數據的input元素的type屬性值
| 屬性 | 說明 | 是否HTML5新增 |
|---|---|---|
| checkbox | 將輸入限制爲在一個“是/否” 二態複選框中進行選擇 | 否 |
| color | 只能輸入顏色信息 | 是 |
| date | 只能輸入日期 | 是 |
| datetime | 只能輸入帶時區信息的世界時（包括日期和時間） | 是 |
| datetime-local | 只能輸入不帶時區信息的世界時（包括日期和時間） | 是 |
| 只能輸入規範的電子郵箱地址 | 是 | |
| month | 只能輸入年和月 | 是 |
| number | 只能輸入整數或浮點數 | 是 |
| radiobutton | 將輸入限制爲在一組固定選項中進行選擇 | 否 |
| range | 只能輸入指定範圍內的數值 | 是 |
| tel | 只能輸入規範的電話號碼 | 是 |
| time | 只能輸入時間信息 | 是 |
| week | 只能輸人年及星期信息 | 是 |
| url | 只能輸入完全限定的URL | 是 |
4.1 用input元素獲取數值
type屬性設置爲number的input元素生成的輸入框只接受數值
number型input元素可用的額外屬性
| 屬性 | 說明 | 是否HTML5新增 |
|---|---|---|
| list | 指定爲文本框提供建議值的datalist元素。其值爲datalist元素的id值。datalist元素的介紹詳見1.3節 | 是 |
| min | 設定可接受的最小值（也是下調按鈕（如果有的話）的下限）以便進行輸入驗證。輸入驗證的介紹詳見第14章 | 是 |
| max | 設定可接受的最大值（也是上調按鈕（如果有的話）的上限）以便進行輸人驗證。輸入驗證的介紹詳見第14章 | 是 |
| readonly | 用來將文本框設置爲只讀以阻止用戶編輯其內容。詳見1.4節 | 否 |
| required | 表明用戶必須輸入一個值，否則無法通過輸入驗證。詳見第14章 | 是 |
| step | 指定上下調節數值的步長 | 是 |
| value | 指定元素的初始值 | 否 |
例子：
<!--min 、max 、step和value屬性值可以是整數或小數-->
<input type="number" step="1" min="O" max="100"
value="1" id="price" name="price"/> 4.2 用input元素獲取指定範圍內的數值
使用range型input元素，能從事先規定的範圍內選擇一個數值，range型input元素支持的屬性與number型相同
<input type="range" step="1" min="0" max="100"
value="1" id="price" name="price"/>4.3 用input 元素獲取布爾型輸入
checkbox型input元素會生成供用戶選擇是或否的複選框。
checkbox型input元素可用的額外屬性
| 屬性 | 說明 | 是否HTML5新增 |
|---|---|---|
| checked | 設置了該屬性的複選框剛顯示出來時或重置表單後呈勾選狀態 | 否 |
| required | 表示用戶必須勾選該複選框，否則無法通過輸入驗證。詳見第14章 | 是 |
| value | 設定在複選框呈勾選狀態時提交給服務器的數據值。默認爲on | 否 |
<input type="checkbox" id="veggie" name="veggie"/>只有處於勾選狀態的複選框的數據值會發送給服務器。
4.4 用input元素生成一組固定選項
radio型input元素可以用來生成一組單選按鈕，供用戶從一批固定的選項中作出選擇
radio型input元素可用的額外屬性同checkbox型一樣
<!--radio它們的name屬性都設置爲一樣，這樣一來，選擇其中任何一個按鈕都會取消對另外兩個按鈕的選擇
value屬性值，提交表單時選定按鈕的這個值會被髮送給服務器-->
<label for="apples">
<input type="radio" checked value="Apples" id="apples"
name="fave" />
Apples
</label>
<label for="oranges">
<input type="radio" value="Oranges" id="oranges" name="fave" />
Oranges
</label>
<label for="cherries">
<input type="radio" value="Cherries" id="cherries" name="fave" />
Cherries
</label>4.5 用input元素獲取有規定格式的字符串
type屬性設置爲email 、tel和url的input元素能接受的輸入數據分別爲有效的電子郵箱地址、電話號碼和URL。
email型、tel型和url型input元素可用的額外屬性
| 屬性 | 說明 | 是否HTML5新增 |
|---|---|---|
| list | 指定爲文本框提供建議值的datalist元素，其值爲datalist元素的id值，詳見1.3節 | 是 |
| maxlength | 設定用戶能夠在文本框中輸入的字符的最大數目，詳見1.1節 | 否 |
| pattern | 指定一個用於輸入驗證的正則表達式，詳見第14章 | 是 |
| placeholder | 指定關於所需數據類型的提示， 詳見1.2節 | 是 |
| readonly | 用來將文本框設爲只讀以阻止用戶編輯其內容 | 否 |
| required | 表示用戶必須提供一個值，否則無法通過輸人驗證，詳見第14章 | 是 |
| size | 通過指定文本框中可見的字符數目設定其寬度，詳見1.1節 | 否 |
| value | 指定元素的初始值，詳見1.2節。對於email型input元素，其值可能是單個郵箱地址，也可能是以逗號分隔的多個郵箱地址 | 否 |
| multiple | email支持，設置後可以接受多個電子郵箱地址 | 是 |
例子：
<p>
<label for="email">
Email: <input type="email" placeholder="[email protected]"
id="email" name="email" />
</label>
</p>
<p>
<label for="tel">
Tel: <input type="tel" placeholder="(XXX)-XXX-XXXX"
id="tel" name="tel" />
</label>
</p>
<p>
<label for="url">
Your homepage: <input type="url" id="url" name="url" />
</label>
</p>4.6 用input 元素獲取時間和日期
用來獲取時間和日期的input元素類型
| type屬性值 | 說明 | 示例 |
|---|---|---|
| datetime | 獲取世界時日期和時間，包括時區信息 | 2011-07-19T16:49:39.491Z |
| datetime-local | 獲取本地日期和時間（ 不含時區信息） | 2011-07-19T16:49:39.491 |
| date | 獲取本地日期（不含時間和時區信息） | 2011-07-20 |
| month | 獲取年月信息（不含日、時間和時區信息） | 2011-08 |
| time | 獲取時間 | 17:49:44.746 |
| week | 獲取當前星期 | 2011-W30 |
用於輸入日期和時間的input元素可用的額外屬性
| 屬性 | 說明 | 是否HTML5新增 |
|---|---|---|
| list | 指定爲文本框提供建議值的datalist元素。其值爲datalist元素的id值。datalist元素的介紹詳見1.3節 | 是 |
| min | 設定可接受的最小值（也是下調按鈕（如果有的話）的下限）以便進行輸入驗證。輸入驗證的介紹詳見第14章 | 是 |
| max | 設定可接受的最大值（也是上調按鈕（如果有的話）的上限）以便進行輸人驗證。輸入驗證的介紹詳見第14章 | 是 |
| readonly | 用來將文本框設置爲只讀以阻止用戶編輯其內容。詳見1.4節 | 否 |
| required | 表明用戶必須輸入一個值，否則無法通過輸入驗證。詳見第14章 | 是 |
| step | 指定上下調節數值的步長 | 是 |
| value | 指定元素的初始值 | 否 |
例子：
<input type="date" id="lastbuy" name="lastbuy"/>4.7 用input元素獲取顏色值
color型input元素只能用來選擇顏色。
顏色值以7個字符的格式表示： 以＃開頭，接下來是三個兩位十六進制數，它們分別代表紅、綠、藍三種原色的值
<input type="color" id="color" name="color"/>5 用input 元素獲取搜索用詞
search型input元素會生成一個單行文本框，供用戶輸入搜索用詞，只有樣式的改變而沒有實際作用
<input type="search" id="search" name="search"/>6 用input 元素生成隱藏的數據項
hidden型input元素可以使一些用戶看不到或不能編輯的數據項，在提交表單時也能將其發送給服務器。
<input type="hidden" name="recordID" value="1234"/>7 用input 元素生成圖像按鈕和分區響應圖
image型input元素生成的按鈕顯示爲一幅圖像，點擊它可以提交表單
image型input元素可用的額外屬性
| 屬性 | 說明 | 是否HTML5新增 |
|---|---|---|
| alt | 提供元素的說明文字。對需要藉助殘障輔助技術的用戶很有用 | 否 |
| formaction | 等價於button元素的同名屬性， 參見第12章 | 是 |
| formenctype | 等價於button元素的同名屬性， 參見第12章 | 是 |
| formmethod | 等價於button元素的同名屬性， 參見第12章 | 是 |
| formtarget | 等價於button元素的同名屬性， 參見第12章 | 是 |
| formnovaidate | 等價於button元素的同名屬性， 參見第12章 | 是 |
| height | 以像素爲單位設置圖像的高度（不設置這個屬性的話圖像將以其本身的高度顯示） | 否 |
| src | 指定要顯示的圖像的URL | 否 |
| width | 以像素爲單位設置圖像的寬度（不設置這個屬性的話圖像將以其本身的寬度顯示） | 否 |
例子：
<input type="image" src="accept.png" name="submit"/>點擊圖像按鈕會導致瀏覽器提交表單。在發送的數據中包括來自那個image型input元素的兩個數據項，它們分別代表用戶點擊位置相對於圖像左上角的x座標和y座標。
8 用input 元素上傳文件
file型，它可以在提交表單時將文件上傳到服務器
file型input元素可用的額外屬性
| 屬性 | 說明 | 是否HTML5新增 |
|---|---|---|
| accept | 指定接受的MIME類型 | 否 |
| multiple | 設置這個屬性的input元素可一次上傳多個文件 | 是 |
| required | 表明用戶必須爲其提供一個值，否則無法通過輸入驗證。詳見第14章 | 是 |
例子：
<!--爲multi part/form-data 的時候才能上傳文件-->
<form enctype="multipart/form-data">
<input type="file" name="filedata" />
</form>