<form name="myform">
<label for="name">name:</label>
<input id="name" name="name">
<label for="email">email:</label>
<input id="email" type="email" name="email">
<label for="intro">intro:</label>
<textarea id="intro" name="intro"></textarea>
<button>submit</button>
</form>- 表单由
<form>标签定义 <label>：将标签链接到表单控件的一种正规方式，使用 for 属性对应表单控件的 id（好处是点击 label 会聚焦到对应的表单项）- 提交按钮：
<button>默认 type=“submit”。（还可以使用<input type="submit">进行提交，但是里面只能是纯文本）
有两种在表单中定义按钮的方式
- type 属性值为 button、submit、reset 或 image 的
<input>元素 <button>元素
表单校验
input 元素有属性可以进行数据校验：
required：必填pattern：正则表达式匹配文本字符串中字符minlength和maxlength：限制输入长度- …
表单数据发送
1. form 表单自带
<form> 元素的 action 和 method 属性：
action：数据发送的地址，是一个有效的绝对或相对 URL，为空表示当前网页地址method：主要是GET或POSTenctype：指定在提交表单时所生成的请求中的 Content-Type 的 HTTP 数据头的值（默认值是application/x-www-form-urlencoded）
发送数据还需要每个表单控件提供 name 属性（会作为表单数据的 key）
2. 使用 js 发送
使用 XMLHttpRequest 和 FormData 对象
Warning
严格禁止在一个表单内嵌套另一个表单
访问表单
- 页面的表单可以通过 name访问，如
document.forms.myform - 也可以通过索引来访问，如
document.forms[0]
访问表单中的元素
不管元素怎么嵌套，都可以通过 form.elements[name] 访问元素，如果有多个相同 name 的表单元素，那么结果是一个 NodeList
NOTE
还有一个更简短的表示方式：可以直接通过
form[index/name]来访问元素，如：form.elements.one写成form.one
反向访问
对于任何元素，它所属的表单都可以通过 element.form 访问到
表单事件
focus/blur
- 当元素聚焦时，会触发 focus 事件，当元素失去焦点时，会触发 blur 事件
elem.focus()和elem.blur()方法可以设置和移除元素上的焦点- focus 和 blur 事件不会向上冒泡，但是会在捕获阶段向下传播（可以使用 focusin 和 focusout 事件，与 focus/blur 事件完全一样，但它们会冒泡，且必须使用 elem.addEventListener 来分配）
- 可以通过
document.activeElement来获取当前所聚焦的元素
NOTE
默认情况下，很多元素不支持聚焦。要让任何元素获得聚焦功能：给元素添加 tabindex 特性。
焦点切换顺序为：tabindex >= “1” 的元素按 tabindex 从小到大的顺序，然后是 tabindex = “0” 的元素。
特殊地：tabindex=“-1” 只允许以编程的方式聚焦于元素。Tab 键会忽略这样的元素，但是 elem.focus() 有效。
change
当元素更改完成时，将触发 change 事件：
- 对于文本输入框，当其失去焦点时，就会触发 change 事件
- 对于其它元素：select，checkbox/radio，会在选项更改后立即触发 change 事件
Warning
先触发 change，再触发 blur
input
每当用户对输入值进行修改后，就会触发 input 事件 (不管是通过什么方式输入的)
Tip
input 事件是在变更完成后触发的，所以使用
event.preventDefault()阻止它没有用
提交表单
提交表单有 3 种方式：
- 点击
<input type="submit">或<input type="image"> - 在 input 字段中按下 Enter 键
- 手动提交：
form.submit()
这都会触发表单的 submit 事件