HTML5之HTML元素?cái)U(kuò)展(下)—增強(qiáng)的Form表單元素值得關(guān)注_HTML5教程
推薦：html5 canvas里繪制橢圓并保持線(xiàn)條粗細(xì)均勻的技巧Canvas里繪制橢圓是一個(gè)很常見(jiàn)的需求，但是目前大多數(shù)瀏覽器還沒(méi)有實(shí)現(xiàn)該方法，因此經(jīng)常會(huì)使用arc或者arcTo方法結(jié)合scale變形來(lái)繪制橢圓，感興趣的朋友可以了解下，希望可以幫助到你們
在HTML5增強(qiáng)的元素中，最值得關(guān)注的就是表單元素。在HTML5中，表單已經(jīng)做了重大的修整，一些以前需要通過(guò)JavaScript編碼實(shí)現(xiàn)的功能現(xiàn)在無(wú)需編碼就可輕松實(shí)現(xiàn)。在開(kāi)始討論之前，需要注意一點(diǎn)：
在HTML5中，表單控件是可以處于其所屬的一個(gè)或多個(gè)表單的外部的。所以，表單控件像fieldset，label，input這些都加入了form屬性，用于標(biāo)識(shí)表單控件所屬的表單。
在HTML5中：
1. form元素自身增加了兩個(gè)新的屬性：autocomplete和novalidate。autocomplete屬性用于啟用“下拉建議列表”功能，novalidate屬性用于關(guān)閉表單驗(yàn)證功能，這在測(cè)試時(shí)會(huì)很有用。
2. fieldset元素增加了三個(gè)新屬性：disable、name和form。disable屬性用于禁用fieldset，name屬性用于設(shè)置fieldset的名稱(chēng)，form屬性的值是fieldset所屬的一個(gè)或多個(gè)表單的ID，這個(gè)前面也說(shuō)了，當(dāng)fieldset被置于表單的外部時(shí)，你必須設(shè)置該fieldset標(biāo)簽的form屬性，這樣fieldset就可以正確地與一個(gè)或多個(gè)表單關(guān)聯(lián)起來(lái)。
3. label元素除for屬性外，只增加了form屬性。這里值得一提的是for屬性，我以前還真沒(méi)注意過(guò)。for屬性用于指定label附屬的表單控件，這樣點(diǎn)擊這個(gè)label時(shí)會(huì)讓附屬的表單控件獲得焦點(diǎn)，比如：
<form action="demo_form.asp" id="form1">
<label for="name">Click Me</label><input id="name" type="text"></input>
<input type="submit" value="Submit" />
</form>
點(diǎn)擊"Click Me"，則后面的輸入框會(huì)獲得焦點(diǎn)。
4. input元素引入了一些新的類(lèi)型與屬性，增強(qiáng)了表單的可用性。這些新的輸入類(lèi)型，用于對(duì)數(shù)據(jù)進(jìn)行組織和歸類(lèi)，非常有用，遺憾的是并沒(méi)有哪一個(gè)瀏覽器能很好的支持所有的這些類(lèi)型。
除了原來(lái)button,text,submit,checkbox,radio,select,password的類(lèi)型，HTML5加入了下列新的input類(lèi)型：
各種日期：date, datetime, datetime-local, month, week, time
電子郵件：email
數(shù)字：number
范圍：range
搜索：search
電話(huà)：tel
URL類(lèi)型：url
可以運(yùn)行下面的例子來(lái)查看不同瀏覽器的支持情況：
<form action="demo_form.asp">
Select your favorite color: <input type="color" name="favcolor" />
Birthday: <input type="date" name="bday" />
Birthday (date and time): <input type="datetime" name="bdaytime" />
Birthday (date and time): <input type="datetime-local" name="bdaytime" />
Birthday (month and year): <input type="month" name="bdaymonth" />
Select a time: <input type="time" name="usr_time" />
Select a week: <input type="week" name="week_year" />
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
Quantity(between 1 and 10): <input type="range" name="points" min="1" max="10" />
Search Google: <input type="search" name="googlesearch" />
Telephone: <input type="tel" name="usrtel" />
Add your homepage: <input type="url" name="homepage" />
E-mail: <input type="email" name="usremail" />
<input src="submitbutton.png" type="submit" />
</form>
下面這些是新增加的input屬性：
autocomplete：自動(dòng)顯示以前輸入過(guò)的信息，取值"on"或者"off"。適用于text, search, url, tel, email, password, datepickers, range, and color類(lèi)型。
autofocus：頁(yè)面加載完成后自動(dòng)獲取到焦點(diǎn)。
form：指定input所屬的form，可以是多個(gè)。
formaction：指定form提交后處理這個(gè)input的頁(yè)面(URL)或文件。
formenctype：指定form提交后數(shù)據(jù)如何編碼。
formmethod：指定發(fā)送form數(shù)據(jù)的HTTP方法，會(huì)覆蓋相應(yīng)form的HTTP方法。
formnovalidate：提交前不檢查數(shù)據(jù)的有效性。
formtarget：指定在那個(gè)地方顯示form提交后response的內(nèi)容。
height, width：輸入框長(zhǎng)和寬，只適用于image類(lèi)型。
max，min：輸入值的最大值和最小值。適用于有意義的number,range, 日期類(lèi)型。
multiple：是否允許輸入多個(gè)值，適用于email和file類(lèi)型。
pattern：指定驗(yàn)證輸入值的正則表達(dá)式，適用于text,search,url,tel,email,password。
placeholder：輸入前的提示信息，適用于text,search,url,tel,email,password。
required：是否是必填項(xiàng)，如果不填必填項(xiàng)，則表單不能提交，適用于text, search, url, tel, email, password, date pickers, number, checkbox, radio, 和file類(lèi)型。
step：輸入自動(dòng)增長(zhǎng)時(shí)的步長(zhǎng)值，適用于number, range, date, datetime, datetime-local, month, time和week類(lèi)型。
list：輸入項(xiàng)的候選列表，需要和datalist元素配合使用，list屬性可用在這些類(lèi)型上：text、search、url、tel、email、date、number、range和color，目測(cè)在FireFox上有效。看一個(gè)小例子：
<fieldset>
<legend> Favorites </legend>
<p>
<label>
<input type="text" name="favorites" list="options">
<datalist id="options">
<option value="A">
<option value="B">
<option value="C">
</datalist>
</label>
</p>
</fieldset>
下面的例子嘗試使用了各個(gè)屬性，可以運(yùn)行在不同的瀏覽器下查看實(shí)際效果：
<form action="demo_form.asp">
E-mail: <input type="email" name="email" autocomplete="on" />
Image: <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"/>
Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5" />
Select images: <input type="file" name="img" multiple="multiple" />
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" />
First Name: <input type="text" name="fname" placeholder="First name" />
Username: <input type="text" name="usrname" required="required" />
Number: <input type="number" name="points" step="3" />
<input type="submit" />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST" />
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation" />
<input type="submit" formtarget="_blank" value="Submit to a new window" />
</form>
<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
Last name: <input type="text" name="lname" form="form1" />
建議：雖然并不是所有的瀏覽器都支持全部的類(lèi)型，但是還是鼓勵(lì)大家使用這些新類(lèi)型，因?yàn)榧词篂g覽器不支持，只不過(guò)是會(huì)退化成簡(jiǎn)單的text輸入框而已。
實(shí)用參考：
W3C的教程：http://www.w3schools.com/html5/default.asp
HTML5官方指導(dǎo)：http://dev.w3.org/html5/html-author/
相當(dāng)不錯(cuò)的一個(gè)指導(dǎo)網(wǎng)站：http://html5doctor.com/
HTML5中文教程：http://www.html5china.com/
一個(gè)不錯(cuò)的前端博客：http://www.pjhome.net/default.asp?cateID=1
JS操作表單的相關(guān)知識(shí)：http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html
分享：基于Modernizr 讓網(wǎng)站進(jìn)行優(yōu)雅降級(jí)的分析如今一個(gè)網(wǎng)頁(yè)展現(xiàn)的內(nèi)容是越來(lái)越豐富，其中不乏一些HTML5、CSS3的功能特效。那么如果客戶(hù)端的瀏覽器支持HTML5。頁(yè)面訪(fǎng)問(wèn)效果很好沒(méi)有問(wèn)題。如果不支持HTML5，還是IE6,7,8等瀏覽器的時(shí)候呢？這個(gè)時(shí)候往往是作為一個(gè)前段人員非常頭痛的事情了，兼容
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀(guān)
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類(lèi)型和email類(lèi)型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5指南-2.如何操作document metadata
- html5 canvas-1.canvas介紹(hello canvas)
- html5構(gòu)建觸屏網(wǎng)站之touch事件介紹
- 免費(fèi)獲得微軟MCSD證書(shū)趕快行動(dòng)吧！
- HTML5中實(shí)現(xiàn)拖放效果無(wú)須借助javascript
- 在html5的Canvas上繪制橢圓的幾種方法總結(jié)
- HTML5之SVG 2D入門(mén)8—文檔結(jié)構(gòu)及相關(guān)元素總結(jié)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5之SVG 2D入門(mén)13—svg對(duì)決canvas及長(zhǎng)處和適用場(chǎng)景分析
- html5 canvas-2.用canvas制作一個(gè)猜字母的小游戲
- 相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索HTML5之HTML元素?cái)U(kuò)展(下)—增強(qiáng)的Form表單元素值得關(guān)注
- 教程說(shuō)明：
HTML5教程-HTML5之HTML元素?cái)U(kuò)展(下)—增強(qiáng)的Form表單元素值得關(guān)注
。