JavaScript学习(7)利用表单获取数据

来源：互联网发布：网络安全法考试题库编辑：程序博客网时间：2024/05/16 04:52

1.HTML表单基础

<form>元素常用属性：

method 该属性可以是GET也可以是POST，这是向服务器传送数据的两种方式

action 是CGI脚本，表单数据在提交时被发送。也可以使用mailto：action把表单结果发给一个电子邮件地址

enctype 该属性表示向服务器发送数据时，数据使用的编码方式

accept 表示当文件上传时，列表服务器能正确处理的mime类型

select 定义组合框或者下拉列表框，里面的值<option>定义

textarea 定义多行文本框，其大小尺寸由rows和cols属性来设置

input HTML的输入元素，由type属性确定是哪种控件，其主要属性如下

button 用来产生自定义动作的一般按钮

submit 提交表单按钮

reset 重置表单按钮

hidden 随表单提交的数据，对用户不可见，没有事件处理程序

text 单行文本框

radio 单选文本框

checkbox 复选框

file 文本上传文本框

password 密码输入框

image 图像，与提交按钮功能一样

完整示例：

<span style="font-size: medium" id="" mce_style="font-size: medium;"><span style="font-size: medium" id="" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> HTML简单示例 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <fieldset> <form name = form1 action = "index.asp" method = post enctype = multipart/form-data> <table cellspacing = 10 cellpadding = 5 width = "75%" align = center border = 0> <tbody> <tr><td align = middle colSpan = 2>调查表</td></tr> <tr><td align = middle width = "14%">姓名</td> <td width = "86%"><input name = textfield></td></tr> <tr><td align = middle>密码</td> <td><input type = password name = textfield2></td></tr> <tr><td align = middle>性别</td> <td><input type = radio value = radiobutton name = radiobutton>男<input type = radio value = radiobutton name = radiobutton>女</td></tr> <tr><td align = middle>爱好</td> <td><input type = checkbox value = checkbox name = checkbox>电影 <input type = checkbox value = checkbox name = chechbox2>体育 <input type = checkbox value = checkbox name = chechbox3>集邮 <input type = checkbox value = checkbox name = chechbox4>游戏 <input type = checkbox value = checkbox name = chechbox5>计算机</td></tr> <tr><td align = middle>目前职业</td> <td><select name = select> <option value = 1 selected>学生</option> <option value = 2 >教师</option> <option value = 3 >军人</option> <option value = 4 >医生</option> <option value = 5 >城管</option> <tr><td align = middle>你的简历</td> <td><input type = file name = file></td></tr> <tr><td align = middle height = 16 >你的建议</td> <td><textarea name = textfield3 rows = 5 cols = 60></span></span>

2.在JavaScript中使用form对象

name 表单的名称

encoding MIME类型，用enctype属性定义

target 指定用来显示表单结果的窗口

reset() 将表单所有输入域置为默认值，无返回值

submit() 指定用来显示表单结果的窗口

2.1forms对象的属性方法

action 表单数据要发送到服务器的URL地址

elements 一个数组，存放表单中可访问的元素

length 表单中的元素数量，不可修改此属性
method 表单发送数据的方式，其值为get或post

name 表单的名称

encoding 变淡的MINE类型，用enctype定义

target 指定用来显示表单结果的窗口

reset() 将表单所有输入域重置为默认值，无返回值

submit() 提交表单，但不触发onsubmit事件

2.2获取表单

通常在document对象属性form[]数组元素中可以找到form对象。form对象总是按照它们在文档中出现的顺序存放的。如果要获取页面文档中的第n个表单，可以使用如下代码：

var oform =document.form[n-1]；

相应的，document中的form对象还可以通过其表单名字获取，如下：

var oform = document.form["formName"];

在DOM中，还可以使用典型的DOM定位元素的getElementByid()，它只要有传入的表单id即可，如下：

var oform = document.getElementById("form1");

2.3访问表单字段

每个表单的字段，如按钮、文本框、列表框或者其他内容，都包含在表单的element集合中，可以使用它们的name属性或是它们在集合中的位置来访问不同的字段。

var ofirstField = oform.element[0]；

var ofirstField = oform.element["textbox1"];

var ofirstField = oform.textbox1;

除了隐藏字段外，其他所有字段都包含有相同的属性、方法和事件，如下：

disable 该属性用来获取或者设置表单控件是否被禁用

form 该属性用来指向字段所在的表单

blur() 该方法可以使表单字段失去焦点

focus() 该方法可以使表单字段获取焦点

当字段失去焦点时，发生blur()事件，执行onblur事件处理函数；当字段获取焦点时，发生focus事件，执行onfocus事件。

3.用表单输入域

3.1使用单行文本框

假设form1是单行文本框所在表单的名称；textbox1是单行文本框的名称，获取文本框的输入值可以采取以下方式：

document.form1.textbox1.value;

document.forms[i].textbox1.value;

document.forms[i].element[j].value;

document.form1.element[j].value;

text对象常用属性

defaultValue 字符串，<input>标记中value属性指定的值

Form 单行文本框所在表单的名称

Name 单行文本框的名称

