單行文本輸入框
type為text表示input元素為一個單行文本框，是input元素的預設表現形式。單行文本輸入框支援下面的屬性設定。
A:設定元素大小
maxlength屬性設定使用者能夠輸入的字元的最大數目；size屬性設定了文本框能夠顯示的字元數目。
<form method="post" action="http://www.cnblogs.com/89526cyh/">
<p><label for="name">Name: <input maxlenth="10" id="name" name="name"/></label></p>
<p><label for="city">City: <input size="10" id="city" name="city"/></label></p>
<p><label for="fave">Fruit: <input size="10" maxlenth="10" id="fave" name="fave"/></label></p>
<button type="submit">Submit Vote</button>
</form>
B:設定初始值和占位式提示
value屬性可以為輸入框指定一個預設值；placeholder屬性可以設定一段提示文字，告訴使用者應該輸入什麼類型的資料
<form method="post" action="http://www.cnblogs.com/89526cyh/">
<p><label for="name">Name: <input placeholder="Your name" id="name" name="name"/></label></p>
<p><label for="city">City: <input placeholder="Where you live" id="city" name="city"/></label></p>
<p><label for="fave">Fruit: <input value="Apple" id="fave" name="fave"/></label></p>
<button type="submit">Submit Vote</button>
</form>
注：用button元素重置表單時，浏覽器會恢複文本框中的占位式提示和預設值。
在chrome中的效果如下：
C:使用資料清單
list屬性可以設定為一個datalist元素的id屬性值，這樣使用者就可以在datalist元素指定的清單中進行選擇。datalist元素是HTML5中新增的，用來提供一批值，幫助使用者輸入需要的資料。
<p><label for="fave">Fruit: <input list="fruitlist" id="fave" name="fave"/></label></p>
</form>
<datalist id="fruitlist">
<option value="Apples" label="Lovely Apples"/>
<option value="Oranges">Refreshing Oranges</option>
<option value="Cherries"/>
</datalist>
datalist元素中的每一個option都代表一個使用者可選擇的值
D:生成隻讀或被禁用的文本框
readonly屬性表示文本框隻讀，disabled屬性表示不可編輯，在外觀表現上有差異。
<form method="post" action="http://titan:8080/form">
<p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
<p><label for="city">City: <input value="Boston" readonly id="city" name="city"/></label></p>
注：設定了disabled屬性的表單被設定為灰色，使用者不能編輯其中的文字，且該表單的内容不會被送出到伺服器；而設定了readonly屬性的表單會阻止使用者編輯文本框中的内容，但不影響外觀，且内容會發給伺服器。
E:密碼輸入框
type屬性值為password的input元素用于輸入密碼。該屬性的input元素支援以下屬性：
1）maxlength：使用者可以在密碼框中輸入的字元的最大數目；
2）pattern：用于輸入驗證的正規表達式；
3）placeholder：關于所需資料類型的提示；
4）readonly：設定密碼框為隻讀；
5）required：使用者必須輸入一個值，否則無法通過輸入驗證；
6）size：通過指定密碼框中可見的字元數目設定其寬度；
7）value：設定初始密碼值。
<p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
<button type="submit">Submit Vote</button>
注：使用者輸入的字元在密碼框中顯示為"*"，但需要注意，在送出表單時，伺服器收到的是明文密碼，對于安全至關重要的網站和應用系統，應該考慮使用SSL/HTTPS對浏覽器和伺服器之間的通信内容加密。
F:按鈕
type屬性設定為
1）submit：表示按鈕的用途是送出表單（預設）；
2）reset：表示按鈕的用途是重設表單；
3）button：表示按鈕沒有具體語義。
1）submit：生成送出表單的按鈕，支援屬性：formaction、formenctype、formmethod、formtarget和formnovalidate，這些屬性和button元素的同名屬性用法相同，參考這裡；
2）reset：生成重設表單的按鈕；
3）button：生成普通按鈕，無任何操作。
3中按鈕的說明文字都通過value屬性指定。
有三種類型的button，通過button的type屬性設定：
将button的type屬性設定為submit（預設行為），按下按鈕就會送出包含它的表單，采用這種方式時，還可以設定一下的一些屬性：
1）form：指定按鈕關聯的表單；
2）formaction：覆寫form元素的action屬性，另行指定表單将要送出到的URL；
3）formenctype：覆寫form元素的enctype屬性，另行指定表單的編碼方式；
4）formmethod：覆寫form元素的method屬性；
5）formtarget：覆寫form元素的target屬性；
6）formnovalidate：覆寫form元素的novalidate屬性，表明是否應執行用戶端資料有效性檢查。
這些屬性是HTML5中新增的，主要是用來覆寫或補充form元素上的設定。
<p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
<p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
<input type="submit" value="Submit Vote"/>
<input type="reset" value="Reset"/>
<input type="button" value="My Button"/>
注：用input元素生成按鈕與用button元素的不同之處在于後者可以用來顯示含标記的文字。但由于各個浏覽器對input元素的處理方式比較一緻，且有些較老的浏覽器（例如IE6）不能正确處理button元素，是以很多網站都更傾向于用input元素
J:帶限制的輸入框
type屬性為number的input元素隻接受數值。支援的屬性包括：
1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）min：設定最小值；
3）max：設定最大值；
4）readonly：隻讀；
5）required：表明使用者必須輸入一個值；
6）step：上下調節數值的步長；
7）value：指定元素的初始值。
type屬性值email、tel和url分别對應電子郵箱位址、電話号碼和URL，支援的屬性包括：
2）maxlength：輸入字元的最大數目；
3）pattern：指定用于驗證輸入的正規表達式；
4）placeholder：指定關于所需資料類型的提示；
5）readonly：表示文本框隻讀；
6）required：表明使用者必須輸入一個值；
7）size：可見的字元數目；
8）value：指定元素的初始值。
email還支援multiple屬性，表示可以接受多個電子郵箱位址。
<p><label for="price">$ per unit in your area: <input type="number" step="1" min="0" max="100" value="1" id="price" name="price"/></label></p>
<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>
H:範圍選擇器
使用type屬性為range的input元素，使用者隻能用它從事先規定的範圍内選擇一個數值，該類型的input元素支援的屬性與number相同。
i:時間和日期輸入框
HTML5中新增了一些輸入日期和時間的類型，包括：
1）datetime：擷取世界時日期和時間，包括時區資訊；
2）datetime-local：擷取本地日期和時間，不包含時區資訊；
3）date：擷取本地日期，不含時間和時區資訊；
4）month：擷取年月資訊，不含日、時間和時區資訊；
5）time：擷取時間；
6）week：擷取目前星期。
日期和時間的input元素支援的額外屬性包括：
<form method="post" action="http://titan:8080/form">
<p><label for="lastbuy">When did you last buy: <input type="date" id="lastbuy" name="lastbuy"/></label></p>
注：目前日期和時間輸入框在大部分浏覽器中支援都不好，是以，最好還是使用主流JavaScript庫提供的月曆選擇工具
在chrome中的效果如下：（IE不支援）
G:顔色輸入框
type屬性為color表示顔色選擇器，顔色值以7個字元的格式表示：以#開頭，接下來是三個兩位十六進制數，分别代表紅、綠、藍三種原色的值，如#FF1234
<p><label for="color">Color: <input type="color" id="color" name="color"/></label></p>
注意大多數浏覽器都還沒有為這種input元素提供特别的支援。
K:被隐藏的輸入框
hidden型的input元素可以用來隐藏一個資料項，并在送出表單時将其發送給伺服器（通常是為了利用到這個功能）。
<input type="hidden" name="recordID" value="1234"/>
L:圖像按鈕
image型的input元素生成的按鈕顯示為一個圖示，點選後送出表單。支援的屬性包括：
1）alt：提供元素的說明文字，對需要借助殘障輔助技術的使用者很有用；
2）formaction：同button元素；
3）formenctype：同button元素；
4）formmethod：同button元素；
5）formtarget：同button元素；
6）formnovalidate：同button元素；
7）height：以像素為機關設定圖像的高度；
8）src：指定要顯示的圖像的URL；
9）width：以像素為機關設定圖像的寬度；
<input type="hidden" name="recordID" value="1234"/>
<input type="image" src="accept.png" name="submit"/>
注：點選圖像按鈕将送出表單，在送出的資料中會包含點選位置的坐标資訊，是以可以讓圖像中的不同區域代表不同的操作，然後根據使用者在圖像上的點選位置做出相應的反應。
M:上傳檔案按鈕
file型的input元素用于上傳檔案，可以在送出表單時将檔案上傳到伺服器。支援的屬性包括：
1）accept：指定接受的MIME類型。MIME類型的定義，參考RFC 2046（http://tools.ietf.org/html/rfc2046）；
2）multiple：設定該屬性可以一次上傳多個檔案；
3）required：使用者必須輸入一個值。
<form method="post" action="http://titan:8080/form" enctype="multipart/form-data">
<p><input type="file" name="filedata"/></p>
注意:表單編碼類型為multipart/form-data的時候才能上傳檔案。
N:選項清單
selet元素用來生成一個選項清單，比radiiobutton型的input元素更緊湊，更适合選項較多的情形。該元素支援的屬性包括：
1）name：清單的名稱；
2）disabled：禁用該下拉清單；
3）form：文本區域所屬的一個或多個表單；
4）autofocus：在頁面加載後文本區域自動獲得焦點；
5）required：必填；
6）size：下拉清單中可見選項的數目；
7）multiple：可選擇多個選項。
單選下拉清單
select元素預設即為一個單選下拉清單
<p><label for="fave">
Favorite Fruit:
<select id="fave" name="fave">
<option valu="apples" selected label="Apples">Apples</option>
<option valu="oranges" label="Oranges">Oranges</option>
<option valu="cherries" label="Cherries">Cherries</option>
<option valu="pears" label="Pears">Pears</option>
</select>
</label></p>
複選框
為清單設定size屬性和multiple屬性後，就成為一個複選框。
<form method="post" action="http://titan:8080/form" enctype="multipart/form-data">
<select id="fave" name="fave" size="5" multiple>
在點選選項時按住Ctrl鍵，就可以選擇多個選項。
在chrome中效果如下：
帶結構的清單
optgroup元素可以用來在select元素的内容中建立一定的結構，該元素支援的屬性包括：
1）label：用來為整組選項提供一個小标題；
2）disabled：灰化選擇組内的任何選項。
在Chrome中的效果如下：
多行輸入框
textarea元素生成的是多行文本框，使用者可以在裡面輸入多行文字。包含的屬性包括：
1）autofocus：在頁面加載後文本區域自動獲得焦點；
2）cols：文本區内的可見寬度，整型；
3）disabled：禁用該文本區；
4）form：文本區所屬的一個或多個表單；
5）maxlength：文本區的最大字元數；
6）name：文本區的名稱；
7）placeholder：文本區域預期值的簡短提示；
8）readonly：文本區為隻讀；
9）required：文本區是必填的；
10）rows：文本區的可見行數，整型；
11）wrap：文本區的文本如何換行，包括：soft（預設），在表單送出時，文本區中的文本不換行；hard，在表單送出時，文本區中的文本換行（包含換行符），當使用該值時，必須規定cols屬性。
<optgroup label="Top Choices">
<option valu="apples" selected label="Apples">Apples</option>
<option valu="oranges" label="Oranges">Oranges</option>
</optgroup>
<optgroup label="Others">
<option valu="cherries" label="Cherries">Cherries</option>
<option valu="pears" label="Pears">Pears</option>
<p><textarea cols="20" rows="5" wrap="hard" id="story" name="story">Tell us why this is your favorite fruit</textarea></p>
<input type="submit" value="Submit Vote"/>
結果展示區域
output元素表示計算的結果。支援的屬性包括：
1）for：輸出域相關的一個或多個元素，中間用空格分隔；
2）form：輸入字段所屬的一個或多個表單；
3）name：對象的唯一名稱（表單送出時使用）。
<form onsubmit="return false" oninput="res.value = quant.valueAsNumber * price.valueAsNumber">
<fieldset>
<legend>Price Calculator</legend>
<input type="number" placeholder="Quantity" id="quant" name="quant"/>
<input type="number" placeholder="Price" id="price" name="price"/> =
<output for="quant name" name="res"/>
</fieldset>
上面使用了JavaScript的時間系統生成了一個簡單的電腦。
在Chrome中的效果如下：（IE不支援）