JavaScript高级程序设计第四版学习--第十九章
title: JavaScript高级程序设计第四版学习–第十九章
date: 2021-5-28 22:46:03
author: Xilong88
tags: JavaScript
本章内容
理解表单基础
文本框验证与交互
使用其他表单控件
可能出现的面试题：
1.讲讲form的常用属性方法
2.怎么阻止表单提交？
3.表单按钮有哪几种？
4.如何获取焦点（H5中新方法）
5.H5对表单有哪些增强？
6.如何检测表单合法性？
7.了解过validity对象吗？
总结：这一章讲了表单的属性和方法。
知识点：
1. 元素，在JavaScript中以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 属性。
可以通过
let form = document.getElementById("form1");
获取表单对象，也可以通过，form集合
// 取得页面中的第一个表单
let firstForm = document.forms[0];
// 取得名字为"form2"的表单
let myForm = document.forms["form2"];
2.提交表单
type 属性为"submit" 的 或 元素来定义，图片按钮可以使用type 属性为"image" 的 元素来定义。
<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图片按钮 -->
<input type="image" src="graphic.gif">
如果表单中有上述任何一个按钮，且焦点在表单中某个控件上，则按回
车键也可以提交表单
点击会执行submit事件，可以用来检查表单。
preventDefault() 方法可以阻止表单提交
也可以调用submit() 方法来执行表单提交，但是这个方法不会触发submit事件
3.重置表单
<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>
如果字段原来是空的，就会变成空的；
如果字段有默认值，则恢复为默认值。
也可以取消这个事件
let form = document.getElementById("myForm");
form.addEventListener("reset", (event) => {
event.preventDefault();
});
也有类似的reset() 方法在js中调用，同样不会触发reset事件
4.表单字段
from里的 、