javascript表单操作.docx

javascript表单操作.docx

《javascript表单操作.docx》由会员分享，可在线阅读，更多相关《javascript表单操作.docx（12页珍藏版）》请在冰豆网上搜索。

javascript表单操作

1.在HTML中，每一个表单看成是一个Form对象。

每对

2.Form对象的属性：

属性名

说明

Action

用于表示将表单提交到那个文档中。

Elements

返回表单中的对象所构成的数组

Id

用于表示form对象的id

Length

用于表示表单中对象的个数，相当于elements[]的长度

Method

用于表示表单的提交方式

Name

用于表示form对象的名称

Target

用于表示表单数据提交方式目标窗口

3.form对象的方法：

from对象的方法只有两个，分别为reset（）方法和submit（）

reset（）方法用于重置表单，submit（）方法用于提交表单。

From对象的事件也只有两个，一个是reset事件，另一个是submit事件，其中，reset事件在重置表单时激活，submit事件在提交表单时激活。

通常这两个事件用于接收一个布尔型，如果布尔值为true，则重置或提交表单，如果该布尔值为false，则取消重置或取消提交表单。

4.确认提交和重置数据

'）"onReset="returnconfirm（'你确定要清除表单内容吗？

'）">

5.将表单提交到不同的地方

//------script部分------

functionsendpage（）

{

form1.action="FrameTop.htm"

form1.submit（）;

alert（"successful"）;

}

functionsendemail（）

{

form1.action="mailto:

zl8happy@";

form1.encoding="multipart/form-data";

form1.submit（）;

}

auto;"onLoad="randoimage（）">

//----Body部分！

----

姓名：

6.表单控件元素

6.1单行文本

1）Name:

名称

2）Value:

初始值

3）Size:

宽度

4）Maxlength：

最大文字输入数

6.2多行文本

1）Rows:

文本框的高度

2）Cols:

文本框的宽度

6.3密码框

上面三种都算是文本框对象，属性：

属性名

说明

accessKey

用于表示访问文本框的快捷键，该属性右input或textarea元素的accessKey属性值决定

defaultValue

表示文本框的默认值，对于单行文本框和密码框而言，该属性由input的value属性确定，对于多行文本框而言，该属性的初始值由中的文本决定

Disable

用于表示文本框是否被禁用，该属性为布尔值

readOnly

用于表示文本框是否为只读，该属性为布尔型

tabIndex

用于表示文本框的tab顺序索引

文本框对象的方法：

方法名

说明

Blur（）

将焦点从文本框中移开

Click（）

模拟文本框被鼠标点击

Focus（）

使文本框得到焦点

Select（）

选中文本框中的文字

文本框的事件：

事件

说明

Blur

失去焦点

Change

文本框文字改变

Click

鼠标点击文本框

Dblclick

鼠标双击

Focus

获得焦点

Keydown

Keypress

Keyup

Mousedown

Mousemove

Mouseout

Mouseup

Select

当文本框中的文字被选中并失去焦点时

Selectstart

当文本框中的文字被选中时

6.4单选框

Text

1）Checked:

用户设定是否被选中，默认为false

2）Name:

单选框的名称，用于设定属于哪一个单选框组

3）Text：

显示在单选框后的文字

4）Name相同的单选框作为一组，一组中只能有一个被选中

Text

tt

ta

gg

6.5复选框

Text

6.6下拉列表框

//

Text

you

1）Size:

在下拉框中可以同时显示的项目个数，默认值为1

2）Value：

下拉列表框中选项的值

3）Text:

显示在下拉列表框选项上的文字

4）Multip：

没有这个，就是下拉框，如果加了这个，就变成了列表框了，可以实现多选，如下图：

下拉列表框对象的方法：

Select对象中使用最多的方法是remove（）方法，该方法可以删除下拉列表框中的选项。

动态选择：

//------script部分------

functionaddOption（）

{

varindex=form1.selectfrom.selectedIndex;

if（false）

{

if（form1.selectto.length<3）

{

varoptionText=form1.selectfrom.options[index].text;

varoptionvalue=form1.selectform.options[index].value;

form1.selectto.options[from1.selectto.length]=newOption（optionText,optionvalue）;

form1.selectfrom.remove（index）;

}

else

{

alert（"最多只能选择3门"）

}

}

}

functiondelOption（）

{

varindex=form1.selectto.selectedIndex;

if（index>-1）

{

varoptiontext=from1.selectto.options[index].text;

varoptionvalue=from1.selectto.options[index].value;

from1.selectfrom.options[form1.selectfrom.length]=newOption（optiontext,optionvalue）;

from1.selectro.remove（index）;

}

}

auto;">

//----Body部分！

----

可选课程：

语文

数学

英语

物理

化学

政治

生物

音乐

--->

<---

二级联动：

运行结果：

Option的属性：

属性名

说明

defaultSelected

用于表示在默认情况下，该选项是否处于被选中状态，为布尔型

Index

用于表示当前选项在option[]中的位置

Selected

用于表示该选项是否被选中

Text

用于表示当前选中中的文字

Value

用于表示当前选项的值

document.form1.Select.options[4]=newOption（text,value）;

向下拉列表中添加值

6.7文件选中框

1）name：

名字

2）size：

文件选中框的文本框的宽度

文件选择框使用最多的方法是click（）方法，onchange事件也是经常使用的事件。

效果是：

每次更改了图片的链接，就显示出来。

6.8分组元素

分组元素可以将表单中的元素进行分组，将在浏览器窗口中使用一个方框将同一组中的表单控件对象框在一起。