HTML5按鈕元素新屬性formaction,formenctype等簡介 （轉載）

1、<button>等元素新增HTML5屬性 – form

在過去，表單元素<form>和表單提交須要的一些控件元素（如<input>，<select>）在DOM結構上必須是父子關係，可是在HTML5背景下，表單元素和控件元素能夠是在頁面文檔的任何位置，這種特性的實現就是經過使用form屬性。

關於HTML5新增的form屬性，我在六年前就介紹過，不過那篇文章是使用<textarea>元素示意的。

您能夠狠狠地點擊這裏：textarea示意form屬性demo

這個demo頁面的關鍵HTML代碼以下示意：

<form id="contact_form" >...</form>
評論：<textarea id="comments" name="comment" form="contact_form"></textarea>

<textarea>元素在<form>元素的外面，而不是祖先和後代的關係，可是，當咱們在表單裏面填寫數據並提交的時候，會發現<textarea>控件中的數據一塊兒提交了。

若是form屬性做用在按鈕上，尤爲是帶有submit性質的表單提交按鈕，則最終的行爲表現是可能就是提交另一個<form>表單。

實例說話，您能夠狠狠地點擊這裏：button按鈕的form提交別的表單demo

頁面上有兩個表單元素，提交按鈕在第二個表單元素裏面，相關HTML代碼以下：

<form id="form1">
    表單序號：<input name="formIndex" value="1" readonly>
</form>
<form id="form2">
    表單序號：<input name="formIndex" value="2" readonly>
    <input type="submit" value="提交" form="form1">
</form>

結果，點擊提交按鈕，提交的是第一個表單，以下圖：

此時提交按鈕儼然變成了一個「間諜」。

2、<button>元素新增HTML5屬性 – formaction

formaction屬性只能做用於具備提交性質的按鈕（type='submit'/'image'）上，做用和名稱同樣，若是經過當前按鈕提交表單，在表單提交地址會使用formaction屬性值而不是form元素的action屬性值。

舉個簡單的例子，續用上面的案例：

<form id="form1">
    表單序號：<input name="formIndex" value="1" readonly>
</form>
<form id="form2">
    表單序號：<input name="formIndex" value="2" readonly>
    <input type="submit" value="提交" form="form1" formaction="blank.html">
</form>

結果，點擊提交按鈕後，去往的不是的當前頁了，而是名爲blank.html的頁面，在本演示中是一個空白示意頁面，效果以下圖：

眼見爲實，您能夠狠狠的點擊這裏：button按鈕formaction屬性重置表單action demo

若是當前表單不是經過提交按鈕提交？
表單提交，不必定老是經過點擊提交按鈕，還能夠是輸入框回車觸發，亦或者是JS form.submit()，若是是這類提交，那formaction屬性還有效嗎？

以下測試代碼：

<form>
    表單序號：<input name="formIndex" value="1">（回車試試）
    input type="button" onClick="this.parentElement.parentElement.submit()" value="JS觸發">
    input type="submit" value="提交" formaction="blank.html">
</form>

測試結果以下：

1. 表單回車提交的時候，formaction生效。這個比較好理解，一個表單，要想支持回車事件，須要加入一個submit性質的提交按鈕就能夠，其做用本質上就是回車的時候點擊了提交按鈕（若是在按鈕上設置onClick="alert(0)"，回車時候會有彈出，能夠證實這一點）。
2. 若是是JS submit()方法觸發的提交，則formaction沒有對錶單提交的action進行重置，測試頁面表現爲提交到當前頁面。

眼見爲實，您能夠狠狠的點擊這裏：有formaction但表單非按鈕提交測試demo

藉助formaction屬性能夠實現一個表單內的兩個按鈕分別提交到不一樣地址的效果。

3、<button>元素新增HTML5屬性 – formenctype

formenctype屬性只能做用於具備提交性質的按鈕（type='submit'/'image'）上，做用和名稱同樣，若是經過當前按鈕提交表單，在表單提交地址會使用formenctype屬性值而不是form元素的enctype屬性值。

form元素的enctype屬性能夠指定提交數據的編碼方式。

• 默認爲application/x-www-form-urlencoded，能夠理解爲以url格式化規則格式化（%開頭那些）的字符串數據；

• 能夠設置爲multipart/form-data，這是HTML5新增編碼方式，能夠理解爲全部表單提交數據以二進制形式傳輸，因而咱們能夠Ajax直接上傳圖片等文件信息。一般當有type="file"類型的<input>文件選擇框的時候才使用。

• 還能夠是text/plain，表示純文本，這個我本身目前並未使用過，套路不詳。

因爲formenctype屬性值不太好測試，所以，就不show demo了。

4、<button>元素新增HTML5屬性 – formmethod

相似的，formmethod屬性只能做用於具備提交性質的按鈕（type='submit'/'image'）上，能夠覆蓋目標<form>元素的method屬性值（默認爲get），例如：