Size 单行文本框的宽度

type 单行文本框的类型

value 输入域元素的值

示例

<span style="font-size: medium" id="" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD><mce:script type="text/javascript"></mce:script> <BODY> <form name = "form1"> <input type = "text" name ="text1" value ="文本框"> <input type = "text" name = "text2"><br> <input type = "button" value = "显示第一个单行文本框属性" onclick = "show();"> </form> </BODY></HTML></span>

3.2使用密码框

密码框与文本框非常相似，不同的是密码框不管用户输入了什么都只显示星号。在下面的示例中，用户在单行文本框中输入用户名，在密码框中输入密码，当密码框失去焦点时，校验密码的有效性。密码正确时在对话框中显示“密码正确，请进”，否则显示“密码错误，请重新输入”。这只是一个演示功能，实际上验证密码往往在服务器上完成。

示例：

<span style="font-size: medium" id="" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD><mce:script type="text/javascript"></mce:script> <BODY bgcolor = RGB(100,100,255)> <h1 align = center>湖南大学教务系统<h3>（山寨版）</h3></h1> <p align = center> <img src = "湖南大学.jpg" width = "300"> <form name = "form1"> 用户：<input type = "text" name = "user" size = "20"><input type = "button" name = "btn_ok" value = "确定" onclick = "identify();"><br> 密码：<input type = "password" name = "code" size = "21"><input type = "button" name = "btn_reset" value = "重置" onclick = "reset();"><br> </p> </BODY></HTML></span>

3.3使用多行文本框

多行文本框也称作文本区域，它对应于HTML的<textarea>标记。与text对象一样，textarea对象也有一组属性、方法和事件。

form 多行文本框所在表单的名称

name 多行文本框的名称

type 多行文本框的类型，为textarea

value 文本区域的取值，为用户输入在该多行文本框中的文字

cols 文本区域的宽度，以字符为单位

rows 文本区域的行数

disabled 控制是否允许用户操作该输入域。true-允许，false-不允许

readonly 指定多行文本框是否为只读。true-只读，false-可以输入和修改文字

<span style="font-size: medium" id="" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> 多行文本框 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD><mce:script type="text/javascript"></mce:script> <BODY bgcolor = "RGB(100, 100, 255)"> <center> <h1>诗词</h1><br> <form name = "poem"> <textarea name = "text" cols = "100" rows ="20" > 《念奴娇.赤壁怀古》作者：苏轼大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。 </span>

3.4使用单选按钮

通过单选按钮的名称属性区分单选按钮位于哪一个组中，同一组的单选按钮拥有相同的name属性。checked属性指定单选按钮是否被选中。单选按钮的对象是一个数组。单选按钮对应于HTML标记<input type = "radio">，在javascript中对象为radio。radio常用方法和时间与text相同。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> 单选按钮 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD><mce:script type="text/javascript"></mce:script> <BODY bgcolor ="RGB(100,100,255)"> <form name = "colortable"> <fieldset> <legend align = left>选择颜色</legend> <input type = "radio" name = "color" value ="RGB(255, 0, 0)" checked>红色<br> <input type = "radio" name = "color" value = "RGB(0, 255, 0)" >绿色<br> <input type = "radio" name = "color" value = "RGB(0, 0, 255)">蓝色<br> </fieldset> <input type = "button" value = "改变背景颜色" onclick = "chbgcolor();"> </form> </BODY></HTML>

3.5使用复选框

复选框的对象名称为checkbox，可以用<input>标签定义复选框。复选框只有一个方法：click()，它模拟复选框上的单击。它还有一个事件： onClick，只要复选框被单击，就发生该事件。不论复选框是被选中还是取消选中，需要通过检查checked属性来判断复选框的状态。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> 复选框 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"></mce:script> <BODY> <form name = "like"> 您的爱好是什么？（最多选三项）<br> <input type = "checkbox" name = "hobby" onclick = "three(0);">看书<br> <input type = "checkbox" name = "hobby" onclick = "three(1);">上网<br> <input type = "checkbox" name = "hobby" onclick = "three(2);">看电视<br> <input type = "checkbox" name = "hobby" onclick = "three(3);">下棋<br> <input type = "checkbox" name = "hobby" onclick = "three(4);">钓鱼<br> <input type = "checkbox" name = "hobby" onclick = "three(5);">打牌<br> <input type = "checkbox" name = "hobby" onclick = "three(6);">发呆<br> </form> </BODY></HTML>

3.6使用选择列表

选择列表既可以允许用户从中选择一项，也可以允许用户进行多项选择。<select>标签用于定义文本项目的选择列表。每个<option>标签都定义了一个可能的选项。value属性是返回到程序的名称，<option>之外的文本显示为该选项的文本。<select>标签还有一个可选属性-multiple，它可以指定允许选中多项。浏览器通常把菜单选项的<select>显示为下拉列表，把多项的列表显示为滚动列表。

form 选择列表所在表单的名称

name 选择列表的名称

type 定义<selected>标签默认type值为select-one，可改为select-multiple

length 指定列表项的个数

disable 指定列表项是否可用

multiple 指定是否可选择多个列表项

