标签：命名 lin class 特性 利用 listen mil 委托 验证
表单元素除了可以运用上述所有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="25" maxlength="50" value="initial value">
input[type=text]可以使用size指定文本框能够显示的字符数，可以通过maxlength限制文本框能够接受的最大字符数，可以使用value属性指定初始值
<textarea name="" id="" cols="5" rows="25">initial value</textarea>
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
<select name="select" id="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>
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,也可以使用下面的方法删除单个option selectbox.remove(0);
五、单选按钮
<div class="radio-group"> <label><input type="radio" name="sex" value="femail">男</label> <label><input type="radio" name="sex" value="mail">女</label> </div>
常见操作：
A：获取单选按钮对应的NodeList
//方法一 form.elements[‘sex‘] //方法二 document.getElementsByName(‘sex‘)
B：获取单选按钮选中项的值
//没有更好的办法，只有遍历 for(var i=0;i<radios.length;i++){ if(radios[i].checked){ return radios[i].value; } }
不过后台获取radio提交的值，貌似只用取name对应的字段属性即可
C：监听单选按钮选中项更改的事件（注意监听的是click事件，建议使用委托）
radioGroup.addEventListener(‘click‘,function(e){ if(e.target.type==‘radio‘){ doSomething(); } },false);
六：复选框checkbox
<div class="checkbox-group"> <label for="swim"><input type="checkbox" name="sport" id="swim" value="游泳"></label> <label for="running"><input type="checkbox" name="sport" id="runing" value="跑步"></label> <label for="ball"><input type="checkbox" name="sport" value="羽毛球" id="ball"></label> </div>
常见操作：
A:获取复选框列表，方法同单选框，利用getElementsByName或者form.elements][name]
B:获取复选框选中的值：方法和单选框类似，只能遍历所有值，后台获取复选框的值相对简单，name对应的是一个数组
C:监听复选框选中状态的变化，和单选框类似，也需要监听click事件
标签：命名 lin class 特性 利用 listen mil 委托 验证
原文地址：http://www.cnblogs.com/bobodeboke/p/6279943.html