<form id="form1">
    表單序號：<input name="formIndex" value="1" readonly>
</form>
<form id="form2">
    表單序號：<input name="formIndex" value="2" readonly>
    <input type="submit" value="提交" form="form1" formmethod="post">
</form>

此時，點擊提交按鈕就是POST表單，URL地址後面沒有出現查詢字符信息，以下截圖：

如有興趣，能夠親自點擊感覺下，您能夠狠狠的點擊這裏：button按鈕formmethod屬性重置demo

5、<button>元素新增HTML5屬性 – formnovalidate

formnovalidate是一個布爾屬性值，只能做用於具備提交性質的按鈕（type='submit'/'image'）上，能夠經過此按鈕提交的表單不進行原生的數據驗證，重置的是<form>元素的novalidate屬性。

6、<button>元素新增HTML5屬性 – formtarget

相似的，formtarget屬性只能做用於具備提交性質的按鈕（type='submit'/'image'）上，能夠覆蓋目標<form>元素的target屬性值（默認爲_self），例如：

<form>
    表單序號：<input name="formIndex" value="1" readonly>
    <input type="submit" value="提交" formaction="blank.html" formtarget="_blank">
</form>

此時，blank.html就在瀏覽器的新窗口打開啦！

您能夠狠狠地點擊這裏：button按鈕formtarget屬性重置表單target demo

點擊這裏的按鈕感覺下吧~

屬性值
formtarget支持的屬性值和表單元素的target屬性如出一轍：

• _self：提交於當前瀏覽器上下文。默認值（若是不設置）。
• _blank：提交於新的未命名的瀏覽器上下文，在瀏覽器中的表現就是新開標籤頁。
• _parent：提交於父的瀏覽器上下文，常見於iframe中，若是沒有父級瀏覽器上下文，則效果等同於_self。
• _top：提交於頂級瀏覽器上下文（最祖先的瀏覽器上下文）。若是沒有，則行爲表現等同於_self。

以上~

7、猝不及防結束語

本文介紹的formaction，formtarget等屬性實用價值在於，能夠對JS觸發的表單提交和點擊回車觸發的表單提交自然區分處理；以及實現同一個表單內控件元素的不一樣行爲處理。

舉個例子：
建立一條新數據域修改一條數據，用戶須要輸入的內容幾乎都是如出一轍的，這意味新建的表單和修改的表單其實能夠共用的，但其中必然仍是有一些差別的，舉個例子，新增數據的表單action地址多是add.php，而修改的多是edit.php。之前咱們作法多是根據場景不一樣使用JS去修改<form>元素的action，同時改變提交按鈕，而如今少了一步，只須要控制提交按鈕的顯隱就能夠了：

<form action="add.php">
  <input type="submit" value="新建">
  <input type="submit" value="修改" formaction="edit.php">
</form>

除了實現更精簡，最大的好處是更加語義化了。

用得少見得少不表明沒有用，挖掘其潛力，發揮其價值，省時省力效果好。在CSS和HTML領域有不少不顯山露水，但特殊場景很是好用的特性。雖然這些特性一般都有替代方案（雖然稍微囉嗦了點），好像不掌握也沒什麼事，加上不是常用，學習了不能當即產能，所以很天然以爲有這個閒工夫，還不如去學學一些比較流行高大上的東西。

學習不必定有大用處的基礎知識，和學習流行的上層收益迅速的事物其實是兩種不一樣的投資，一種是低風險長期高收益的長期投資，一種是高風險短時間收益高的短時間投資。比較建議的投資比例是前8後2，但，但現實世界並非這樣子的，有太多太多人，在行情很是好的時候，不惜下槓桿去風險比較高的股市，正如如今前端形勢比較好的時候，所有精力都用來學習各類工具和框架使用，站在將來的角度看，這實際上是風險至關高的一件事情。

若是再進一步深刻分析，或許就涉及到安全感的問題。例如本文的這些基礎知識，因爲不肯定性，假設我花了1個時間去了解，結果以後2年作項目都沒有遇到適合使用這些屬性的場景，那個人時間和精力豈不是白白的浪費掉了，很容易安全感缺失。可是若是我去學習Vue之類的框架，簡歷好看了，工做好找了，付出肯定有收益，肯定性效應讓人老是樂於作這樣的事情。

因此，雖然我屢次在各個場合強調基礎知識的重要性，可是人性自己的特色使得絕大多數人都沒法在這塊堅持下去，由於學習一兩個基礎知識真的是一點用都沒有，你要學習不少，至少要一兩百個，纔有足夠的覆蓋率，纔能有從量變到質變的變化。

不過，換個角度想，這樣其實也好，大浪淘沙，隨着時間的不斷推移，隨着基礎的不斷累積，之後能和本身競爭的人就愈來愈少了，厚積薄發，高屋建瓴，越老越吃香，根本不用擔憂所謂的中年危機，畢竟職業生涯40年，幾乎全部的IT從業人員纔剛開始開了個頭。