一、<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>

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

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

二、<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屬性可以實現一個表單內的兩個按鈕分別提交到不同地址的效果。

三、<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了。

四、<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

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

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

六、<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。

以上~

七、猝不及防結束語

本文介紹的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從業人員才剛開始開了個頭。

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