获取表单和控件
| document的方法/属性 | 说明 |
| getElement...或querySelect...方法 | |
| forms | 集合对象（所有表单） |
表单对象.elements 返回所有控件组成 的集合对象
例：
<form name="login">
<input name="user"></form>
let loginForm=document.forms[0];//["login"]
let form=document.elements;//所有控件
let username=elements.user;//input所有控件获取表单和控件的简洁方式
获取表单：document.表单name属性值
获取控件：表单对象.控件name或id属性值
<form name="login">
<input type="text" name="user" id="user1">
<input type="tel" name="tel" id="tel">
</form>
let loginForm=document.login;
let user=loginForm.user;
let tel=loginForm.tel;控件属性，方法，事件
控件常用属性，方法
适用于大部分控件
| 属性/方法 | 说明 |
| type | 控件的类型，用于input元素 |
| value | 控件的值 |
| readonly | 值为true控件只读，能获取焦点但不能编辑 |
| disabled | 值为true控件被禁用，不能获取焦点和编辑 |
| select() | 选中type=text或textarea元素里的所有内容 |
| focus() | 使控件获取焦点，触发focus事件 |
表单控件常用事件
| 事件 | 触发 |
| input | 当input，select |
| change | 元素的值被改变且提交时，用于select，radio，checkbox控件值改变时 |
单选与复选框属性
checked属性：判断单选或者复选框是否被选中。读/写，true选中，false反之
<form name="login">
<input type="checkbox" name="hobby">
</form>
document.login.hobby.onchange=function(e){
if(e.target.checked){}
}select控件属性
| 属性 | 方法 |
| value | 获取select控件的选项值 |
| options | 所有option元素的集合 |
| SelectedIndex | 当前选中选项的索引数 |
| Selected | 判断列表框中选项是否被选中 |
<select name="my"><option></option></select>
my.value;
my.options[my.selectedIndex].value;
my.options[my.selectedIndex].text;表单前端验证
验证事件
用于验证的事件
| 事件 | 说明 |
| blur | 控件失去焦点时验证 |
| change | 控件value值改变时验证 |
| input | 文本框框或者textarea值改变时 |
| keyup | 验证文本框，文本域中键的输入 |
| submit | 表单被提交到服务器时 |
表单提交时验证表单
form.addEventListener('submit',e=>{
if(form.username.value.length<8){
tipMessage.textContet='长度错误';
e.preventDefault();
return false;}
});