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 图像，与提交按钮功能一样
完整示例：
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 输入域元素的值
示例
3.2使用密码框
密码框与文本框非常相似，不同的是密码框不管用户输入了什么都只显示星号。在下面的示例中，用户在单行文本框中输入用户名，在密码框中输入密码，当密码框失去焦点时，校验密码的有效性。密码正确时在对话框中显示“密码正确，请进”，否则显示“密码错误，请重新输入”。这只是一个演示功能，实际上验证密码往往在服务器上完成。
示例：
3.3使用多行文本框
多行文本框也称作文本区域，它对应于HTML的<textarea>标记。与text对象一样，textarea对象也有一组属性、方法和事件。
form 多行文本框所在表单的名称
name 多行文本框的名称
type 多行文本框的类型，为textarea
value 文本区域的取值，为用户输入在该多行文本框中的文字
cols 文本区域的宽度，以字符为单位
rows 文本区域的行数
disabled 控制是否允许用户操作该输入域。true-允许，false-不允许
readonly 指定多行文本框是否为只读。true-只读，false-可以输入和修改文字
3.4使用单选按钮
通过单选按钮的名称属性区分单选按钮位于哪一个组中，同一组的单选按钮拥有相同的name属性。checked属性指定单选按钮是否被选中。单选按钮的对象是一个数组。单选按钮对应于HTML标记<input type = “radio”>，在javascript中对象为radio。radio常用方法和时间与text相同。
3.5使用复选框
复选框的对象名称为checkbox，可以用<input>标签定义复选框。复选框只有一个方法：click()，它模拟复选框上的单击。它还有一个事件： onClick，只要复选框被单击，就发生该事件。不论复选框是被选中还是取消选中，需要通过检查checked属性来判断复选框的状态。
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) 直接添加选项在末尾
3.7按钮
按钮使用<input>标签，并可以使用一下3种不同的类型之一。
submit 提交按钮，可把表单字段中的数据发送给CGI脚本
reset 重置按钮，可把表单字段回复到默认值
button 通用按钮，可调用脚本函数
4.通过邮件发送表单结果
不必使用任何javascript可实现发送表单结果的功能，也可以使用javascript来验证输入信息，需要在表单的action属性中使用mailto:动作。
5.显示表单数据
6.创建自动提示文本框
自动提示文本框是javascript的一种特殊而非常有用的功能。自动提示文本框在用户输入时会检测输入的前几个字符，然后给出一个可帮助用户输入的单词列表，这样就会给用户带来很多方便。
要产生自动提示文本，首先要做的就是写一个方法来搜索字符串数组并返回特定字符开头的所有值。 如下所示
该方法中有两个参数，第一个参数为要匹配的文本，第二个参数则是进行匹配的数组。检查匹配文本sText，若该文本为空，则退出该方法；否则，进入for循环。该循环检测数组中的一个字符，判断是否与匹配文本相等，如果arrValues[i].indexOf(sText) == 0，则表示匹配，然后将这个字符串添加到结果数组arrResult中，最后返回匹配值的数组。
今天的文章JavaScript学习(7)利用表单获取数据分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29181.html
