JavaScript之表單基礎知識（表單腳本）

表單的基礎知識

在HTML中，表單用<form>元素來表示，在JavaScript中，表單用HTMLFormElement來表示，HTMLFormElement繼承了HTMLElement。

獲取表單的引用

取得表單的引用有多種方式，常見的就是通過ID來獲取元素引用。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
	<title>JavaScript</title>
  </head>
  <body>
	
	<form id="form1" name="form" action="" method="get">
	<input id="input0" type="text"> <br>
	 <input id="input1" type="submit" value="提交">
	</form>
  
  <script>
      /* 在此處書寫javascript代碼 */
	  //通過ID獲取form元素
      var form1 = document.getElementById("from1");
	  
	  /*
	  通過document.forms獲取所有表單，forms[0]爲第一個表單
	  var firstForm = document.forms[0];
	  var myFrom = document.forms["form"]; //獲取頁面中名稱爲“form”的表單
	  */
  </script>
  </body>
</html>

也可以通過document.forms來獲取頁面中的所有表單。在這個集合中，通過數組索引或name值來獲取引用。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
	<title>JavaScript</title>
  </head>
  <body>
	
	<form id="form1" name="form" action="" method="get">
	<input id="input0" type="text"> <br>
	 <input id="input1" type="submit" value="提交">
	</form>
  
  <script>
      /* 在此處書寫javascript代碼 */
	  //通過ID獲取form元素
      //var form1 = document.getElementById("from1");


	  //通過document.forms獲取所有表單，forms[0]爲第一個表單
	  var firstForm = document.forms[0];
	  // var myFrom = document.forms["form"]; //獲取頁面中名稱爲“form”的表單
	  
  </script>
  </body>
</html>

注：可以同時爲表單指定ID和name。它們的值不一定相同。

提交表單

當用戶單擊提交按鈕或圖像按鈕時，就會提交表單。使用<input>或<button>都可以定義按鈕。使用<input>時，其type屬性值爲"submit"，使用圖像按鈕提交表單時，<input>的type屬性值爲"image"，src屬性值爲圖像的路徑。

當<input>的type屬性爲"submit"時，

<input id="input1" type="submit" value="提交">

當<input>的type屬性爲"image"時，

<input id="imasub" type="image" src="smile.gif">

當按鈕爲<button>時，

<button id="butt">確定</button>

在JavaScript中編程調用submit()也能提交表單，這種方法無需包含按鈕也能向服務器提交表單數據。

<body>
  
  <form id="myForm" action="php.php" method="get">
    姓名：<input type="text" name="name" size="20"><br>
    <input type="button" οnclick="formSubmit()" value="提交">
  </form>
  
<script>
   
   function formSubmit() {
       var myForm = document.querySelector("#myForm");
       myForm.submit();
   }
 
</script>
</body>

這種方法與用戶單擊submit按鈕一樣可以提交表單，但是使用這種方法，表單的onsubmit事件處理程序不會被調用。

阻止submit事件，取消表單提交

點擊提交按鈕，瀏覽器會在將請求發送給服務器之前觸發submit事件，這樣就有機會驗證表單數據，阻止表單這個事件的方法（即點擊按鈕提交表單），可以使用preventDefault方法。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
	<title>JavaScript</title>
  </head>
  <body>
	
	<form id="form1" name="form" action="" method="get">
	<input id="input0" type="text"> <br>
	 <input id="input1" type="submit" value="提交">	 
	</form>
  
  <script>
      /* 在此處書寫javascript代碼 */
	  //通過ID獲取input元素
      var input1 = document.getElementById("input1");

	  //通過document.forms獲取所有表單，forms[0]爲第一個表單
	  //var firstForm = document.forms[0];
	  // var myFrom = document.forms["form"]; //獲取頁面中名稱爲“form”的表單
	  
	  input1.onsubmit = function (event) {
	      event.preventDefault(); //阻止表單submit的默認行爲
	  };
	  
  </script>
  </body>
</html>

