HTML5中存在多種不同的輸入框和按鈕，通過設置input元素的type屬性來實現，除此之外，HTML5中還支持選擇列表、多行輸入框等，這些元素都有自己的用途和屬性，下面一一介紹。
單行文本輸入框type為text表示input元素為一個單行文本框，是input元素的默認表現形式。單行文本輸入框支持下面的屬性設置。
設定元素大小maxlength屬性設定用戶能夠輸入的字符的最大數目；size屬性設定了文本框能夠顯示的字符數目。
<form method=post action=http://titan:8080/form> <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>設置初始值和占位式提示
value屬性可以為輸入框指定一個默認值；placeholder屬性可以設置一段提示文字，告訴用戶應該輸入什麼類型的數據。
<form method=post action=http://titan:8080/form> <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>
在chrome中的效果如下：
用button元素重置表單時，瀏覽器會恢復文本框中的佔位式提示和默認值。
使用數據列表list屬性可以設置為一個datalist元素的id屬性值，這樣用戶就可以在datalist元素指定的列表中進行選擇。 datalist元素是HTML5中新增的，用來提供一批值，幫助用戶輸入需要的數據。
<form method=post action=http://titan:8080/form> <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 list=fruitlist id=fave name=fave/></label></p> <button type=submit>Submit Vote</button></form><datalist id=fruitlist> <option value=Apples label=Lovely Apples/> < option value=Oranges>Refreshing Oranges</option> <option value=Cherries/></datalist>
datalist元素中的每一個option都代表一個用戶可選擇的值，在chrome中的效果如下：
生成只讀或被禁用的文本框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> <p><label for=fave>Fruit: <input value=Apple id =fave name=fave/></label></p> <button type=submit>Submit Vote</button></form>
在chrome中效果如下：
設置了disabled屬性的表單被設置為灰色，用戶不能編輯其中的文字，且該表單的內容不會被提交到服務器；而設置了readonly屬性的表單會阻止用戶編輯文本框中的內容，但不影響外觀，且內容會發給服務器。
密碼輸入框type屬性值為password的input元素用於輸入密碼。該屬性的input元素支持以下屬性：
1）maxlength：用戶可以在密碼框中輸入的字符的最大數目；
2）pattern：用於輸入驗證的正則表達式；
3）placeholder：關於所需數據類型的提示；
4）readonly：設置密碼框為只讀；
5）required：用戶必須輸入一個值，否則無法通過輸入驗證；
6）size：通過指定密碼框中可見的字符數目設置其寬度；
7）value：設置初始密碼值。
<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=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> <button type=submit>Submit Vote</button></form>
用戶輸入的字符在密碼框中顯示為*，但需要注意，在提交表單時，服務器收到的是明文密碼，對於安全至關重要的網站和應用系統，應該考慮使用SSL/HTTPS對瀏覽器和服務器之間的通信內容加密。
按鈕type屬性設置為submit、reset和button則會生成類似button元素那樣的按鈕。
1）submit：生成提交表單的按鈕，支持屬性：formaction、formenctype、formmethod、formtarget和formnovalidate，這些屬性和button元素的同名屬性用法相同，參考這裡；
2）reset：生成重設表單的按鈕；
3）button：生成普通按鈕，無任何操作。
3中按鈕的說明文字都通過value屬性指定。
<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=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/ ></form>
在chrome中的效果如下：
用input元素生成按鈕與用button元素的不同之處在於後者可以用來顯示含標記的文字。但由於各個瀏覽器對input元素的處理方式比較一致，且有些較老的瀏覽器（例如IE6）不能正確處理button元素，所以很多網站都更傾向於用input元素。
帶限制的輸入框數字輸入框type屬性為number的input元素只接受數值。支持的屬性包括：
1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）min：設置最小值；
3）max：設置最大值；
4）readonly：只讀；
5）required：表明用戶必須輸入一個值；
6）step：上下調節數值的步長；
7）value：指定元素的初始值。
<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=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> <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> <input type=submit value=Submit Vote/></form>
在chrome中的效果如下：
範圍選擇器使用type屬性為range的input元素，用戶只能用它從事先規定的範圍內選擇一個數值，該類型的input元素支持的屬性與number相同。
<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=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> <p><label for=price>$ per unit in your area: 1<input type=range step=1 min=0 max=100 value=1 id=price name=price/>100</label></p> <input type=submit value=Submit Vote/></form>
在chrome中的效果如下：
複選框type屬性為checkbox表示複選框，支持的屬性如下：
1）checked：默認是否選擇；
2）required：表示用戶必須勾選該複選框；
3）value：設定提交給服務端的數據值，默認為on。
<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=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> <p><label for=veggie>Are you vegetarian: <input type=checkbox id=veggie name=veggie/>vegetarian</label> </p> <input type=submit value=Submit Vote/></form>
在chrome中的效果如下：
注意使用checkbox時，只有勾選了的複選框在提交表單時才會發送給服務器。
單選按鈕組type屬性為radio的input元素可以用來生成一組單選按鈕，支持的屬性同checkbox。每一個radio都代表一個選項，同一組的radio使用相同的name。單選按鈕組適用於選項較少的場景。
<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=password>Password: <input type=password placeholder=Min 6 characters id=password name=password/></label></p> <p><fieldset> <legend>Vote for your favorite fruit</legend> <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> </fieldset></p> <input type=submit value=Submit Vote/></form>
在chrome中的效果如下：
限定格式輸入框type屬性值email、tel和url分別對應電子郵箱地址、電話號碼和URL，支持的屬性包括：
1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）maxlength：輸入字符的最大數目；
3）pattern：指定用於驗證輸入的正則表達式；
4）placeholder：指定關於所需數據類型的提示；
5）readonly：表示文本框只讀；
6）required：表明用戶必須輸入一個值；
7）size：可見的字符數目；
8）value：指定元素的初始值。
email還支持multiple屬性，表示可以接受多個電子郵箱地址。
<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=password>Password: <input type=password placeholder=Min 6 characters id=password name=password/></label></p> <p><label for=email>Email: <input type=email [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> <input type=submit value=Submit Vote/></form>
在chrome中的效果如下：
時間和日期輸入框HTML5中新增了一些輸入日期和時間的類型，包括：
1）datetime：獲取世界時日期和時間，包括時區信息；
2）datetime-local：獲取本地日期和時間，不包含時區信息；
3）date：獲取本地日期，不含時間和時區信息；
4）month：獲取年月信息，不含日、時間和時區信息；
5）time：獲取時間；
6）week：獲取當前星期。
日期和時間的input元素支持的額外屬性包括：
1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）min：設置最小值；
3）max：設置最大值；
4）readonly：只讀；
5）required：用戶必須輸入一個值，否則無法通過輸入驗證；
6）step：上下調節數值的步長；
7）value：指定元素的初始值。
<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=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> <p><label for=lastbuy>When did you last buy: <input type=date id=lastbuy name=lastbuy/></label ></p> <input type=submit value=Submit Vote/></form>
在chrome中的效果如下：
目前日期和時間輸入框在大部分瀏覽器中支持都不好，因此，最好還是使用主流JavaScript庫提供的日曆選擇工具。
顏色輸入框type屬性為color表示顏色選擇器，顏色值以7個字符的格式表示：以#開頭，接下來是三個兩位十六進制數，分別代表紅、綠、藍三種原色的值，如#FF1234。
<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=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> <p><label for=color>Color: <input type=color id=color name=color/></label></p > <input type=submit value=Submit Vote/></form>
在chrome中的效果如下：
注意大多數瀏覽器都還沒有為這種input元素提供特別的支持。
被隱藏的輸入框hidden型的input元素可以用來隱藏一個數據項，並在提交表單時將其發送給服務器（通常是為了利用到這個功能）。
<form method=post action=http://titan:8080/form> <input type=hidden name=recordID value=1234/> <p><label for=name>Name: <input value=Adam disabled id=name name=name/></label></p> <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/></form>圖像按鈕
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：以像素為單位設置圖像的寬度；
<form method=post action=http://titan:8080/form> <input type=hidden name=recordID value=1234/> <p><label for=name>Name: <input value=Adam disabled id=name name=name/></label></p> <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=image src=accept.png name=submit/></form >
點擊圖像按鈕將提交表單，在提交的數據中會包含點擊位置的坐標信息，因此可以讓圖像中的不同區域代表不同的操作，然後根據用戶在圖像上的點擊位置做出相應的反應。
上傳文件按鈕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><label for=name>Name: <input value=Adam disabled id=name name=name/>< /label></p> <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> <p><input type=file name=filedata/></p> <input type=submit value= Submit Vote/></form>
注意表單編碼類型為multipart/form-data的時候才能上傳文件。在chrome中的效果如下：
選項列表selet元素用來生成一個選項列表，比radiiobutton型的input元素更緊湊，更適合選項較多的情形。該元素支持的屬性包括：
1）name：列表的名稱；
2）disabled：禁用該下拉列表；
3）form：文本區域所屬的一個或多個表單；
4）autofocus：在頁面加載後文本區域自動獲得焦點；
5）required：必填；
6）size：下拉列表中可見選項的數目；
7）multiple：可選擇多個選項。
單選下拉列表select元素默認即為一個單選下拉列表
<form method=post action=http://titan:8080/form enctype=multipart/form-data> <p><label for=name>Name: <input value=Adam disabled id=name name=name/>< /label></p> <p><label for=password>Password: <input type=password placeholder=Min 6 characters id=password name=password/></label></p> <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> <input type=submit value=Submit Vote/></form>
在chrome中的效果如下：
複選框為列表設置size屬性和multiple屬性後，就成為一個複選框。
<form method=post action=http://titan:8080/form enctype=multipart/form-data> <p><label for=name>Name: <input value=Adam disabled id=name name=name/>< /label></p> <p><label for=password>Password: <input type=password placeholder=Min 6 characters id=password name=password/></label></p> <p><label for =fave> Favorite Fruit: <select id=fave name=fave size=5 multiple> <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> <input type=submit value=Submit Vote/>< /form>
在點擊選項時按住Ctrl鍵，就可以選擇多個選項。在chrome中效果如下：
帶結構的列表optgroup元素可以用來在select元素的內容中建立一定的結構，該元素支持的屬性包括：
1）label：用來為整組選項提供一個小標題；
2）disabled：灰化選擇組內的任何選項。
<form method=post action=http://titan:8080/form enctype=multipart/form-data> <p><label for=name>Name: <input value=Adam disabled id=name name=name/>< /label></p> <p><label for=password>Password: <input type=password placeholder=Min 6 characters id=password name=password/></label></p> <p><label for =fave> Favorite Fruit: <select id=fave name=fave> <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> </optgroup> </select> </label ></p> <input type=submit value=Submit Vote/></form>
在Chrome中的效果如下：
optgroup元素只起組織作用，用戶無法將其作為選項選中。
多行輸入框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屬性。
<form method=post action=http://titan:8080/form enctype=multipart/form-data> <p><label for=name>Name: <input value=Adam disabled id=name name=name/>< /label></p> <p><label for=password>Password: <input type=password placeholder=Min 6 characters id=password name=password/></label></p> <p><label for =fave> Favorite Fruit: <select id=fave name=fave> <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> </optgroup> </select> </label ></p> <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/></form>
在Chrome中的效果如下：
結果展示區域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></form>
上面使用了JavaScript的時間系統生成了一個簡單的計算器，在Chrome中的效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。