霸氣側漏的HTML5--之--強大的form表單

標籤：alt   mail   博文   ble   代碼   效果   bsp   data   blog   

今天學習了一下html5,發現他真的太強大了，暫不說新增的畫布，通訊，本機存放區等的炸天功能，就連表單也是異常的好用。忍不住發一篇部落格和大家分享一下。原諒我標題黨了。以後的html5的學習記錄博文就以“霸氣側漏的html5...”為題了。哈哈哈。

曾經html4中的表單非常easy。一個表單相應一個action。僅僅能傳一個url,要是想傳多個的話用javaScript+ajax的方式倒也能夠，只是代碼就非常羅嗦了。

並且表單驗證什麼的都要在js裡面寫，當然用前台架構的話驗證可能會非常easy，也就一句話的事情，但卻避免不了瀏覽器載入慢等等的問題。所以曾經的html4的表單實際使用的時候非常依賴js,用起來不是非常方便。

如今好了，html5告訴我們能夠不用那麼依賴js了，種種問題自己都能夠攻克了。

首先介紹一下 form表單相關的新增的屬性：

1、form屬性。

html4的表單屬性必需要寫在表單的裡面，但在html5中，屬效能夠聲明在不論什麼地方。這樣就能夠統一管理表單，想要加入的時候像加樣式表一樣方便了。使用例如以下：

<form id = "testform"><textarea form="testform"></textarea>

2、formaction和formethod屬性

這兩個新屬性實現了form表單action的多向跳轉。formaction屬性值為跳轉路徑，formmethod屬性值是get or post方式。例如以下例：

<form id = "testform" action="1.jsp" method="post"><input type = "submit" name="s1" value="v1" formaction="2.jsp">提交到s1<input type = "submit" name="s2" value="v2" formaction="3.jsp">提交到s2<input type = "submit" name="s3" value="v3" formaction="4.jsp">提交到s3<input type = "submit"></form>

3、placeholder屬性

             文字框未輸入前提示文字，屬性值為提示內容。

4、autofocus             

          輸入框自己主動擷取焦點。

<input type="text" placeholder="請輸入username" autofocus>

5、關於input添加的屬性：

input標籤添加了大量的type種類，並進行自己主動驗證。如email,url,numble,空....等

不須要在使用js自己寫提交驗證了。方便了很多，筆者最喜歡這個功能了，假設認為它給了驗證錯誤資訊

不人性化的話。也能夠自己在js中改動。大概和改UI架構中的幾乎相同。

來兩張吧:

只是現階段，html5在各大瀏覽器中的顯示效果還不是非常好，筆者測試的ie11,Firefox，chrome中，chrome的效果最好。基本都能顯示，ie11和Firefox略差，希望各大瀏覽器能儘快適應html5的所有功能啊，那絕對是前端程式猿的福音啊。

霸氣側漏的HTML5--之--強大的form表單