提交表單有個重大問題，那就是重複提交表單，如果頁面長時間沒有反應，那麼用戶可能會不耐煩，就會反覆點擊提交按鈕，這樣服務器會重複處理多次請求，或者造成錯誤，如果是在訂單，那麼可能造成訂好幾份。

解決這個問題有兩個辦法：

1、在第一次提交表單後，就禁用提交按鈕。

2、用onsubmit事件處理程序取消後續的表單提交操作。

重置表單

在用戶點擊重置按鈕時，表單數據會被重置，使用屬性type爲reset的<input>或<button>可以創建重置按鈕。

 <form id="myForm" action="php.php" method="get">
   姓名：<input type="text" name="name" size="20" value="默認初始值"><br>
   <input type="button" value="提交">
   <!-- 重置按鈕 -->      
   <input type="reset">
   <button type="reset">button重置</button>
 </form>

效果：

點擊重置按鈕，表單中的數據就會被重置。重置表單時，所有字符段都會恢復到頁面剛加載完的初始狀態，也就是未動表單之前的狀態。如果字符段初始值爲空，則重置後爲空，如果字符段初始值有默認的值，則重置後爲默認的值。

除了以上的方法重置表單外，還可以用rest()方法t來定義重置。

<body>
  
  <form id="myForm" action="php.php" method="get">
    姓名：<input type="text" name="name" size="20" value="默認初始值"><br>
    <input type="button" οnclick="formSubmit()" value="提交">
  </form>
  
<script>
   
   function formSubmit() {
       var myForm = document.querySelector("#myForm");
       //重置表單
       myForm.reset();
   }
 
</script>
</body>

效果：

建議少用重置按鈕，建議設置一個取消按鈕，讓用戶返回前一個頁面。

當用戶點擊重置按鈕時，會觸發reset事件。這時我們可以取消重置操作，也就是使用preventDefault()方法阻止重置操作。

表單字段（表單元素）

可以像訪問頁面中其它元素一樣，使用DOM訪問表單中的元素。每個表單有個elements屬性，該屬性是表單所有元素的集合，也就是表單字段的集合。它包含了表單的所有字符段，如：<input>、<textarea>、<button>、<fieldset>等。每個字符段（表單元素）在elements中的順序與它們在標記中的順序一致，通過elements返回的量NodeList。可以按照位置（索引）和name來訪問它們，length屬性可以得到字段的個數。

<body>
  
  <form id="myForm" action="php.php" method="get">
    <fieldset>
      <legend>邊框標題</legend>
      <input type="text" name="name1" size="20" value="默認初始值">
      <input id="text" type="text" name="name1" value="">
      <button name="name1">提交按鈕</button>
    </fieldset>
  </form>
  
<script>
   
    var myForm = document.querySelector("#myForm");
    
    //取得表單中的第一個字段
    var field = myForm.elements[0]
    console.log(field); //<fieldset></fieldset>
    
    //取得name值爲"name"的字段集合
    var field2 = myForm.elements["name1"];
    console.log(field2.length); //3 name值爲"name"的字段個數。
    //返回name值爲"name"的第一個字段
    console.log(field2[0]); //<input type="text">
    console.log(field2[1]); //<input type="text">
    console.log(field2[2]); //<button></button>
        
</script>
</body>

共有的表單字段屬性

除了<fieldset>元素之外，所有表單字段都擁有相同的一組屬性。由於<input>類型可以表示多種表單字段，因爲有些屬性只用於某些字段，一些字段是所有字段共有的。共有屬性如下：

disabled：布爾值，表示當前字段是否禁用。
form：指向當前字段所屬表單的指針，只讀。
name：當前字段的名稱。
readOnly：布爾值，表示當前字段是否可讀。
tabIndex：表示當前字段的切換（TAB）的序號。次序。
type：當前字段的類型。
value：當前字段的值，也就是將被提交到服務器的值。

除了form屬性外，其它屬性均可用JavaScript來修改。

<body>
  
  <form id="myForm" action="php.php" method="get">
    <fieldset>
      <legend>邊框標題</legend>
      <input id="text" type="text" name="name1" value="默認值">
      <button name="name1">提交按鈕</button>
    </fieldset>
  </form>
  
