# 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 ``` <form name="formName"></form> var fm = document.formName;//可以这样来直接引用该表单对象 //与document.getElementsByTagName("form")相对应有document.forms集合 var fm = document.forms[0];//获取第一个Form对象 ``` ### 访问表单元素 Form对象有个elements属性，包是一个含了form标签里面的所有表单控件（input,select等标签，但不包含如div之类的标签）的伪数组 ``` var fm = document.forms[0]; alert(fm.elements.length);//length属性报告了元素的个数 ``` 在之前，访问input这类标签和访问其它标签没什么区别，可以使用ID，也可以使用className,但当它们在表单中时，可以使用它们的nam有来访问 ``` <form name="formName"> <input name="textInput" type="text" value="文本框" /> </form> 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为radios alert(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; //要获取用户选中了第几项，可以使用它的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，本可以使用document.createElement及appendChild等方法的，但HTML DOM为我们提供了更方便的方法了 ``` 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接收参数为要移除 ``` options数组最特殊的一个地方在于它和真正的数组十分相似，可以设置它的length来减少元素，也可以直接将元素赋给某项来修改 ``` var opts = document.formName.mySel.options; opts[0]=new Option("Text","Value"); opts.length=2;//将移去第三个之后的option opts[3]=new Options("ABC",123);//自动添加一个元素 ``` Option对象也有defaultSelected属性返回在HTML里指定是否是默认选中项 ## 表单元素特性事件 当表单控件失去焦点时会触发blur事件，当控件获得焦点时又会触发focus事件。与之对应，blur方法将使表单控件失去焦点，focus方法将使控件获得焦点，与Form对象的submit方法一样，使用JavaScript执行blur方法与focus方法并不会触发相关事件监听函数 select对象的change事件：当用户选中一个选项，或者取消了对一个选项的选定时，就会发生change事件。 textarea对象的change事件：当用户改变文本区域的值然后通过把键盘焦点移动到其他地方“确认”这些改变的时候，发生change事件。 select事件：当文本框中的文本被选中时发生