javascript快速入门15—表单

大多数Web页面与用户之间的交互都发生在表单中,表单中有许多交互式HTML元素如:文本域,按钮,复选框,下拉列表等。从文档对象层次图中可以看到,表单是包含在文档中的,所以要访问表单,仍然需要通过document对象来访问

Form对象

表单就是指的form标签及其里面的内容,要获取一个表单对象,可以给某个form标签加个id属性,然后使用document.getElementById方法获得。也可以使用document.getElementsByTagName("form")来获取所有表单的集合,然后通过下标来访问。还可以给form标签加个name属性,然后可以使用document.getElementsByTagName来访问,注意,同样要使用下标来访问

事实上,0级DOM(0级DOM并不是任何DOM规范,事实上它是BOM的内容,但浏览器都实现的比较好)为我们提供了更简单的访问From对象的方法——使用document.formName

  1. <formname="formName"></form> var fm = document.formName;//可以这样来直接引用该表单对象
  2. //与document.getElementsByTagName("form")相对应有document.forms集合
  3. var fm = document.forms[0];//获取第一个Form对象

访问表单元素

Form对象有个elements属性,包是一个含了form标签里面的所有表单控件(input,select等标签,但不包含如div之类的标签)的伪数组

  1. var fm = document.forms[0];
  2. alert(fm.elements.length);//length属性报告了元素的个数

在之前,访问input这类标签和访问其它标签没什么区别,可以使用ID,也可以使用className,但当它们在表单中时,可以使用它们的nam有来访问

  1. <formname="formName">
  2. <inputname="textInput"type="text"value="文本框"/>
  3. </form> alert(document.formName.textInput.value);

Form对象相关事件及方法

当表单提交时会发生submit事件,我们可以设置事件监听,当用户提交表单时检查表单内容。同时,如果用户输入有误,要阻止表单提交,可以在事件处理函数里return false就行了,当正确时可以调用表单的submit方法提交表单,使用表单的submit方法时不会执行submit事件处理函数

  1. document.formName.onsubmit =function(){//检查表单
  2. if(result){this.submit();
  3. }else{returnfalse;
  4. }
  5. };

当表单被重置时会发生reset事件,但这个事件意义不大,因为reset按钮本身意义就不大。同时也有一个reset方法

  1. document.formName.onreset =function(){if(confirm("您真的要重置表单吗?")){this.reset();
  2. }else{returnfalse;
  3. }
  4. };

表单元素

单选按钮与复选框

单选按钮与复选框有个共同的属性——checked,指明该按钮是否被选中。而不同的是,往往多个单选按钮使用同一个name来分到相同的组,且只能有一个被选中,那么,使用这个name访问它时,由于多个按钮使用同一个名字,它会返回一个数组,而当只有一个时(事实不存在单选按钮只有一个单独存在的情况),它又会返回这个元素

  1. var radios = document.formName.radios;//页面中多个单选按钮name为radios
  2. alert(radios.length);//返回一个元素列表
  3. var one = document.formName.one;//只有一个
  4. alert(one.checked);//只返回这个元素

与checked类似的,它们还有个defaultChecked属性,返回是否是在HTML指定默认选中的

单行文本框与多行文本框

单行文本框即type属性设为text的input标签,多行文本框即textarea,它们除了与其它input标签一样具有的value属性处,还具有defaultValue属性表示文本框中的默认文本,即在HTML里所指定的value值的

文本框还有一个方法:select,可以使文本框中的文字呈选中状态。

Select对象

表单元素中最复杂的就算是select对象了。select是一复合对象,它包含option标签,也有可能包含optgroup标签。虽然select可以多选,但我们这里只讨论单选的,多选的类似!

  1. //首先,获取select对象也是通过name(当然ID仍然有效,但name更快捷)
  2. varselect= document.formName.mySel;//要获取用户选中了第几项,可以使用它的selectedIndex
  3. alert(select.selectedIndex);//这个索引号是从0开始的
  4. //select对象有个options伪数组类型的属性,包含了所有的option,可以使用下标来访问
  5. alert(select.options[select.selectedIndex].value);//输出选中项的
  6. alert(select.options[select.selectedIndex].text);//text属性是option包含的文本
  7. //本来需要知道select里面有多少个option,可以通过options.length
  8. //但HTML DOM为select对象也提供了length属性
  9. alert(select.length);//输出和options.length一样

获取选中项的值

  1. var mySel = document.formName.mySel;
  2. alert(mySel.options[mySel.selectedIndex].value);//更快捷的方法
  3. alert(mySel.value);

而向select对象中添加option,本可以使用document.createElement及appendChild等方法的,但HTML DOM为我们提供了更方便的方法了

  1. var opt =newOption("新增选项文本","选项值");//document.createElement("option");
  2. varselect= document.formName.mySel;
  3. select.add(opt,select.options[0]);//将opt添加到第一个option的后面
  4. select.add(opt);//在IE下,没有第二个参数时,会将opt添加到最后
  5. //上面的代码在FF下会出错,必须使用下面的方法
  6. select.add(opt,null);//但这在IE会出错
  7. //下面的方法可以两全了,但长了一点
  8. select.add(opt,select.options[select.length-1]);//删除option的方法remove
  9. select.remove(1);//remove接收参数为要移除

options数组最特殊的一个地方在于它和真正的数组十分相似,可以设置它的length来减少元素,也可以直接将元素赋给某项来修改

  1. var opts = document.formName.mySel.options;
  2. opts[0]=newOption("Text","Value");
  3. opts.length=2;//将移去第三个之后的option
  4. opts[3]=newOptions("ABC",123);//自动添加一个元素

Option对象也有defaultSelected属性返回在HTML里指定是否是默认选中项

表单元素特性事件

当表单控件失去焦点时会触发blur事件,当控件获得焦点时又会触发focus事件。与之对应,blur方法将使表单控件失去焦点,focus方法将使控件获得焦点,与Form对象的submit方法一样,使用JavaScript执行blur方法与focus方法并不会触发相关事件监听函数

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

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

select事件:当文本框中的文本被选中时发生

原文: https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/81.html