JavaScript表单.doc

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

2、ent.getElementsByTagName来访问，注意，同样要使用下标来访问事实上，0 级 DOM（0 级 DOM并不是任何 DOM规范，事实上它是 BOM的内容，但浏览器都实现的比较好）为我们提供了更简单的访问 From对象的方法使用 document.formNamevar fm = document.formName;/可以这样来直接引用该表单对象/与 document.getElementsByTagName(“form“)相对应有document.forms 集合var fm = document.forms0;/获取第一个 Form 对象访问表单元素Form对象有个 elem

3、ents属性，包是一个含了 form标签里面的所有表单控件（input,select 等标签，但不包含如 div之类的标签）的伪数组var fm = document.forms0;alert(fm.elements.length);/length 属性报告了元素的个数在之前，访问 input这类标签和访问其它标签没什么区别，可以使用 ID，也可以使用 className,但当它们在表单中时，可以使用它们的 nam有来访问alert(document.formName.textInput.value);Form对象相关事件及方法当表单提交时会发生 submit事件，我们可以设置事件监听，当用户

4、提交表单时检查表单内容。同时，如果用户输入有误，要阻止表单提交，可以在事件处理函数里 return false就行了，当正确时可以调用表单的 submit方法提交表单，使用表单的 submit方法时不会执行 submit事件处理函数document.formName.onsubmit = function () /检查表单if (result) this.submit(); else return false;当表单被重置时会发生 reset事件，但这个事件意义不大，因为 reset按钮本身意义就不大。同时也有一个 reset方法document.formName.onreset = func

5、tion () if (confirm(“您真的要重置表单吗？“) this.reset(); else return false;表单元素单选按钮与复选框单选按钮与复选框有个共同的属性checked，指明该按钮是否被选中。而不同的是，往往多个单选按钮使用同一个 name来分到相同的组，且只能有一个被选中，那么，使用这个 name访问它时，由于多个按钮使用同一个名字，它会返回一个数组，而当只有一个时（事实不存在单选按钮只有一个单独存在的情况），它又会返回这个元素var radios = document.formName.radios;/页面中多个单选按钮 name 为 radiosalert

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

7、中的文字呈选中状态。Select对象表单元素中最复杂的就算是 select对象了。select 是一复合对象，它包含 option标签，也有可能包含 optgroup标签。虽然 select可以多选，但我们这里只讨论单选的，多选的类似！/首先，获取 select 对象也是通过 name（当然 ID 仍然有效，但 name 更快捷）var select = document.formName.mySel;/要获取用户选中了第几项，可以使用它的 selectedIndexalert(select.selectedIndex);/这个索引号是从 0 开始的/select 对象有个 options 伪

8、数组类型的属性，包含了所有的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 = d

9、ocument.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

10、.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数组最特殊的一个地方在于它和真正的数组十分相似，可

11、以设置它的 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方法与 focus方法并不会触发相关事件监听函数select对象的 change事件：当用户选中一个选项，或者取消了对一个选项的选定时，就会发生 change事件。textarea对象的 change事件：当用户改变文本区域的值然后通过把键盘焦点移动到其他地方“确认”这些改变的时候，发生 change事件。select事件：当文本框中的文本被选中时发生