JavaScript表单编程
表单是Web上与用户进行交互的主要界面。则我们需要掌握如何访问用户输入的表单数据，校验用户输入的正确性显得至关重要。
♞ 对Form元素进行脚本编写
✍ 获取表单的应用
➣ 使用DOM树中定位一个元素的方法——getElementById()方法，并将表单的ID作为方法的参数；
var objForm = document.getElementById("form");
➣ 使用文档的表单集合，并且通过表单在forms集合中的位置或者通过其name属性；
var objForm = document.forms[0]; //不用下标就是获得表单集合 var objForm = document.forms["name"];//得到名为name的表单
✍ 获取表单的字段
每个表单字段都包含在表单的elements集合中，我们可以通过使用表单元素的name属性或者它在集合的位置，访问集合中的不同字段；
➣ 通过它在集合的位置访问集合中字段；
var temp=oform.elements[0]; //得到表单第一个字段。
➣ 使用表单元素的name属性访问集合中字段；
对该方法传入name属性的字符串；
var temp=oform.elements["text"]; //得到名为text1的字段。
每个表单字段称为表单本事的一个属性，可以直接通过其名称访；
var temp=oform.textbox1; //得到名为textbox1的字段。
如果名称中间有空格，可以用中括号代替；
var temp=oform["text box 1"]; //得到名为text box 1的字段。
✍ 表单字段元素对象
➣ form表单字段元素对象的方法
|
方法 |
描述 |
|
blur() |
让表单字段元素失去焦点，当前焦点移到后台 |
|
focus() |
让表单字段元素获得焦点 |
|
click() |
模仿用户鼠标单击该元素的过程 |
|
setCapture() |
在某个表单字段元素对象上捕获当前网页文档上的鼠标事件 |
|
releaseCapture() |
取消某个表单字段元素对象对当前网页文档鼠标事件的捕获设置 |
|
add() |
为列表框（select）增加一个选择项(option) |
➣ form表单字段元素对象的属性
|
属性 |
描述 |
|
defaultValue |
设置或返回表单字段元素的默认值（初始值） |
|
disabled |
设置或返回文本输入框的disabled状态；该属性用于指示一个表单控件是否可用，一个disable控件不允许用户输入 |
|
form |
返回表单字段元素所属于form表单对象 |
|
readOnly |
设置或返回文本输入框的readonly状态 |
|
title |
设置或返回表单字段元素title属性 |
|
value |
设置或返回表单字段元素的当前取值 |
|
checked |
设置或返回单选按钮、复选按钮的选中状态 |
➣ form表单字段元素对象的事件
|
事件 |
描述 |
|
onChange |
当焦点离开文本输入框且文本输入框中的值改变时，或者改变列表框的选择结果后，产生该事件 |
|
onSelect |
当单行或多行文本输入框中的文字被选择加亮后，产生该事件 |
|
onFocus |
当表单字段获得焦点时，产生该事件 |
|
onBlur |
当表单字段元素失去焦点时，产生该事件 |
✍ 表单的提交和重置
➣ 使用一个提交按钮或者模拟提交按钮的图形来提交/重置表单
<input type="submit" value="Submit"/> //submit按钮提交表单 <input type="image" value="submit.gif"/> //image按钮提交表单 <button type="submit">Submit</button> //submit按钮提交表单 <input type="reset" value="Reset"/> //reset按钮重置表单 <button type="reset">Reset</button> //reset按钮重置表单
➣ 使用submit()方法或者reset()方法提交/重置表单
得到表单引用后，直接调用submit()方法或者reset()方法
oForm.submit(); //oForm表单提交 oForm.reset(); //oForm表单重置
♞ 对文本框元素进行脚本编写
✍ 获取/更改文本框的值
对于标签<input/>和<textarea/>都支持同样的属性value，以获取文本框中的文本；使用value属性返回String类型的文本内容；
✍ 选择文本
两种类型的文本框都支持select()方法，该方法用于选择文本框中的所有文本。为使该方法起作用，文本框必须获得焦点。为确保文本框获得焦点，我们必须在调用select()方法之前，调用另外一个方法focus();
✍ 文本框事件
两种文本框都支持blur、focus、change和select事件。
➣ change事件——在用户改变文本框的值之后，当文本框失去焦点时触发该事件。
（PS：通过设置value属性改变文本框的值时，不触发该事件）
➣ select事件——在一个或者多个字符被选中时触发事件；不管是手动选中还是使用select()方法。
➣ blur事件——当文本框失去焦点时触发事件；
（PS：blur事件和change事件都是在文本框失去焦点后触发，但是change事件是在文本框的值被改变的情况下才会触发，如果没有改变时只触发blur事件；改变时则先触发change事件，随后再执行blur事件）；
➣ focus事件——当文本框获得焦点时触发事件；
♞ 对列表框和组合框进行脚本编写
✍ 访问选项
HTML DOM将select元素中的每一项定义到一个options集合中，该集合中列出select控件中的所有option元素。
|
属性 |
描述 |
|
id |
设置或返回选项的 id。 |
|
index |
返回下拉列表中某个选项的索引位置。 |
|
label |
设置或返回选项的标记 （仅用于选项组）。 |
|
selected |
设置或返回 selected 属性的值。 |
|
text |
设置或返回某个选项的纯文本值。 |
|
value |
设置或返回被送往服务器的值。 |
✍ 添加选项
很多时候，列表框或者组合的选项数据，是来自于后台数据服务器或者其它数据文件，那么我们就不能在XHTML中指定选项，必须使用JavaScript编码动态地将数据项添加到select元素中，按照以下步骤将选项动态添加到select元素中：
Ⅰ 定义一个带三个参数的方法，这三个参数分别是要添加选项的列表值、要添加的选项的名称以及要添加的选项的值；
Ⅱ 使用DOM方法创建一个option元素，然后创建一个文本节点分配给选项的名称；
Ⅲ 设置option元素的value属性；
Ⅳ 通过appendChild()方法，将新选项添加到select元素中;
ListUtil.add = function(oList, sName, sValue){ var option = document.creatElement("option"); option.appendChild(document.creatTextNode(sName)); if(arguments.length == 3){ option.setAttribute("value",sValue); } oList.appendChild(potion); }
✍ 删除选项
删除选项的方法有两种，一种是使用DOM提供的功能，一种是使用HTML DOM提供的功能
➣ BOM：使用options集合，将要移除的选项设置为null；
oList.options[0] = null;
➣ HTML DOM:使用select元素的remove()方法，将要删除的选项的索引传递给remove()方法；
oList.remove(0);
✍ 移动选项
使用DOM的appendChild()方法，可以从第一个列表框中把元素移动选项到第二个列表框中。如果我们传递一个文档中的一个元素到appendChild()方法，该元素就会从它的父元素中移除，并且放在指定位置。
♞ 对复选框和单选框进行脚本编写
|
属性/方法 |
描述 |
|
checked |
布尔值，指示控件状态 |
|
defaultChecked |
布尔值，指示页面加载时控件是否被选中 |
|
click() |
模仿按钮点击，改变控件状态，对应的事件onclick |