Document

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

表单对象

表单对象介绍
表单就是<form></form>之间部分。
一个表单一般由三个基本组成部分组成：

1. 表单标签、
2. 表单域
3. 表单按钮。

表单元素概述
在HTML中定义的表单元素有很多，这些表单元素可以让用户输入文字，如文本框、密码框等
或者让用户选择可选项，如下拉列表框、复选框等；也可以让用户提交信息或重置表单

如提交按钮、重置按钮等；甚至还可以为程序员提供开发上的便利，如隐藏框等。
所以一个表单元素看起来下面代码所示这样子的

<form action="reg.asp" method="post">
    <input type="text"/>
    <input type="image"/>
    <input type="button"/>
</form>

文本框的创建方式
要使用文本框，首先得学会如何创建一个文本框。创建一个文本框的方式有多种，在HTML代码中，创建单行文本框与创建密码框所使用的元素都是input元素，虽然是同一元素，但根据不同的文本框种类其创建的方式也不同。
文本框的创建语法格式如下：

 	<input type=boxType name=“boxName” value=“boxValue” size=boxSize maxlength=lengths>

要创建一个单行文本其格式如下所示。

<input type=”text” name=”boxName” value=”” size=”20” maxlength=”30”>

创建一个密码框类型的文本，则用如下所示的语句。

<input type=”password” name=”boxName” value=”” size=”20” maxlength=”30”>

综上可以看出，创建一个文本框都主要是用input元素

一个表单对象代表了HTML文档中的表单，由于HTML中的表单会由很多表单元素组成，因此form对象也会包含很多子对象。

JavaScript会为每个<form>标签创建一个form对象，并将这些form对象存放在forms[]数组中。
因此我们可以使用以下代码来获得文档中的form对象。

document.forms[i]

表单元素的命名
<form>标签与</form>标签之间可以存在很多表单元素。
form对象中可以使用elements[]数组来获得代表这些表单元素的子对象。
elements[]数组中存放的是各种类型的form对象的子对象，elements[]数组中的元素是由<form>标签与</form>标签之间表单元素所组成的
因此可以使用以下代码来获得代表HTML文档中的第1个Form对象中的第2个元素的对象。

form1.elements[1]

提交表单和重置表单

reset和submit这两个方法类似于单击了“重置”和“提交”按钮。
其中reset相当于重置按钮，sumit相当于提交按钮 。

我们可以用函数封装一下:

例如

//自定义函数
function Submit() {
    //提交表单的方法
    form1.submit();
    //提示用户信息
    alert("提交成功");
}

//自定义函数实现重置
function Reset() {
    //重置表单的方法
    form1.reset();
}

响应表单的提交和重置

前面讲了表单的提交和重置。现在来考虑，当一个表单按下提交或重置后，它是怎样来响应提交和重置的其实也是很简单，只要运用form对象的两个事件onreset（重置时触发事件）和onsubmit（提交时触发事件）就可以了

举个栗子

//自定义函数用于设置数据
function allowReset() {
    //响应 onReset事件
    return window.confirm("确定重置吗？");
}

//自定义函数用于发送数据
function allowSend() {
    //响应 onSubmit事件
    return window.confirm("确认发送吗？");
}

<form  action="" onReset="return allowReset()" onSubmit="return allowSend()">  <!--调用allowSend函数-->
name:<input type="text" name="lastName"><P>			     <!--姓名文本框-->
address:<input type="text" name="address"><P>			 <!--地址文本框-->
city:<input TYPE="text" name="city"><P>			         <!--城市文本框-->
<input typeE=“radio” name=“gender” CHECKED>男			 <!--性别单选按钮-->
<input type="radio" name="gender">女 <P>
<input type="checkbox" name="retired">同意<P>
<input type="reset">					                <!--重置按钮-->
<input type="submit">					                <!--提交按钮-->
</form>

表单验证

JavaScript常用的功能之一就是表单验证，表单验证是指验证表单中输入的内容是否合法。
它一般用在提交表单前进行表单验证，这样可以节约服务器处理的时间，同时也为用户节省了等待时间。

所做的工作很比较简单，而执行的效率又最高，这是JavaScript最优越的性能之一

思路解析

循环验证表单

通过元素名称判断每一个文本框是否输入了文字，这种方法使用起来比较方便，源代码看上去也比较直观。然而，Form对象的elements属性可以返回所有表单中的元素，因此可以使用一个循环来判断elements[]数组中对象的value属性值的长度是否为0来验证表单。

设置表单的提交方式

一般来说当用户填写完表单之后，就可以将表单提交到一个指定的地方然后进行处理。这个指定的地方通常有两处，一处就是直接提交到动态网页，另一种是提交给邮件。

这两种方式的目的都是一样的，就是要将当前提交的信息存储起来，以供日后使用。
而前者可能是保存在数据库中，后者则保存在邮箱中，但都能达到目的

重置表单的提示

在默认情况下，如果用户单击了重置表单按钮，浏览器窗口就会马上将表单中的所有元素的值设置为初始状态。

如果用户一不小心单击了该按钮，则会清除所有已经填写完毕的数据。
为了防止这种意外情况的出现，在单击重置按钮时，弹出一个确认框，让用户确认是否重置表单

例如

//自定义函数
function Reset() {
    //询问用户是否确定重置表单
    var result = confirm("你确定重置吗？");
    //返回结果
    return result;
}

不使用提交按钮提交表单

通常在表单中，都是使用单击提交按钮的方法来提交表单。
然而，在form对象中有一个submit()方法，使用该方法可以在不使用提交按钮的情况下提交表单 。

例如

function send() {
     var result = confirm("你确定提交吗？");	
     if (result) {
         form1.submit();	
     } else {
         return false;		
     }
 }

查看一个文本框的属性值

代表文本框的对象称为text对象、代表多行文本框的对象称为textarea对象、代表密码框的对象称为password对象。

无论是text对象、textarea对象，还是Password对象，所拥有的属性大多都是相同的。
因此可以用统一的方法来访问它们的属性。

举个栗子

var str1 = form1.elements[0].value;	//文本的值
var str2 = form1.elements[0].name;	//文本的名称
var str3 = form1.elements[0].type;	//文本类型
var str4 = form1.elements[0].size;	//字符的宽度
var str5 = form1.elements[0].maxlength;	//最多字符数