<script>
   
    var myForm = document.querySelector("#myForm");
    
    //取得表單中的第二個字段
    var field = myForm.elements[1]
    //修改value屬性的值
    field.value="修改後的值";
    
    //檢查form屬性
    console.log(field.form);
    
    //設置焦點
    field.focus();
   
</script>
</body>

效果：

能夠動態的修改表單字段屬性，意味着我們可以隨時以任何方式操作表單。例如，用戶重複單擊提交按鈕，當涉及訂單或銀行卡消費時，重複點擊按鈕會將費用翻番。解決的辦法就是：在第一次點擊提交按鈕後就禁用這個提交按鈕。思路：偵聽submit事件，並在該事件發生時禁用提交按鈕即可。這樣就只發生一次的提交操作，後續的提交操作被禁止了。

 <body>
   
   <form id="myForm" action="" method="get">
     <fieldset>
       <legend>邊框標題</legend>
       <input id="text" type="text" name="name1" value="默認值">
       <button name="submit-btn">提交按鈕</button>
     </fieldset>
   </form>
   
 <script>
   
    var myForm = document.querySelector("#myForm");
    
    myForm.addEventListener("submit", function (e) {
        var event = e.target;
        //取得提交按鈕
        var btn = event.elements["submit-btn"];
        
        //禁用提交按鈕
        btn.disabled = true;
    });
 
   
</script>
 </body>

以上代碼爲submit事件添加了一個事件處理程序。事件觸發後，代碼取得了提交按鈕並將其disable設置爲true，意味着之後禁用提交按鈕。

注意，只能通過submit事件來禁用提交按鈕。不能使用onclick事件處理程序來實現禁用，原因是不同瀏覽器的onclick程序存在時差，有的瀏覽器會先觸發onclick事件程序，這樣的話，意味着提交之前就禁用了提交按鈕，結果永遠都不會提交。因爲最好通過submit事件處理程序來禁用提交按鈕。

共有的表單字段方法

每個表單有有兩個方法：focus()和blur()。

focus()方法表示將焦點設置到表單字段上，以激活表單字段，使其響應鍵盤事件。

例如，當頁面加載完成後，將焦點轉移到表單中的第一個字段。爲此，可以偵聽頁面的load事件，並在該事件發生時在表單的第一個字段上調用focus()方法：

<body>
  
  <form id="myForm" action="" method="get">
    <input id="text" type="text" name="name1" value="默認值">
    <button name="submit-btn">提交按鈕</button>
  </form>
  
<script>
   
    window.onload = function (e) {
        //當頁面加載完成後，表單的第一個字段調用focus()方法
        document.forms[0].elements[0].focus();
    };
    
    
 
   
</script>
</body>

效果：

這裏表單的第一個字段爲<input>元素，因此當頁面加載完成後，這個文本框獲得了焦點。

注：如果表單的第一個字段是<input>元素，且其type的屬性值爲"hidden"，那麼以上代碼會出錯，意味着找不到這個字段。同樣的，如果對這個字段使用CSS的display和visibility屬性隱藏了該字段，以上代碼也會出錯。因爲隱藏了這個字段，那麼以上代碼就找不到了。

HTML5爲表單字段新增了autofocus屬性，意味着字段將自動獲取焦點。autofocus屬性的值是個布爾值，true表示獲取焦點，false表示不獲取焦點。

<input type="text" autofocus>

爲了保證以上代碼在設置了autofocus屬性的字段中也能運行，首先需對字段進行檢測，確定這個字段是否設置了autofocus屬性，如果設置了就無需調用focus()方法，如果沒有設置這個屬性，就需要調用focus()方法來獲取焦點。

<body>
  
  <form id="myForm" action="" method="get">
    <input id="text" type="text" name="name1" value="默認值">
    <button name="submit-btn">提交按鈕</button>
  </form>
  
<script>
   
    window.onload = function (e) {
        //獲取表單的第一個字段
        var element = document.forms[0].elements[0];
        //判斷該字段是否設置了autofocus屬性
        if (element.autofocus !== true) {
            element.focus(); //如果沒有設置，則調用focus()方法
            console.log("JavaScript focus");
        }
    };
     
