示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>获取表单数据</title>
  9. </head>
  11. <body>
  12.     <form id="myForm">
  13.         <input type="checkbox" name="tablename" value="Bike">Bike<br>
  14.         <input type="checkbox" name="tablename" value="Car">Car<br>
  16.         <input type="button" value="提交" onclick="getFormData()">
  17.     </form>
  19.     <script>
  20.         // 获取表单
  21.         var myForm = document.getElementById('myForm')
  23.         var getFormData = function () {
  24.             let checkArr = []
  25.             //表单属性 elements 获取表单中所有控件的集合
  26.             let inputList = myForm.elements.tablename
  27.             for (let index = 0; index < inputList.length; index++) {
  28.                 // 表单中选择的checkbox添加到checkArr数组中
  29.                 if (inputList[index].checked) {
  30.                     // 选中复选框的值
  31.                     checkArr.push(inputList[index].value)
  32.                 }
  34.             }
  36.             console.log(checkArr);
  37.         }
  38.     </script>
  39. </body>
  41. </html>

fiedldset组合表单

  1. <form>
  2.     <fieldset>
  3.         <legend>health information </legend>
  4.         height: <input type = ‘text’ />
  5.         weight: <input type = ‘text’ />
  6.     </fieldset>
  7. </form>

表单脚本 - 图1

表单创建

HTML创建

在HTML中，表单用form来创建。

JavaScript创建

在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因而与其他HTML元素具有相同的默认属性。

获取表单

  1. // 方式1：根据下标获取
  2. var form = document.forms[0];
  4. // 方式2：根据name属性名获取
  5. var form = document.forms['formName'];

表单的属性和方法

  • accepetCharset：服务器能够处理的字符集；等价于HTML中的accept-charset特性。
  • action：接受请求的URL；等价于HTML中的action特性。
  • elements：表单中所有控件的集合。
  • enctype：请求的编码类型；等价于HTML中的enctype特性。
  • length：表单中控件的数量。
  • method：要发送的HTTP请求类型，通常是“get”或“post”；等价于HTML的method特性。
  • name：表单的名称；等价于HTML的name特性。
  • reset()：将所有表单域重置为默认值。
  • submit()：提交表单。
  • target：用于发送请求和接收响应的窗口名称；等价于HTML的target特性。

    提交表单

    通用提交按钮

    1. <input type = ‘submit’ value= ‘Submit Form’ >

自定义提交按钮

  1. <button type = ‘submit’>Submit Form</button>

图像按钮

  1. <input type = ‘image’ src = ‘graphic.gif’ >

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况，按回车键就可以提交该表单。
（textarea是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车键不会提交表单。
表单脚本 - 图2

提交表单

  1. form.submit()

避免表单重复提交

提交表单时可能出现的最大问题，就是重复提交表单。
解决这一问题的办法有两个：

  1. 第一次提交表单后就禁用提交按钮。
  2. 利用 onsubimt 事件处理程序取消后续的表单提交操作。

表单脚本 - 图3
注意：不能通过 onclick 事件处理程序来实现这个功能，原因是不同浏览器之间 存在“时差”：有的浏览器会在触发表单的 submit 事件之前触发 click 事件，而有的浏览器则相反。对于先触发 click 事件的浏览器，意味着会在提交发送之前禁用按钮，结果永远都不会提交表单。因此，最好是通过 submit 事件来禁用提交按。不过，这种方式不适合表单中不包含提交按钮的情况；

重置表单

JavaScript重置

form.reset()

HTML重置

<input type =’reset’ value = ‘Reset Form’>

<button type = ‘reset’>Reset Form </button>

获取表单数据

可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。
Elements 属性，该属性是表单中所有元素的集合。
这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，例如、 之间。

style=”resize:none” //控制textarea 元素不可拉伸
另一个与 的区别在于，不能在 HTML 中给