JavaScript中的表单操作

所有用于交互操作的HTML元素都应该放在HTML表单中form。

1 HTML表单

<form  name=””;action=””;method=””;target=””;>

</form>

·action属性确定把表单提交到什么地方；

·method属性确定如何提交信息；

·target属性确定将表单的响应加载到那个框架上；

（客户端脚本编程通常不需要给服务器提交信息，所以就不用上面的属性）

通过form对象访问form表单的方法：

第一种：直接使用它的name访问它，document.name属性值；

第二种：通过forms集合，像使用数组集合的形式操作它，document.forms[0]；

（获取HTML页面的forms集合，通过索引使用特定的form）

2 form对象的其他属性和方法

表单对象中也有对象，访问这些对象的方法可以通过form的elements属性，element也是集合，它包含form对应html元素的所有对象，这个属性非常适合遍历表单中的每个元素。（在提交表单之前，可以遍历每个元素，以便检查表单是否包含必要的数据）

注意：

1. form的length属性和它的elements属性的length属性实现效果一样；

2. submit按钮向服务器提交表单数据；form对象的submit（）方法作用与submit按钮相似，使用submit（）方法提交表单，不会触发from对象的submit事件，也不会调用onsubmit事件处理程序；

2.1 表单中的HTML元素

form元素中的常见元素：

input element：text、password、textarea；

box element：checkbox、radio；

select element：select option、select list；

buttons：button、submit、reset；

2.2 表单元素共有的属性和方法

1.name属性：在js中，可以通过name属性引用元素。如果表单中的信息提交给服务器，元素的name属性将和元素的值一起发送，告知服务器值与元素的对应关系；

2.value属性：返回元素的值；

3.form属性：返回包含当前对象的form对象；

4.type属性：返回元素的类型；

5.focus（）和blur（）方法：元素获得焦点focus（），用户按下的任何键就会直接传递给元素。失去焦点blur（）；

  onfocus和onblur事件处理程序，当元素获得focus（）和blur（）方法时，就会触发这两个事件处理程序。

  form对象的submit（）方法作用与submit按钮相似，使用submit（）方法提交表单，不会触发from对象的submit事件，也不会调用onsubmit事件处理程序；

2.3 按钮元素

<input type=”button”onclick=”click事件函数”/>

1. onclick事件处理程序：在表单下的元素获取方法是操作中的难点；

2. onmouseup和onmousedown事件处理程序：按钮被按下，和按钮抬起来，注意：对象都是这个按钮，也就是说，你按下这个按钮就会触发onmousedown，你在按钮上抬起来就触发onmouseup，当你在按钮上按下后不放，在按钮之外放开，那么你就没有触发mouseup事件，onmouseup事件处理程序就不会触发。

3. submit和reset按钮：这两个按钮有特定的用途，不需要编写js脚本。他们都有各自的对象。

单击submit按钮，按钮所在表单的数据将通过action等属性自动提交给目标服务器，无需编写任何脚本；

单击reset按钮，会清空所在表单的所有元素，并重置为表单初始状态；

2.4 文本元素

1. 文本框

<input  type=”text”  name=””  size=””  maxlength=””  value=””/>

·size字符宽度；

·maxlength用户在文本框中可输入的最大字符数；

·value返回的值是字符串类型；

·parseInt（）、parseFloat（）、Number（）转换字符类型；

（js会根据操作对字符的要求，自动或不转化字符类型）

·onfocus和onblur事件处理程序

·onchange、onselect、onkeydown、onkeypress、onkeyup事件处理程序

onchange当前文本框失去焦点的值不同于他获得焦点时的值，才触发该事件。当且仅当文本框的值发生变化时才检查其有效性。

onselect用户选择文本框中的文本；

input元素的readonly属性和text对象的readOnly属性，防止修改文本框内容；

onkeypress按键时，onkeydown键按下，onkeyup键被释放；

2. 密码文本框

<input  type=”password”>

这只是在输入显示上保密，在向服务器发送数据时是明文发送的，没有加密。

3. 隐藏文本框

<input  type=”hidden”>

普通文本框相似，只是不可见，实际上很有用，隐藏文本框会创建hidden对象，用户提交数据时也会提交隐藏文本框的数据。

（多个页面获取表单数据信息，最后统一提交，前面的表单可以隐藏）

4. textarea元素

<textarea clos=””  rows=”” ><textarea>

·clos文本字符宽度

·rows文本字符行数

·wrap属性文本换行soft和hard

（textarea元素没有value属性，但是textarea对象有value属性）

5. 复选框和单选按钮

<input  type=”checkbox”  checked=”checked”>

<input  ytpe=”radio”>

·checked属性，默认复选框选中状态checked，返回true或false；

·单选按钮是以组的形式使用的，给多个单选按钮设置同一个name属性，则可以通过对象数组的方式使用它们。（一组单选按钮只能有一个拥有checked，多个默认最后一个）；

6. 选择框

下拉列表和列表框：size的值为1就是下拉列表

<slect  size=”” multiple=””><option  selected=””></option></select>

·select对象的属性

size属性控制显示的option个数；

selected属性设置默认选中的option；

multiple属性控制选中多个的option；

select元素会创建一个select对象，这个对象有一个集合属性options，它由所有的option对象组成。

selectedIndex属性，返回选中对象的索引值，结合options集合就可以访问选中项；

length属性返回select对象的option的个数，也可以通过options集合的length属性返回个数；

（在访问元素对象的时候，通过name的方式必须层层深入，不可遗漏）

·option对象的属性

index属性返回选项在options的索引，和select的功能类似，不过所属对象不同；

text属性返回选项中的内容；

value属性返回选项中定义的value值，在提交表单时，会传给服务器；