--表单

Posted 2020-06-13

1.在 html 中，表单是由<form>元素来表示的，而在 javascript 中，表单对应的则是 HTMLFormElement 类型。 HTMLFormElement 继承了 HTMLElement，因而与其他 HTML 元素具有相同的默认属性。

2.HTMLFormElement的独特属性和方法：

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

3.获取表单引用的方式：

第一种：为其添加 id 特性，然后使用 getElementById()方法找到它。
第二种：通过 document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或name 值来取得特定的表单。

可以同时为表单指定 id 和 name 属性，但它们的值不一定相同。

 

4.表单提交的方式：

• 定义提交按钮：

1 <!-- 通用提交按钮 -->
2 <input type="submit" value="Submit Form">
3 <!-- 自定义提交按钮 -->
4 <button type="submit">Submit Form</button>
5 <!-- 图像按钮 -->
6 <input type="image" src="graphic.gif">

以定义提交按钮的方式提交表单会触发submit事件，可以选择在合适的时候取消事件。

 

• 调用submit()方法：

1 var form = document.getElementById("myForm");
2 //提交表单
3 form.submit();

调用submit()方法提交表单不会书法submit()事件。

 

重置表单的方式：

• 创建重置按钮：

1 <!-- 通用重置按钮 -->
2 <input type="reset" value="Reset Form">
3 <!-- 自定义重置按钮 -->
4 <button type="reset">Reset Form</button>

创建重置按钮会触发reset事件。

 

• 调用reset()方法：

1 var form = document.getElementById("myForm");
2 //重置表单
3 form.reset();

调用reset()同样触发reset事件。

 

表单字段：

每个表单都有elements 属性，该属性是表单中所有表单元素（字段）的集合。这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、 <textarea>、 <button>和<fieldset>。每个表单字段在 elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和 name 特性来访问它们。例如：

1 var form = document.getElementById("form1");
2 //取得表单中的第一个字段
3 var field1 = form.elements[0];
4 //取得名为"textbox1"的字段
5 var field2 = form.elements["textbox1"];
6 //取得表单中包含的字段的数量
7 var fieldCount = form.elements.length;

共有的表单字段属性：

• disabled：布尔值，表示当前字段是否被禁用。
• form：指向当前字段所属表单的指针；只读。
• name：当前字段的名称。
• readOnly：布尔值，表示当前字段是否只读。
• tabIndex：表示当前字段的切换（tab）序号。
• type：当前字段的类型，如"checkbox"、 "radio"，等等。
• value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
  
  

共有的表单字段方法：

• focus()：用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。
  
  
• blur()：从元素中移走焦点。在调用 blur()方法时，并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的元素上面移走而已。
  
  

共有的表单字段事件：

• blur：当前字段失去焦点时触发。
• change：对于<input>和<textarea>元素，在它们失去焦点且 value 值改变时触发；对于<select>元素，在其选项改变时触发。经常用于验证用户在字段中输入的数据。
• focus：当前字段获得焦点时触发。

 

 

文本框脚本：

两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。

select()：用于选择文本框中的所有文本。这个方法不接受参数，可以被任何时候调用。select()方法触发了select事件。

取得选择的文本：selectionStart 和 selectionEnd属性，

选择部分文本：setSelectionRange()方法，这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。

 

 

HTML5 约束验证API：

必填属性：在表单字段中指定了 required 属性，例如： <input type="text" name="username" required> 

type属性新增加的值："email"和"url"，浏览器会为其增加验证机制。

数值的范围:"number"、 "range"、 "datetime"、 "datetime-local"、 "date"、 "month"、 "week"，还有"time"。可以指定 min 属性（最小的可能值）、 max 属性（最大的可能值）和 step 属性（从 min 到 max 的两个刻度间的差值），stepUp()和 stepDown()接受一个参数，就是要在当前值基础上加上或减去的数值。

新增的pattern属性：这个属性的值是一个正则表达式，用于匹配文本框中的值。

检测有效性：使用 checkValidity()方法可以检测表单中的某个字段是否有效。validity 属性则会告诉你为什么字段有效或无效。

禁用验证：设置 novalidate 属性，可以告诉表单不进行验证。

 

表单序列化：