表单元素除了可以运用上述所有DOM相关操作外,为了简化,还有一系列自己的属性和方法。
表单除了支持鼠标,键盘,更改和html时间之外,还支持一些表单特有的事件,如focus,change,blur等等。
一、form表单元素
1.获取表单上的form元素
1)document.getElementById()
2)document.forms 可以获得页面上所有的form元素,在这个集合中,可以通过数值索引或者表单的name属性来取得特定的表单。如:
document.forms[0],document.forms['name']
2.form独有的属性和方法:
特有属性:
action:等同于html中的aciton特性
length:表单中控件的个数
method:等同于html中的method
name:等价于html中的name
elements:表单中所有控件的集合。通常利用数值索引或者控件的name作为索引来得到控件的引用,如elements[0]或者elements['username']。这有时候比通常的dom方法要方便得多。如果多个表单空间都使用同一个name(如单选按钮),就会返回以该name命名的一个NodeList集合。
特有方法(通过这些方法可以主动触发对应时间):
a.表单提交 focus
当用户单击提交按钮或者图像按钮的时候,就会提表单,包括
<input type='submit' value='xxx'>
<button type='submit'>提交</button>
<input type-='image' src='xxx'>
用这种方式提交表单,在请求发送之前会触发表单的submit事件,阻止这个事件就可以取消表单提交。
此外,js中利用编程方式调用submit()也会提交表单而无需包含任何提交按钮,不过使用这种方法提交的时候,不会触发submit事件,因此要记得调用此方法之前先验证表单数据。
b.表单重置 reset
同样,重置也有两种方法
用户点击重置按钮,表单会被重置
<input type='reset' value='xxx'>
<button type='reset'>reset</button>
js中调用表单的reset()方法也可以重置表单,和submit()不同的是,这种方法会像点击重置按钮一样触发reset事件。
二.表单字段元素
表单的字段包括但不限于:
input(type的可选值包括:text,submit,radio,checbox),textarea,button,fieldset,select>option等。html5还增加了很多新类型,包括input(type可选值包括password,url,email等等)这里对此不再探讨。
表单中的元素字段可以利用dom方法访问,也可以利用form的elements属性,利用数值或者name属性获得具体的引用。这些表单元素的属性和方法如下:
1)共用属性
disabled:代表当前字段是否被禁用。备注:在web开发中,为了避免表单的重复提交,最常见的解决方案是,监听表单的submit事件,在该事件发生时候,设置提交按钮的disable=true.
form:指向当前字段所属的表单
readOnly:代表是否只读
tabIndex:当前字段的切换(tab)序号
form:指向当前字段所属表单的引用。
name:当前字段的名称
type:字段类型,如text,radio,checkbox,select one,select multiple等
value:当前字段将被提交至服务器端的值。对于表单字段来说,建议使用value进行属性的读取和设置,而非典型的DOM方法。
对于<input type='text'>,<textarea></textarea>来说,用户输入的内容保存在value中。
对于select元素,value的值由当前的选中项决定。如果没有选中项,那么为空字符串,如果有多个,则由第一个决定。
对于input:radio/checbox,value的值根据当前元素是否checked决定。
2)表单字段的公用方法
blur():可以主动触发blur事件
focus():可以主动触发focus事件
3)表单字段的共用事件
blur:当前字段失去焦点时候触发
focus:当前字段获得焦点时出发
change:对于<input>,<textarea>等元素,在它们失去焦点并且value值改变的时候触发,对于<select>元素,在选项改变时就会触发。
三、input[type=text]与textarea 文本框字段
input[type=text]可以使用size指定文本框能够显示的字符数,可以通过maxlength限制文本框能够接受的最大字符数,可以使用value属性指定初始值
textarea可以使用rows指定字符行数,cols指定字符列数。其初始值应当放在<textarea>和</textarea>之间。
文本框除了支持表单字段公共的focus,blur事件外,常用的事件还包括:
1)change:在text和textarea失去焦点并且value值改变的时候出发。
2)keypress:用于过滤输入
3)keyup:
4)select事件与select主动触发方法
select()事件用于选择文本框中的所有文本(比如当文本框包含默认值,用户就不用一个个删除),与select()方法对应的,是select事件,这个事件在用户选择文本并且释放了鼠标的时候触发。可以通过文本元素的selectionStart和selectionEnd来取得选择的文本。
html5还提供了主要触发选择部分文本的方法,这里不再赘述。
四、下拉框字段select与option
1)select的特有属性
select的type值不是“select-one”就是“select-multiple”,取决于html标签中是否有multiple特性。
multiple:boolen值,是否允许多选
options:所有<option>元素的HTMLCollection
selectedIndex:选中项的索引
select的value值由当前的选中项决定,规则如下:
a.如果没有选中项,则value为'';
b.如果有一个选中项,并且该项的value已经在html中指定,则value等于html中指定;‘’
2)select特有方法
add(newOption,relOption):向控件插入新的option,在relOption之前
remove(index).删除索引为index的option
3)option也有一些特有的属性,包括:
index:当前option的索引;
selected:是否被选中
text:选项的文本
value:选项的值
4)下拉框的创建操作
A。获得选中项的值
如果是单选
selectbox.options[selectbox.selectedIndex].value
如果是多选,那么只有遍历,检测每个属性的selected属性取得了
B:设置选项
//方法一,仅针对单选selectbox.selectedIndex=index;//方法二selectbox.options[index].selected=true;
C:监听value改变事件(change事件)
selectbox.addEventListener('change',function(e){ doSomething();};false);
D:添加选项
//如果添加多项,最好还是采用innerHTML方法//如果添加单个option,dom方法不如下面的方法简便:var option=new Option('option text','option value');selectBox.add(option,undefined);
E:删除选项
//可以使用dom的removeChild,也可以使用下面的方法删除单个optionselectbox.remove(0);
五、单选按钮
常见操作:
A:获取单选按钮对应的NodeList
//方法一form.elements['sex']//方法二document.getElementsByName('sex')
B:获取单选按钮选中项的值
//没有更好的办法,只有遍历for(var i=0;i
不过后台获取radio提交的值,貌似只用取name对应的字段属性即可
C:监听单选按钮选中项更改的事件(注意监听的是click事件,建议使用委托)
radioGroup.addEventListener('click',function(e){ if(e.target.type=='radio'){ doSomething(); }},false);
六:复选框checkbox
常见操作:
A:获取复选框列表,方法同单选框,利用getElementsByName或者form.elements][name]
B:获取复选框选中的值:方法和单选框类似,只能遍历所有值,后台获取复选框的值相对简单,name对应的是一个数组
C:监听复选框选中状态的变化,和单选框类似,也需要监听click事件