JavaScript表单

《JavaScript表单》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、表单大多数Web页面与用户之间的交互都发生在表单中，表单中有许多交互式HTML元素如：文本域，按钮，复选框，下拉列表等。从文档对象层次图中可以看到，表单是包含在文档中的，所以要访问表单，仍然需要通过document对象来访问Form对象表单就是指的form标签及其里面的内容，要获取一个表单对象，可以给某个form标签加个id属性，然后使用document.getElementById方法获得。也可以使用document.getElementsByTagName("form")来获取所有表单的集合，然后通过下标来访问。还可以给

2、form标签加个name属性，然后可以使用document.getElementsByTagName来访问，注意，同样要使用下标来访问事实上，0级DOM（0级DOM并不是任何DOM规范，事实上它是BOM的内容，但浏览器都实现的比较好）为我们提供了更简单的访问From对象的方法——使用document.formNamevarfm=document.formName;//可以这样来直接引用该表单对象//与document.getElementsByTagName("form

3、")相对应有document.forms集合varfm=document.forms[0];//获取第一个Form对象访问表单元素Form对象有个elements属性，包是一个含了form标签里面的所有表单控件（input,select等标签，但不包含如div之类的标签）的伪数组varfm=document.forms[0];alert(fm.elements.length);//length属性报告了元素的个数在之前，访问input这类标签和访问其它标签没什么区别，可以使用ID，也可以使用className,但当它们在表单

4、中时，可以使用它们的nam有来访问alert(document.formName.textInput.value);Form对象相关事件及方法当表单提交时会发生submit事件，我们可以设置事件监听，当用户提交表单时检查表单内容。同时，如果用户输入有误，要阻止表单提交，可以在事件处理函数里returnfalse就行了，当正确时可以调用表单的submit方法提交表单，使用表单的su

5、bmit方法时不会执行submit事件处理函数document.formName.onsubmit=function(){//检查表单if(result){this.submit();}else{returnfalse;}};当表单被重置时会发生reset事件，但这个事件意义不大，因为reset按钮本身意义就不大。同时也有一个reset方法document.formName.onreset=function(){if(confirm("您真的要重置表单吗？")){this.reset();}else{returnfalse;

6、}};表单元素单选按钮与复选框单选按钮与复选框有个共同的属性——checked，指明该按钮是否被选中。而不同的是，往往多个单选按钮使用同一个name来分到相同的组，且只能有一个被选中，那么，使用这个name访问它时，由于多个按钮使用同一个名字，它会返回一个数组，而当只有一个时（事实不存在单选按钮只有一个单独存在的情况），它又会返回这个元素varradios=document.formName.radios;//页面中多个单选按钮name为radiosalert(radios.length);//返回一个元素列表varone=

7、document.formName.one;//只有一个alert(one.checked);//只返回这个元素与checked类似的，它们还有个defaultChecked属性，返回是否是在HTML指定默认选中的单行文本框与多行文本框单行文本框即type属性设为text的input标签，多行文本框即textarea，它们除了与其它input标签一样具有的value属性处，还具有defaultValue属性表示文本框中的默认文本，即在HTML里所指定的value值的文本框还有一个方法：select,可以使文本框中的文字呈选中

8、状态。Select对象表单元素中最复杂的就算是select对象了。select是一复合对象，它包含option标签，也有可能包含optgroup标签。虽然select可以多选，但我们这里只讨论单选的，多选的类似！//首先，获取select对象也是通过name（当然ID仍然有效，但name更