</script>
</body>

這段代碼會返回"JavaScript focus"，意思就是說表單的第一個字段沒有設置autofocus屬性，那麼該字段就調用focus()方法獲取焦點。如果這個字段設置了autofocus屬性，那麼當頁面加載完成後，該字段就獲取了焦點。

與focus()方法相對的就是blur()方法，這個方法表示字段失去焦點即把焦點從這個字段上移出。這個方法在字段獲取了焦點的情況下使用纔有效。

<body>
  
  <form id="myForm" action="" method="get">
    <input id="text" type="text" name="name1" value="默認值">
    <button name="submit-btn">提交按鈕</button>
  </form>
  
<script>
   
    window.onload = function (e) {
        //獲取表單的第一個字段
        var element = document.forms[0].elements[0];
        //判斷該字段是否設置了autofocus屬性
        if (element.autofocus !== true) {
            element.focus(); //設置焦點
            element.blur(); //移出焦點
        }
    };
     
</script>

在以上代碼中增加一行代碼"element.blur()"，也就是移出焦點，那麼表單中的第一個字段結果還是沒有獲取到焦點。因爲即使通過focus()方法獲取了焦點，同樣也通過blur()方法移出了焦點，最後結果就是沒有獲取焦點。

共有的表單字段事件

除了了支持鍵盤、鼠標、HTML和更改事件外，表單字段不支持以下3類事件：

blur：當前字段失去焦點時觸發這個事件。
focus：當前字段獲取焦點時觸發這個事件。
change：對於<input>和<textarea>元素，在它們失去焦點且value值改變時觸發（有焦點時，意味着文本正在輸入）。對於<select>元素，只要選項改變就會觸發，也就是說，不失去焦點也會觸發。

通常focus和blur屬性用於改變用戶界面，要麼給用戶於視覺的提示，要麼就向頁面中新增功能。change屬性通常用於驗證用戶輸入的值是否符合某種規範（例如只能輸入數字）。

我們假定一個文本框<texteara>，當文本框獲取了焦點時背景顏色變成藍色，當文本框失去焦點時恢復文本框的背景顏色，當用戶向文本框輸入純數字時，恢復文本框顏色，當用戶輸入的值爲非純數字時，文本框背景顏色變成紅色。

<body>
  
  <form id="myForm" action="" method="get">
    <textarea id="textbox" rows="10" cols="20"></textarea>
  </form>
  
<script>
    //獲取表單中的文本框字段
    var textbox = document.forms[0].elements[0];
    
    //確定文本框是否獲取了焦點,並設置相應顏色
    textbox.addEventListener("focus", function (e) {
        var element = e.target; //獲取這個文本框這個目標
        if (element.style.background != "orange") {
            element.style.background = "blue";
        }
    });
    
    //當失去焦點時，改變相應顏色
    textbox.addEventListener("blur", function (e) {
        var element = e.target;
        if (/[^\d]/.test(element.value)) {
            element.style.background = "red";
        } else {
            element.style.background = "";
        }
    });
    
    textbox.addEventListener("change", function (e) {
        var element = e.target;
        if (/[^\d]/.test(element.value)) {
            element.style.background = "red";
        } else {
            element.style.background = "";
        }
    });
     
</script>
</body>

效果：

這裏爲也檢測用戶所輸入的內容是否爲純數字，運用了正則表達式，"[^\d].test()"表示輸入的爲非數字。

網絡鍵盤俠客

發佈了109 篇原創文章 · 獲贊 56 · 訪問量 13萬+

私信關注

JavaScript之表單基礎知識（表單腳本）

表單的基礎知識

獲取表單的引用

提交表單

重置表單

表單字段（表單元素）

共有的表單字段屬性

共有的表單字段方法

共有的表單字段事件

絕對定位與浮動定位（隨筆）

JavaScript之DOM擴展

JavaScript之執行環境與作用域

JavaScript之最佳實踐（可維護性、性能優化）

CSS設計美麗之百合花（小作品）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結