size 指定列表框中的显示项数，即列表框的高度，该值为1时为下拉列表

option[] 选项数组，每个可选项都在该数组中有一个条目

selectedIndex 返回当前选项的索引值。在多选项列表中，该值返回第一个被选中项

index 数组中的索引值

blur() 从单行文本框中移除键盘输入焦点

focus() 设置单行文本框键盘输入焦点

add(new,old) 将新new插入old之前。如果old为null，则插入尾页

remove(n) 删除第n个列表项，n值从0算起

appendChild(option) 直接添加选项在末尾

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> 多选框 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD><mce:script type="text/javascript"></mce:script> <BODY> <form name = "box"> 可选爱好(一次只能选一个）<br> <select name = "hobbys" size = "7"> <option name = "hobbys" value = "0" selected>看书</option> <option name = "hobbys" value = "1">上网</option> <option name = "hobbys" value = "2">下棋</option> <option name = "hobbys" value = "3">购物</option> <option name = "hobbys" value = "4">打牌</option> <option name = "hobbys" value = "5">听歌</option> <option name = "hobbys" value = "6">运动</option> </select><br><br> 你喜欢的<br> <select name = "hobbyy" size = "7" multiple = "true"> </select><br><br> 你讨厌的<br> <select name = "hobbyo" size = "7" multiple = "true"> </select><br><br> <input type = "button" value = "添加选项" onclick = "add();"> <input type = "button" value = "删除选项" onclick = "del();"> <input type = "button" value = "我不喜欢" onclick = "mov();"> </form> </BODY></HTML>

3.7按钮

按钮使用<input>标签，并可以使用一下3种不同的类型之一。

submit 提交按钮，可把表单字段中的数据发送给CGI脚本

reset 重置按钮，可把表单字段回复到默认值

button 通用按钮，可调用脚本函数

4.通过邮件发送表单结果

不必使用任何javascript可实现发送表单结果的功能，也可以使用javascript来验证输入信息，需要在表单的action属性中使用mailto:动作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> 通过邮件发送表单结果 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <form method = "post" action = "mailto:yalishizhude@gmail.com"> <fieldset> <legend >图书信息</legend> <br>请输入书目名称：<input type = "text"> <br><br> 选择书目类别：<br> <input type = "checkbox">科幻类<br> <input type = "checkbox">言情类<br> <input type = "checkbox">机械类<br> <br> 请选择出版国家：<br> <select size = "4"> <option value = "0">中国</option> <option value = "1">美国</option> <option value = "2">英国</option> <option value = "3">德国</option> </select> <br><br> </fieldset> <input type = "submit" value = "确定" onsubmit = ""> <input type = "button" value = "重置" onclick = "reset();"> </form> </BODY></HTML>

5.显示表单数据

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> 显示表单数据 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD><mce:script type="text/javascript"></mce:script> <BODY> <form name = "info"> <h1>实例</h1><br> 在下面的文本框中填入相应的信息，然后单击Display按钮，所填的内容会在一个弹出的窗口中显示出来。<br> <h3> 姓名：<input type = "text" name = "name"><br> 性别：<input type = "text" name = "sex"><br> 联系方式：<input type = "text" name = "contact"><br></h3> <input type = "button" name = "display" value = "Display" onclick = "dis();"> </form> </BODY></HTML>

6.创建自动提示文本框

自动提示文本框是javascript的一种特殊而非常有用的功能。自动提示文本框在用户输入时会检测输入的前几个字符，然后给出一个可帮助用户输入的单词列表，这样就会给用户带来很多方便。

要产生自动提示文本，首先要做的就是写一个方法来搜索字符串数组并返回特定字符开头的所有值。如下所示

Textobj.autosuggestMatch = function(sText, arrValues){ var arrResult = new Array; if(sText != "") { for(var i = 0; i<arrValue.length; i++) if(arrValue[i].indexOf(sText) == 0) arrResult.push(arrValue[i]); } return arrResult;}

该方法中有两个参数，第一个参数为要匹配的文本，第二个参数则是进行匹配的数组。检查匹配文本sText，若该文本为空，则退出该方法；否则，进入for循环。该循环检测数组中的一个字符，判断是否与匹配文本相等，如果arrValues[i].indexOf(sText) == 0，则表示匹配，然后将这个字符串添加到结果数组arrResult中，最后返回匹配值的数组。

<textarea cols="50" rows="15" name="code" class="javascript:collapse"><mce:script language="javascript"></mce:style><style mce_bogus="1">.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>"); function getAbsoluteHeight(ob){ return ob.offsetHeight } function getAbsoluteWidth(ob){ return ob.offsetWidth } function getAbsoluteLeft(ob){ var s_el=0;el=ob;while(el){s_el=s_el+el.offsetLeft;el=el.offsetParent;}; return s_el } function getAbsoluteTop(ob){ var s_el=0;el=ob;while(el){s_el=s_el+el.offsetTop ;el=el.offsetParent;}; return s_el } } smanPromptList(arrList,"inputer") // --></mce:script> <table><tr><td> <input type="text" id="inputer"></td></tr></table></textarea>