javascript--操作表单，表单解读

服务端程序必须要有一个提交按钮提交到服务器，客户端程序则可以不需要

服务端程序是基于表单提交动作－－按照表单大小块处理数据，但是限制了交互性

客户端程序基于事件－－可以单独对表单元素作出响应，使其有更好恶毒响应度，例如用户打字校验有效性

 

15.9.1选取表单和表单元素

使用getElementById()或getElementByTagName()

在支持querySelectorAll（）的浏览器中选取所有同名的元素

document.querySelectorAll(‘#shipping input[type=“radio”]’)

//表示选取id为shiping的表单中所有的单选按钮

document.querySelectorAll(‘#shiping input[type=“radio”][name=“method”]’)

//选取id为shipping的表单中所有名为method的单选按钮

获取表单：

其中name＝address

window.address／／不推荐

document.address//仅当name为address的时候使用

document.forms.address//显示反问name或id为address的表单

document.forms[n]//不推荐

 

获取表单元素：

document.forms表单对象是一个多个HTMLCollection对象，可以通过name或者数字索引获取表单元素，Forms对象本身类似于多个表单元素的HTMLCollection集合，所以也可以用 name或者数字序号索引

 

document.forms.address[0]//获取表单名为address的第一个表单元素

document.forms.address.street

document.address.street //  要有name＝address，不是只有id＝address

 

选取一个元素

document.forms.elements[0]

document.forms.address.elements.street

 

15.9.2表单和元素的属性

form：对包含元素的form对象的只读属性，如果元素没有包含在<form>中，其值为null

value：针对textarea，该属性包含了用户输入的文本，针对input创建的按钮（非button创建），该属性指定了按钮显示文本，针对单选和复选，该属性用户不可见也不可编辑，仅仅是html的value属性来设置字符串

 

15.9.3 表单和元素的事件处理

每个form都有一个onsubmit事件侦测表单提交以及onset侦测表单重置。

表单提交前通过false，取消表单提交默认动作，给一个机会检查用户输入错误

注意：onsubmit只通过按提交按钮触发，直接调用表单submit（）方法不触发。

一般使用按钮触发的是click事件，其余的表单元素是change事件

注意：在一个文本域中不是用户每输入一个键值都触发一次事件，而是用户改变元素后焦点离开文本域移到其他元素上时才触发。单选和复选都有一个表示状态，click和change事件都会触发，但是change更有用。

<form>表单元素中都有form属性，所以可以通过this.form来得到Form对象的引用，进一步，意味着某个表单元素的事件处理程序能够通过this.form.x得到x命名的元素－－>this.form.x = document.forms.表单名.x

 

15.9.4按钮

超链接与按钮一样提供onclick事件。当onclick事件触发的动作可以当作“跟随此链接时”就用作为链接，否则就是按钮

提交和重置都是按钮，不同的是默认动作不同。如果onclick事件返回false，就不执行默认行为，进行表单验证，但是更为常用的是通过表单本身的onsubmit事件执行表单验证

 

15.9.5开关按钮

单选和复选是开关按钮。

单选中name属性相同，为整组有相关性的设计。

复选框通常也是使用共享name，当使用表单名字来选中这些这些元素，返回一个类数组对象