A FORM

<form id='form' action='http://a-response-url' method="post"><!--maxlength 最大值 placeholder 占位符 autofocus 自動聚焦--><input type='text' name='name' size='20' maxlength='10' placeholder='initial' autofocus /><br /><input type='text' name='phone' size='3' maxlength='3' /><input type='text' name='phone' size='3' maxlength='3' /><input type='text' name='phone' size='4' maxlength='4' /><br /><!--舊版瀏覽器會自動設置type為text--><input type='email' name='email' required /><br /><select name='fruit'><option value='a'>apple</option><option value='b' selected>banner</option><option value='c'>color fruit</option></select><br /><textarea name='textbox' rows='5' cols='20' maxlength="50">textbox with maxlength</textarea><br /><button type='reset' id="resetBtn">reset</button><button type='submit' id="subBtn">submit</button> </form>

表單的elements屬性

// 獲取表單元素 var form = document.getElementById("form");// 返回表單控件的個數 var eleNum = form.elements.length;// 返回控件中name="phone"的元素 var phone = form.elements["phone"];

自動聚焦的兼容

// autofocus var autofocusEle = form.elements[0];if (autofocusEle.autofocus !== true) {autofocusEle.focus(); }

占位符的兼容

// placeholder for ie\10 with jquery if (!("placeholder" in document.createElement("input"))) {// focus and blur$("[placeholder]").on("focus", function () {if ($(this).val() === $(this).attr("placeholder")) {$(this).val("");}}).on("blur", function () {if ($(this).val() === "") {$(this).val($(this).attr("placeholder"));$(this).css("color", "graytext")}}).blur();// when submit dont send the placeholder value$("[placeholder]").parent("form").submit(function () {$(this).find("[placeholder]").each(function () {if ($(this).val() === $(this).attr("placeholder")) {$(this).val("");}});}); }

表單的自動提交：

??? 當form中處于focus狀態時（textarea除外），并且form中有type="submit"的提交按鈕；那么回車就會觸發表單提交事件，如同單擊提交按鈕，進行表單提交。

表單提交的時候發生了什么？

??? 1、成功控件

??????? 瀏覽器并不是將所有的表單控件全部發送到服務器的，而是會查找所有的【成功控件】，只將這些成功控件的數據發送到服務端。
??????? 那么，什么是成功控件呢？簡單說，成功控件就是：每個表單的控件都應該有一個name屬性和【當前值】，在提交時，它們將以
??????? 【name=value】的形式將數據提交到服務器端，也即【action】的地址。這個算法邏輯由瀏覽器自身來處理。
???????? 對于一些特殊情況，成功控件還有以下規定：
??????? a.控件不能是禁用狀態，即指定【disabled="disabled"】的控件不是成功控件。
??????? b.對于【checkbox】來說，只有被勾選的才算是成功控件。
??????? c.對于【radio button】來說，只有被勾選的才算是成功控件。
??????? d.對于【select】控件來說，只有被勾選的項才算是成功控件，name是select標簽的屬性。
??????? e.對于【file】上傳文件控件來說，如果它包含了選擇文件，那么它將是成功控件。??

? ? 2、提交方式

? ? ? ? 如果是【post】，那么表單數據將放在請求體中被發送出去。

??????? 如果是【get】，那么表單數據將會追加到查詢字符串中，以查詢字符串的形式提交到服務端。

??????? 表單通常還是以post方式提交比較好，這樣可以不破壞url，況且url還有長度限制及一些安全性問題。

??? 3、數據編碼

??????? 控件輸入的內容并不是直接發送的，而是經過一種編碼規則來處理的。目前基本上只會使用兩種編碼規則：application/x-www-form-urlencoded 和 multipart/form-data

??????? 這兩個規則的使用場景簡單說就是：后者在上傳文件時使用，其他情形則默認使用前者。

??????? 使用地點：<form action="" method="" enctype="multipart/form-data"> ? ?=>上傳文件

??? 4、瀏覽器提交表單時的四個階段

??????? a.識別所有的成功控件

??????? b.為所有的成功控件創建一個數據集合，它們包含【control-name/current-value】這樣的鍵值對。

??????? c.按照【form.enctype】指定的編碼規則對前面準備好的數據進行編碼。編碼規則放在請求中，用content-type指出。

??????? d.提交編碼后的數據。

　注：表單的直接提交

// 此方式將直接觸發表單的提交行為而不做任何驗證 // 所以在表單驗證后可直接觸發此事件，直接提交表單 // （html 中不能出現id=submit的元素，否則會產生混亂！） document.getElementById("form").submit();

?

關于AJAX提交表單

// ajax提交表單提供了更好的可控性，示例應用了jquery $("#form").on("submit", function (e) {// 阻止瀏覽器的默認提交行為 e.preventDefault();$.ajax({type: "post",url: $(this).attr("action"),data: $(this).serialize(), // 模擬瀏覽器的成功控件刷選邏輯，搜羅鍵值對 （注意：name屬性相同時會同時發送！這是checkbox的邏輯）
// "name=%EF%BF%A5dd&phone=aa&phone=bb&phone=cc&email=kui_002%40126.com&fruit=b&textbox=textbox+with+maxlen%0D%0Agth"error: function () {},success: function (res) {}}) });

?

轉載于:https://www.cnblogs.com/xiankui/p/3771046.html

總結

以上是生活随笔為你收集整理的JavaScript高级程序设计之表单基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。