JavaScript表单.doc

表单大多数Web页面与用户之间的交互都发生在表单中，表单中有许多交互式HTML元素如：文本域，按钮，复选框，下拉列表等。从文档对象层次图中可以看到，表单是包含在文档中的，所以要访问表单，仍然需要通过document对象来访问Form对象表单就是指的form标签及其里面的内容，要获取一个表单对象，可以给某个form标签加个id属性，然后使用document.getElementById方法获得。也可以使用document.getElementsByTagName(form)来获取所有表单的集合，然后通过下标来访问。还可以给form标签加个name属性，然后可以使用document.getElementsByTagName来访问，注意，同样要使用下标来访问事实上，0级DOM（0级DOM并不是任何DOM规范，事实上它是BOM的内容，但浏览器都实现的比较好）为我们提供了更简单的访问From对象的方法使用document.formNamevar fm = document.formName;/可以这样来直接引用该表单对象/与document.getElementsByTagName(form)相对应有document.forms集合var fm = document.forms0;/获取第一个Form对象访问表单元素Form对象有个elements属性，包是一个含了form标签里面的所有表单控件（input,select等标签，但不包含如div之类的标签）的伪数组var fm = document.forms0;alert(fm.elements.length);/length属性报告了元素的个数在之前，访问input这类标签和访问其它标签没什么区别，可以使用ID，也可以使用className,但当它们在表单中时，可以使用它们的nam有来访问alert(document.formName.textInput.value);Form对象相关事件及方法当表单提交时会发生submit事件，我们可以设置事件监听，当用户提交表单时检查表单内容。同时，如果用户输入有误，要阻止表单提交，可以在事件处理函数里return false就行了，当正确时可以调用表单的submit方法提交表单，使用表单的submit方法时不会执行submit事件处理函数document.formName.onsubmit = function () /检查表单if (result) this.submit(); else return false;当表单被重置时会发生reset事件，但这个事件意义不大，因为reset按钮本身意义就不大。同时也有一个reset方法document.formName.onreset = function () if (confirm(您真的要重置表单吗？) this.reset(); else return false;表单元素单选按钮与复选框单选按钮与复选框有个共同的属性checked，指明该按钮是否被选中。而不同的是，往往多个单选按钮使用同一个name来分到相同的组，且只能有一个被选中，那么，使用这个name访问它时，由于多个按钮使用同一个名字，它会返回一个数组，而当只有一个时（事实不存在单选按钮只有一个单独存在的情况），它又会返回这个元素var radios = document.formName.radios;/页面中多个单选按钮name为radiosalert(radios.length);/返回一个元素列表var one = document.formName.one;/只有一个alert(one.checked);/只返回这个元素与checked类似的，它们还有个defaultChecked属性，返回是否是在HTML指定默认选中的单行文本框与多行文本框单行文本框即type属性设为text的input标签，多行文本框即textarea，它们除了与其它input标签一样具有的value属性处，还具有defaultValue属性表示文本框中的默认文本，即在HTML里所指定的value值的文本框还有一个方法：select,可以使文本框中的文字呈选中状态。Select对象表单元素中最复杂的就算是select对象了。select是一复合对象，它包含option标签，也有可能包含optgroup标签。虽然select可以多选，但我们这里只讨论单选的，多选的类似！/首先，获取select对象也是通过name（当然ID仍然有效，但name更快捷）var select = document.formName.mySel;/要获取用户选中了第几项，可以使用它的selectedIndexalert(select.selectedIndex);/这个索引号是从0开始的/select对象有个options伪数组类型的属性，包含了所有的option，可以使用下标来访问alert(select.optionsselect.selectedIndex.value);/输出选中项的alert(select.optionsselect.selectedIndex.text);/text属性是option包含的文本/本来需要知道select里面有多少个option，可以通过options.length/但HTML DOM为select对象也提供了length属性alert(select.length);/输出和options.length一样获取选中项的值var mySel = document.formName.mySel;alert(mySel.optionsmySel.selectedIndex.value);/更快捷的方法alert(mySel.value);而向select对象中添加option，本可以使用document.createElement及appendChild等方法的，但HTML DOM为我们提供了更方便的方法了var opt = new Option(新增选项文本,选项值);/document.createElement(option);var select = document.formName.mySel;select.add(opt,select.options0);/将opt添加到第一个option的后面select.add(opt);/在IE下，没有第二个参数时，会将opt添加到最后/上面的代码在FF下会出错，必须使用下面的方法select.add(opt,null);/但这在IE会出错/下面的方法可以两全了,但长了一点select.add(opt,select.optionsselect.length-1);/删除option的方法removeselect.remove(1);/remove接收参数为要移除options数组最特殊的一个地方在于它和真正的数组十分相似，可以设置它的length来减少元素，也可以直接将元素赋给某项来修改var opts = document.formName.mySel.options;opts0=new Option(Text,Value);opts.length=2;/将移去第三个之后的optionopts3=new Options(ABC,123);/自动添加一个元素Option对象也有defaultSelected属性返回在HTML里指定是否是默认选中项表单元素特性事件当表单控件失去焦点时会触发blur事件，当控件获得焦点时又会触发focus事件。与之对应，blur方法将使表单控件失去焦点，focus方法将使控件获得焦点，与Form对象的submit方法一样，使用JavaScript执行blur方法与