JavaScript学习摘要－表单
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.onsubmit=function(){};
表单重置时会发生reset事件。
document.formName.onreset=function(){};
当表单控件失去焦点时会触发blur事件，当控件获得焦点时又会触发focus事件。
表单主要包括：文本域，按钮，复选框，下拉列表等。主要通过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.onsubmit=function(){};
表单重置时会发生reset事件。
document.formName.onreset=function(){};
当表单控件失去焦点时会触发blur事件，当控件获得焦点时又会触发focus事件。
