HTML5中存在多種不同的輸入框和按鈕，通過設(shè)置input元素的type屬性來實現(xiàn)，除此之外，HTML5中還支持選擇列表、多行輸入框等，這些元素都有自己的用途和屬性，下面一一介紹。
單行文本輸入框
type為text表示input元素為一個單行文本框，是input元素的默認表現(xiàn)形式。單行文本輸入框支持下面的屬性設(shè)置。
設(shè)定元素大小
maxlength屬性設(shè)定用戶能夠輸入的字符的最大數(shù)目；size屬性設(shè)定了文本框能夠顯示的字符數(shù)目。
<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>
設(shè)置初始值和占位式提示
value屬性可以為輸入框指定一個默認值；placeholder屬性可以設(shè)置一段提示文字，告訴用戶應(yīng)該輸入什么類型的數(shù)據(jù)。
<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元素重置表單時，瀏覽器會恢復(fù)文本框中的占位式提示和默認值。
使用數(shù)據(jù)列表
list屬性可以設(shè)置為一個datalist元素的id屬性值，這樣用戶就可以在datalist元素指定的列表中進行選擇。datalist元素是HTML5中新增的，用來提供一批值，幫助用戶輸入需要的數(shù)據(jù)。
<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屬性表示不可編輯，在外觀表現(xiàn)上有差異。
<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中效果如下：
設(shè)置了disabled屬性的表單被設(shè)置為灰色，用戶不能編輯其中的文字，且該表單的內(nèi)容不會被提交到服務(wù)器；而設(shè)置了readonly屬性的表單會阻止用戶編輯文本框中的內(nèi)容，但不影響外觀，且內(nèi)容會發(fā)給服務(wù)器。
密碼輸入框
type屬性值為password的input元素用于輸入密碼。該屬性的input元素支持以下屬性：
1）maxlength：用戶可以在密碼框中輸入的字符的最大數(shù)目；
2）pattern：用于輸入驗證的正則表達式；
3）placeholder：關(guān)于所需數(shù)據(jù)類型的提示；
4）readonly：設(shè)置密碼框為只讀；
5）required：用戶必須輸入一個值，否則無法通過輸入驗證；
6）size：通過指定密碼框中可見的字符數(shù)目設(shè)置其寬度；
7）value：設(shè)置初始密碼值。
<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>
用戶輸入的字符在密碼框中顯示為"*"，但需要注意，在提交表單時，服務(wù)器收到的是明文密碼，對于安全至關(guān)重要的網(wǎng)站和應(yīng)用系統(tǒng)，應(yīng)該考慮使用SSL/HTTPS對瀏覽器和服務(wù)器之間的通信內(nèi)容加密。
按鈕
type屬性設(shè)置為submit、reset和button則會生成類似button元素那樣的按鈕。
1）submit：生成提交表單的按鈕，支持屬性：formaction、formenctype、formmethod、formtarget和formnovalidate，這些屬性和button元素的同名屬性用法相同，參考這里；
2）reset：生成重設(shè)表單的按鈕；
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元素的不同之處在于后者可以用來顯示含標(biāo)記的文字。但由于各個瀏覽器對input元素的處理方式比較一致，且有些較老的瀏覽器（例如IE6）不能正確處理button元素，所以很多網(wǎng)站都更傾向于用input元素。
帶限制的輸入框
數(shù)字輸入框
type屬性為number的input元素只接受數(shù)值。支持的屬性包括：
1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）min：設(shè)置最小值；
3）max：設(shè)置最大值；
4）readonly：只讀；
5）required：表明用戶必須輸入一個值；
6）step：上下調(diào)節(jié)數(shù)值的步長；
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元素，用戶只能用它從事先規(guī)定的范圍內(nèi)選擇一個數(shù)值，該類型的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中的效果如下：
復(fù)選框
type屬性為checkbox表示復(fù)選框，支持的屬性如下：
1）checked：默認是否選擇；
2）required：表示用戶必須勾選該復(fù)選框；
3）value：設(shè)定提交給服務(wù)端的數(shù)據(jù)值，默認為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時，只有勾選了的復(fù)選框在提交表單時才會發(fā)送給服務(wù)器。
單選按鈕組
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分別對應(yīng)電子郵箱地址、電話號碼和URL，支持的屬性包括：
1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）maxlength：輸入字符的最大數(shù)目；
3）pattern：指定用于驗證輸入的正則表達式；
4）placeholder：指定關(guān)于所需數(shù)據(jù)類型的提示；
5）readonly：表示文本框只讀；
6）required：表明用戶必須輸入一個值；
7）size：可見的字符數(shù)目；
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" placeholder="user@domain.com" 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：獲取世界時日期和時間，包括時區(qū)信息；
2）datetime-local：獲取本地日期和時間，不包含時區(qū)信息；
3）date：獲取本地日期，不含時間和時區(qū)信息；
4）month：獲取年月信息，不含日、時間和時區(qū)信息；
5）time：獲取時間；
6）week：獲取當(dāng)前星期。
日期和時間的input元素支持的額外屬性包括：
1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）min：設(shè)置最小值；
3）max：設(shè)置最大值；
4）readonly：只讀；
5）required：用戶必須輸入一個值，否則無法通過輸入驗證；
6）step：上下調(diào)節(jié)數(shù)值的步長；
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個字符的格式表示：以#開頭，接下來是三個兩位十六進制數(shù)，分別代表紅、綠、藍三種原色的值，如#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中的效果如下：
注意大多數(shù)瀏覽器都還沒有為這種input元素提供特別的支持。
被隱藏的輸入框
hidden型的input元素可以用來隱藏一個數(shù)據(jù)項，并在提交表單時將其發(fā)送給服務(wù)器（通常是為了利用到這個功能）。
<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元素生成的按鈕顯示為一個圖標(biāo)，點擊后提交表單。支持的屬性包括：
1）alt：提供元素的說明文字，對需要借助殘障輔助技術(shù)的用戶很有用；
2）formaction：同button元素；
3）formenctype：同button元素；
4）formmethod：同button元素；
5）formtarget：同button元素；
6）formnovalidate：同button元素；
7）height：以像素為單位設(shè)置圖像的高度；
8）src：指定要顯示的圖像的URL；
9）width：以像素為單位設(shè)置圖像的寬度；
<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>
點擊圖像按鈕將提交表單，在提交的數(shù)據(jù)中會包含點擊位置的坐標(biāo)信息，因此可以讓圖像中的不同區(qū)域代表不同的操作，然后根據(jù)用戶在圖像上的點擊位置做出相應(yīng)的反應(yīng)。
上傳文件按鈕
file型的input元素用于上傳文件，可以在提交表單時將文件上傳到服務(wù)器。支持的屬性包括：
1）accept：指定接受的MIME類型。MIME類型的定義，參考RFC 2046（http://tools.ietf.org/html/rfc2046）；
2）multiple：設(shè)置該屬性可以一次上傳多個文件；
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：文本區(qū)域所屬的一個或多個表單；
4）autofocus：在頁面加載后文本區(qū)域自動獲得焦點；
5）required：必填；
6）size：下拉列表中可見選項的數(shù)目；
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中的效果如下：
復(fù)選框
為列表設(shè)置size屬性和multiple屬性后，就成為一個復(fù)選框。
<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中效果如下：
帶結(jié)構(gòu)的列表
optgroup元素可以用來在select元素的內(nèi)容中建立一定的結(jié)構(gòu)，該元素支持的屬性包括：
1）label：用來為整組選項提供一個小標(biāo)題；
2）disabled：灰化選擇組內(nèi)的任何選項。
<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：在頁面加載后文本區(qū)域自動獲得焦點；
2）cols：文本區(qū)內(nèi)的可見寬度，整型；
3）disabled：禁用該文本區(qū)；
4）form：文本區(qū)所屬的一個或多個表單；
5）maxlength：文本區(qū)的最大字符數(shù)；
6）name：文本區(qū)的名稱；
7）placeholder：文本區(qū)域預(yù)期值的簡短提示；
8）readonly：文本區(qū)為只讀；
9）required：文本區(qū)是必填的；
10）rows：文本區(qū)的可見行數(shù)，整型；
11）wrap：文本區(qū)的文本如何換行，包括：soft（默認），在表單提交時，文本區(qū)中的文本不換行；hard，在表單提交時，文本區(qū)中的文本換行（包含換行符），當(dāng)使用該值時，必須規(guī)定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中的效果如下：
結(jié)果展示區(qū)域
output元素表示計算的結(jié)果。支持的屬性包括：
1）for：輸出域相關(guān)的一個或多個元素，中間用空格分隔；
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的時間系統(tǒng)生成了一個簡單的計算器，在Chrome中的效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
