常用的表单类型:
1,button:按钮。
2,checkbox:复选按钮。
3,file:文件选取。
4,hidden:隐藏域。
5,password:密码输入框。
6,radio:单选按钮。
7,reset:重置按钮。
8,select:下拉列表。
9,submit:提交按钮。
10,text:文本按钮。
11,textarea:多行文本输入域。
选取表单元素的方法:
1,普通的元素获取方式:getElementById,document.querySelector等。
2,document对象的forms属性获取:该属性值为页面中所有的form表单组成的HTMLCollection对象,可以
通过数字下标或者表单的name或id属性获取,例如,当一个表单设置了name属性,它的值为address,
可以通过document.forms.address获取。也可以通过elements属性获取。获取form表单内的表单组成时
也可以通过表单组成的name和id获取,也可以通过elements属性获取,结果一样:
document.forms.address.elements.***.
表单属性和方法:
属性:
1,action:表单数据发送的URL。
2,encoding:编码方式。
3,method:表单提交方式,GET或POST。
4,target:在何处打开action属性指定的URL。
5,type(表单元素的属性):表单元素类型,对于<input>便签定义的表单,返回的就是其元素属性type。其他表单元素,像<select>,<textarea>定义的表单通常值就是便签名。
6,form(表单元素的属性):表单元素的Form对象的只读引用,也就是获取指定表单元素的外层form对象的引用。如果表单元素没有被form包裹起来的话就返回null。
7,name(表单元素的属性):表单元素设置的name属性值。
8,value(表单元素的属性):在<text>,<textarea>中值为用户输入的值,<select>中为值为选中的<option>中的value属性的值,如果<option>中每有设置value属性的话就返回<option>便签没的文本值。在checkbox和radio中,这个属性是不可见也不可编辑的。
9,checked:单选按钮和复选按钮中定义,指定元素当前是否选中。
10,options(select元素定义的属性):返回一个类数组,值为option元素集。
方法:
1,submit():调用Form对象的submit方法提交表单。
2,reset():调用Form对象的reset方法重置表单输入值。
表单事件:
1,onsubmit:表单提交前,触发onsubmit事件,可以通过返回false取消提交动作,通常在这个事假处理程序中做一些验证操作(只能通过表单提交按钮触发,直接调用submit()方法提交表单不会触发事件)。
2,onreset:表单重置前触发onreset事件,可以通过返回false取消提交动作,(只能通过表单重置按钮触发,直接调用reset()方法重置表单不会触发事件)。
3,onclick:表单按钮点击触发。
4,onchange:文本域中,当输入内容改变,且表单失去焦点时触发。在选择内的表单元素中,切换选择时触发。
5,focus:获取焦点时触发。
6,blur:失去焦点时触发。
选择框和选项元素:
1,<select>元素有两种不同的方式运作,也就是单选和多选(加上multiple属性),两种情况是的type属性分别返回"select-one"和"select-multiple"。
2,options属性:<select>元素定义了options属性,它是<select>元素中包含的所有options元素集合(类数组)。
3,<select>元素的可读性属性selectedIndex,值为当前选中<option>元素下标。
4,<option>元素的selected属性:当前<option>是否选中。
5,<option>元素的text属性:当前<option>的纯文本。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>test</title> <style> </style> </head> <body> <form name="news"> <select name="ttt"> <option value="aaaaa">1111111</option> <option value="bbbbb">2222222</option> <option value="ccccc">3333333</option> </select> </form>
</body> <script type="text/javascript"> //单选 document.forms.news.ttt.onchange = function(){ console.log(this.options[this.selectedIndex].value); } </script> </html>
//多选 document.forms.news.ttt.onchange = function(){ //console.log(this.options[this.selectedIndex].text); let arr = []; for(let i=0;i<this.options.length;i++){ if(this.options[i].selected){ arr.push(this.options[i].value); } } console.log(arr); }