表单脚本
form 表单
如果form表单内没有submit按钮，只有button元素，那么这个button可以升级为submit按钮。
form 表单用来向服务器提交信息，常用属性
action：提交表单的地址name：页面中可能不止一个表单，用name来区分，PS：id 也可以method：提交表单的方法，post或gettarget：在何处打开action-
enctype：application/x-www-form-urlencoded：在发送前编码所有字符(默认)text/plain：空格转换为 "+" ，但不对特殊字符编码multipart/form-data：使用包含文件上传控件的表单时，必须使用该值
注：post请求和get请求区别：参考文章：99% 的人都理解错了 HTTP 中 GET 与 POST 的区别
post比get安全性高，post通过request body传递数据，get把参数包含在 URL 中post一般用于向服务器传送数据，get一般用于向服务器获取数据get请求页面可以被收藏，post不可以get只能进行 URL 编码，而post支持多种编码方式get在 URL 中传递参数有长度限制，而post没有
input
input 标签用来接收用户填写的信息，配合label使用，它的for属性可以选中form表单内的id属性或者用label把input包裹起来就不需要用for了
常用属性
-
type：常用的值password：输入的内容自动自动变成小圆点checkbox：多选，靠name属性分组，提交到后端的时候被选中的value是以 "," 分割的一个字符串，通过name属性获得radio：单选，靠name分组hidden：暂存一些信息-
file：文件上传accept设置上传文件格式multiple文件多选
submit/button/reset：submit可以提交表单，button不能提交表单，reset清空表单
placeholder：提示性文字，一旦输入内容就消失disabled：该input被禁用require：该input必须被填写
select
select用来设置下拉菜单，属性multiple可设置多选
option标签，属性selected：默认选择
textarea：多行文本输入，rows，cols设置默认行列
表单脚本
<form id="myColor" method="post">
<input type="radio" name="color" value="red">Red
<input type="radio" name="color" value="green">Green
<input type="radio" name="color" value="blue">Blue
</form>
<form id="myText" method="post">
<input type="text" value="hello">
<input type="text" value="world">
<input type="text" value="JS" autofocus>
<input type="submit" value="提交">
</form>
<script>
var myColor = document.getElementById('myColor')
var myText = document.getElementById('myText')
//取得表单中第一个字段
myColor.elements[0]
//取得表单中`name`为`color1`的字段
myColor.elements[color1]
//取得表单中字段的数量
myColor.elements.length
//当前字段禁用
myColor.elements[0].disabled = true
//点击input 选中默认展示的value
myText.elements[1].addEventListener('blur',function(e){
e.target.select()
})
</script>- 可以通过
document.forms[0]获得表单 myColor.elements[0]可获得到表单中的第一个字段，多选框name不同，也可以用name的值查找，如myColor.elements[color1]。myColor.elements.length取得表单中字段的数量.-
myColor.elements[0].disabled = true禁用表单当前字段，true为禁用，false为恢复使用，可以应用在表单提交之后，防止用户反复提交表单myText.addEventListener('click',function(){ if(this.elements[3].type === 'submit'){ this.elements[3].disabled = true } }) autofocus在表单字段中设置，当浏览器加载时自动把焦点移到该字段-
focus()、change()、blur()分别是获得焦点时触发，失去焦点并改变value才触发，失去焦点时触发，其中change()和blur()先后顺序并没有严格规定。
输入框选中高亮，输入非数字，改变颜色myText.elements[0].addEventListener('focus',function(e){ if(e.target.style.borderColor !== 'red'){ e.target.style.borderColor = 'yellow' } }) myText.elements[0].addEventListener('blur',function(e){ console.log(e.target.value) if(/[^\d]/.test(e.target.value)){ e.target.style.borderColor = 'red' }else{ e.target.style.borderColor = '' } }) myText.elements[0].addEventListener('change',function(e){ if(/[^\d]/.test(e.target.value)){ e.target.style.borderColor = 'blue' }else{ e.target.style.borderColor = '' } }) input可设置size、maxlength，不能设置rows、cols；而textarea则可以，但不能设置最大字符数。
