JavaScript操作表单

表单主要包括：文本域，按钮，复选框，下拉列表等。主要通过document对象来访问。

一、Form

要访问form，可以通过以下几种方式：

1. 给form标签加个id属性，然后使用document.getElementById方法获得。

2. 使用document.getElementsByTagName("form")来获取所有表单的集合，然后通过下标来访问。

3. 给form标签加个name属性，然后可以使用document.getElementsByTagName来访问。

* 对于0级DOM, 可以通过document.formName来访问

例如：

<form name="formName"></form>

var fm = document.formName;

二、表单元素

1. 通过elements,

var fm = document.forms[0];

alert(fm.elements.length);

var el=fm.elements[0];

2. 通过name属性访问

<form name="formName">

<input name="textInput" type="text" value="文本框" />

</form>

alert(document.formName.textInput.value);

3. 单选按钮与复选框

共同属性：checked，指时是否被选中。多个单选按钮通过一个相同的name分到相同的组，且只能有一个被选中。

var radios = document.formName.radios;

它们还有个defaultChecked属性。

4. 单行文本框与多行文本框

单行：type属性=text. 多行：type=textarea。通过value访问内部。

当用户改变文本区域的值然后通过把键盘焦点移动到其他地方“确认”这些改变的时候，触发change事件。

当文本框中的文本被选中时触发select事件。

5. Select

获取select对象也是通过name（ID仍然有效，但name更快捷）

var select = document.formName.mySel;

要获取用户选中了第几项，可以使用它的selectedIndex

alert(select.selectedIndex);//这个索引号是从0开始的

select对象有个options伪数组类型的属性，包含了所有的option，可以使用下标来访问

alert(select.options[select.selectedIndex].value);//输出选中项的

alert(select.options[select.selectedIndex].text);//text属性是option包含的文本

需要知道select里面有多少个option，可以通过options.length

但HTML DOM为select对象也提供了length属性

alert(select.length);//输出和options.length一样

获取选中项的值

var mySel = document.formName.mySel;

alert(mySel.options[mySel.selectedIndex].value);

更快捷的方法

alert(mySel.value);

向select中添加option:

var opt = new Option("新增选项文本","选项值");//document.createElement("option");

var select = document.formName.mySel;

select.add(opt,select.options[0]);//将opt添加到第一个option的后面

select.add(opt);//在IE下，没有第二个参数时，会将opt添加到最后

上面的代码在FF下会出错，必须使用下面的方法

select.add(opt,null);//但这在IE会出错

下面的方法可以两全了,但长了一点

select.add(opt,select.options[select.length-1]);

删除option的方法remove

select.remove(1);//remove接收参数为要移除

设置某个option的值：

var opts = document.formName.mySel.options;

opts[0]=new Option("Text","Value");

opts.length=2;//将移去第三个之后的option

opts[3]=new Options("ABC",123);//自动添加一个元素

当用户选中一个选项，或者取消了对一个选项的选定时，就会发生change事件。

三、事件

表单提交时会发生submit事件。

document.formName.οnsubmit=function(){};

表单重置时会发生reset事件。

document.formName.οnreset=function(){};

当表单控件失去焦点时会触发blur事件，当控件获得焦点时又会触发focus事件。