您现在的位置是：首页 > 前端学习 > Web前端Web前端

网页中的表单（第六章）(图文)

第十三双眼睛2019-11-03【Web前端】人已围观

简介现在，大多数网站都具备收集用户信息的功能，如发表留言，输入账号，而通过使用表单能够令浏览者和页面互动起来，HTML5不但增加了一系列功能性的表单，表单元素，表单特性，还增加了自动验证表单的功能。本章的主要知识点如下：
1表单时如何工作的
2如何创建表单
3不同功能多种样式的表单
4表单域能够做什么
5HTML5表单发生了什么变化

表单的工作原理
表单最重要的表现就是在客户端接收用户的信息，然后将数据传递给后台的程序来操控这些数据，从技术的概念上，表单就是一个操作form对象的使用，对象是一种最基本的数据类型

创建表单
创建一个表单看上去就像创建表格，表格的单元格，行列都放在<table></table>标签种，而创建表单的方式就像是创建一个表格，使用<form>标签来创建，其中放置的表单对象，如表单域，按钮和其他事物。
<form>可以扩展如下几个属性，action,method,enctype,target,其中，action属性表示将数据传送到指定的地址，method表示用什么方式来提交数据，还有target属性和enctype属性，前者用来表示目标的显示方式，后者用来表示编码方式。

action属性
通过<form>标签定义的表单，它里面必须有action属性才能将数据提交到指定的位置，具体的写法如下：
<form action="som.php"></form>

method属性
method属性可以有以下两个选择，Post或者get，默认情况下，数据被提交的方式是get，表单域中输入的内容会添加到action的末尾，当表单提交后，用户便得到一个明确的url，由于这种提交方式会将数据添加到地址的末尾，所以一个好处是可以保存在收藏夹中。如有些时候，用户将自己注册过的一些网站主页加入到自己的收藏夹，再次从收藏夹中打开时，发现已经是登录状态了，而post这种方式提交数据，数据将以http头的形式发送，数据表单不再是url的一部分。
这两种的区别是，get再安全性上差一些，所有表单域的值直接呈现，而post提交的数据都是隐藏的。

name属性
添加name属性是为了能让提交出去的数据能够被处理这些数据的程序识别，再大部分的页面中，很可能放入的表单不止一个，那么就要通过给不同的表单起不同的名字，便于程序来识别，如：
<form name="loandata"></form>这里将表单的名字设置为loandata，
var length=document.loandata.length.value;表示通过loandata中获取输入的length项数值。

编码方式
enctype代表HTML表单数据的编码方式，分别由application/x-www-form-urlencode,multipart/form-data,和text/plain三中方式，第一种是标准的编码方式，提交的数据被编码为名称/值对，第二种表示数据编码为一条信息，为表单定义了MEME编码方式，创建了一个与传统不同的POST缓冲区，页面上每个控件对应消息种的一个部分，第三种以纯文本的形式进行编码，这样在信息种将不包含空间或者格式字符

目标显示方式
表示在何处打开目标url，可以设置4种方式_blank表示在新的页面中打开，_selt表示的相同的窗口种打开，_parent表示在父级窗口种打开，_top表示在顶级窗口种打开。

表单域
表单域是用户输入数据的地方，说的形象一点，相当于是用户给程序下命令或者给指示的地方，当然这种下命令的方式由很多，如最常见的文本域，下拉列表等，其中大部分都是通过input,select,textarea来实现的。

通过表单展示不一样的页面
表单中包含不同样式，不同功能的提交数据的方式，在许多页面中，浏览者不经意间已经不断的使用表单的功能，如留言，设置自己的密码，或者是复选框，下拉列表，等等。

input
通常，表单中的大多数元素都是通过input来实现的，一个简单的样式是这样的<input type="" value="" size="" maxlength="" name=""/>,其中name表示数据的名字,
type表示所定义的是哪种类型的表单形式，有9个值可供选择
size:表示文本框字段的长度
maxlength：表示可输入的最长的字符数量
value:表示预先设置好的信息
type可选择的如下：
1text:单行文本框
text文本框的样式表单，是一个单行文本框，比较常见于登录这样的使用。
2pasword：密码框
这是一个可以将文本使用保密形式展示出来的一个功能，最常见的使用是密码框。不同的浏览器会使用不同的符号来代替，如远点和星号
3checkbox：多选框
这是一种复选框的创建方式，类似于一个开关的on和off选择，浏览器会在选择栏前提供一个方形的小框，如果选则符合的意思，小框种会添加一个对勾表示被选中。
4radio：单选框
radio样式有点类似于选择题，在一组选择种，选出唯一的一项选择，发送这列数据，使用方法为给同一组选择框起相同的名字，，通过value来区别他们的不同
5submit：提交按钮
submit用于创建一个按钮，一个按钮的作用是提交数据，当然准确的说，submit属性负责提交这个动作，当单击提交按钮时，数据会被发送到指定的地方。
6hidden：隐藏域
hidden可以创建一个隐藏域，这样数据会被隐藏起来。因此，用户是无法操作的，这样说来，hidden似乎没有什么作用，但是，有的时候，用户没比要关心的数据，但是还必须要提交的数据，就需要用它来实现。
7image：图片类型的提交按钮
image样式的表单看上去就像是在页面种放入图像，或者说用图像替换文本，当图像被点击时，数据被提交至服务器。代码写法如下：
<input type="image" src="">/
8file：文件框
file样式表单表示允许用户上传自己的文件，这在论坛，社区类型的网站中非常常见，比如用户上传自己的头像。代码写法如下：
<input type="file" name="" id=""/>,当使用file样式的表单时，必须将enctype设置为multipart/form-data,这样，服务器才能接收到正确的信息。
9button：普通按钮
textarea对象的表单
text对象就是input对象中text样式的表单，只不过是扩展过的text表单，可以通过rows和cols属性来编辑文本域的大小。比如论坛中的回帖，留言板内容。textarea标签必须是封闭的。

select对象的表单
select对象的表单创建出一个列表样式的表单，显示为出现一个下拉框，令用户可以方便的选择其中的一个目录，通常在一些需要用户填写地区，生日的信息中。设计者可以准备好选项，使用者就可以很方便的选取了。具体写法如下：
<select name="province">
<option>陕西省</option>
<option>山西省</option>
<option>河南省</option>
</select>

表单域集合
如果一个页面中表单的项目过于繁多，设计者可以通过使用表单域将表单分组，当然，表单域未必是只有在太长表单的情况下使用，事实上，很多时候，设计者这样的方式来修饰表单部分。表单域的代码由<filedset>标签和<legend>标签组合而成。在默认情况下，<fieldset>标签勾画出表单域的框形.<legend>标签的对象像标题一样出现在框形的左上角，代码如下：
<form action="" method="post">
<fieldset>
<legend>
用户注册：
</legend>
<input type="text" name="name">
</fieldset>
</form>

HTML表单的发展
为了适应互联网的变化，以及使互联网内容更加丰富，HTML5提供了更加丰富的表单元素。早在20世纪90年代的HTML4规范中，表单功能已经发展的非常完善，随着web应用的发展，表单功能过于简单，在处理复杂业务的过程中，显得能里有限，而且还收到网络设备的限制，基于这个原因，出现了基于XML的XHTML规范，与此同时出现了Xform表单，基于HTML4的表单也停止了发展，Xform试图突破当前HTML form的一个限制，最大的特色是使用了客户端验证的功能，避免大量使用javascript脚本验证，在当时，被称为下一代的表单
由于Xform是基于xml的，在一定程度上弱化了标签本身的功能，由于起比较灵活，表单也跟着复杂了，因此在实际过程中，并没有得到广泛的发展。

HTML5的出世
在实际的表单应用中，一些特殊的数据输入是需要一个独立的原则，如邮件，网址，我们会使用一些特定的格式验证
由于互联网的快速发展，在面向移动设备的时候，通过识别表单类型，可以提供更友好的的用户体验，如可以呈现不同的屏幕键盘。在处理表单的时候，最常用的就是表单验证，一般的验证会写很长的js代码，或者借助一些js框架，比如比较流行的jquery,HTML5发展了这些表单，把具有特定规则意义的表单扩展出一些特有的特性，作为表单的原始功能，验证表单的功能也变成表单本身的功能。

新增的表单输入类型
新增的表单类型不但方便进行表单验证，而且在用户体验方面留下了极大的提升空间，下面针对这些input元素进行逐个介绍。

1url类型
url类型的表单时专门为输入url地址定义的文本框，在验证输入文本的格式时，如果改文本框中的内容不符合url地址的格式，会提示验证错误，具体写法如下：
<input type="url" name="url" id="weburl" value="www.baidu.com"/>

2email类型
email类型的表单元素是专门为输入email地址定义的文本框，在验证输入文本的格式时，如果该文本框中的内容不符合email的格式，会提示验证错误，具体写法如下：
<input type="email" name="email" value="..."/>另外，还有一个multipart属性，表示在该文本框中可以输入用逗号隔开的多个邮件地址。

3range类型
range类型的表单是把输入框显示为滑动条，为某一特定范围内的数值选择器，它还具有min和max的特性，表示选择范围的最小值和最大值，还有step特性，表示步长，默认为1，具体写法如下：
<input type="range" name="volume" min="0" max="100" step="1"/>

4number类型
number类型的input元素，是专门为输入特定的数字而定义的文本框，与range类似，都具有min,max,step，特性。写法如下：
<input type="number" name="score" id="score" min="0" max="100" step="1"/>

5tel类型
tel类型的input元素是专门为输入电话号码而定义的文本框，没有特殊的验证规则

6search类型
search类型的表单是专门为输入搜索引擎关键字定义的文本框，没有特殊的验证规则

7color类型
color类型的input会提供一个颜色选择器，主流浏览器还没有支持它

8date类型
date类型的input元素是专门用于输入日期的文本框，默认为带日期选择器的输入框，目前仅opera浏览器支持

9month,week,time,datetime,datetime-local类型
他们与date类型相似，都会提供一个相应的选择器，其中，month会提供一个月选择器，以此类推。

新增表单特性及元素
如果像开发一个用户体验非常好的页面，需要些大量的代码，而且还要考虑兼容性问题，使用HTML5表单的某些特性可以开发出前所未有的页面效果，可以写更少的代码，并能解决传统开发中遇到的一些问题。
form特性
通常，属于表单的元素必须放在表单内部，但是在HTML5中，可以把表单元素放在任何地方，然后指定该元素的form特性值为表单的id，这样，该元素就属于该表单，目前，form特性已经获得很多浏览器的支持

formaction特性
每个表单都会通过action特性把表单的内容提交到另一个页面，在HTML5中，为不通的提交按钮分别添加formaction特性，该特性会覆盖表单的action属性，将表单内容提交到不同的页面。目前formaction已经获得很多浏览器的支持

formmethod,formenctype,formnovalidate,formtarget特性
这四个特性的使用方法与formaction一样，设置在提交按钮上，可以覆盖表单的相关属性。

placeholder
用户没有把光标定位到输入文本框的时候，可以使用该属性向用户提示描述性的信息。当该输入文本框获得焦点时，该信息就会消失，该特性的使用方法如下，
<input type="text"/ plactholder="...">,还可以用在url,email,number,search,tel和password上。目前已经获得很多浏览器的支持

autofocus
使用autofocus属性可以用于所有的input类型，当页面加载完成时，它自动获取焦点。每个页面只允许有一个元素有此属性，如果为多个元素设置了该属性，则相当于未指定该属性。具体写法如下：
<input type="text" autofocus/>,关于自动获得焦点的特性，不要随便使用，如果页面加载缓慢，用户又做了一些操作，这个时候发生了焦点莫名奇妙的转移，给用户的体验不是很好。

autocomplete
atuocomplete属性可以用于输入型的input元素，用于表单的自动完成，autocomplete属性会把输入的历史记录下来，当再次输入的时候，会把历史记录显示在一个框里，以实现自动提示。写法如下：
<input type="text" autocomplete="on"/>autocomplete属性又三个属性值，off,on,默认值，默认值根据浏览器的不同而不同，目前该属性已经获得很多浏览器的支持。

list和datalist属性
通过组合使用list属性和datalist属性，可以为某个输入的input元素定义为一个选项值列表，使用datalist元素构造选项值列表，设置input元素的list属性为datalist的id值。可以实现二者的绑定。

keygen元素
keygen元素提供了一种安全的方式来验证用户，该元素又密钥生成的功能，当提交表单时，会生成一个私人密钥和公共密钥，其中，私人密钥保存在客户端，公共密钥则通过网络发送给服务器，这种非对称加密的方式为数据获得了更大的安全保障。具体写法如下：
keygen元素提供了中级和高级的加密算法，显示的是一个类似select的下拉框，可以选择加密等级，目前该元素已经获得很多浏览器的支持

output元素
output元素用于不同类型的输出，如用于计算结果和脚本的输出，output元素必须属于某个表单，写法如下：
<output name="x"></output>由于range类型的input元素表现为一个滑块，不显示数值，可以使用output元素协助显示数值。目前，该属性已经获得很多浏览器的支持

表单验证API
HTML5为表单验证提供了极大的方便，在验证表单的方式上，显得更加灵活，表单验证时，首先会基于前面讲解的表单类型的规则进行验证，其次是为表单元素提供用于辅助表单验证的一些特性，更重要的是，HTML5还提供了专门用于表单验证的属性，方法和事件。

1required属性
一旦为某个表单的元素设置了该属性，那么此项的值不能为空，否则无法提交表单，以文本输入框为例子。
<input type="text" required/>

pattern特性
pattern特性用于为input元素定义一个验证模式，该特性值是一个正则表达式，提交时，会检查输入的内容是否符合给定的格式，如果输入的内容不符合，则不能提交，写法如下：
<input type="text" name="" pattern=""[0-9]{6}/>,使用pattern特性验证表单非常灵活，例如前面讲到的emil类型的input元素，使用pattern特性完全可以实现相同的功能。

min,max,step属性
这三个属性专门用于针对日期和数字类型。min特性表示允许的最小值，max表示允许的最大值，step表示合法数据的间隔。

novalidate属性
该特性专门用于指定表单或表单内的元素在提交时不验证，如果form元素应用此属性，则表单中的所有元素在提交时都不验证。

表单验证的属性
1validity属性
该属性用于获取表单元素的validityState对象，该对象包含8个方面的验证结果，每次调用validity属性，返回一个validityState对象，以一个id为username的表单元素为例子，validity属性的使用方法如下：
var s = document.getElementById("username").validity;

2willValidate属性
它用于获取一个布尔值，表示该表单元素是否需要验证如果表单元素设置了required属性或者pattern属性，则会返回true,表单的验证将会执行。

3validationMessage属性
它用于获取当前元素的错误提示信息，一般设置required属性的元素会提示，请填写此字段。

validityState对象
该对象有8个属性，分别针对8个方面的错误验证。属性值均为布尔类型。
1valueMissing属性
必填的表单元素的值为空，如果表单元素设置了required属性，则为必填项，如果必填项的值为空，就无法通过表单验证，valueMissing就会返回true,否则返回false

2typeMismacth
输入值与type类型不匹配。

3patternMismatch
输入值与pattern特性的正则不匹配。

4tooLong
输入的内容超过了表单元素maxLength特性限定的字符长度，表单元素可以使用maxLenth特性设置输入内容的最大长度，虽然在输入的时候会限制表单的最大长度，但在某些情况下，还是会超出最大长度的。

5rangeUnderflow属性
输入的值小于min特性的值，它一般用于填写数值的表单元素，都可能会使用min特性设置数值范围内的最小值，如果输入的值小于最小值，则此属性返回true,否则返回false

6rangeOverflow属性
输入的值大于最大允许的值

7stepMismatch
输入的值不符合step特性推算的规则

8customError属性
使用自定义的验证错误提示信息
有的时候，不适合使用浏览器内置的验证错误提示信息，需要自己定义，当值不符合定义的规则时，会提示字定义的错误提示信息。通常使用setCustomValidity()方法字定义错误提示信息。

表单验证的方法
HTML5为我们提供了两个用于表单验证的方法
1checkValidity()方法，显示的验证方法，每个表单元素都可以调用checkValidity()方法，它返回一个布尔值，表示验证是否通过，默认情况下，表单的验证发生在表单提交时，如果使用checkVallidity()，则可以在需要的地方验证表单，一旦表单没有通过验证，则会触发invalid事件。

setCustomValidity()方法
字定义错误提示信息的方法，当默认的提示错误满足不了需要时,可以通过该方法自定义错误提示.

表单验证的事件
HTML5为我们提供了一个表单验证的事件，下面介绍invalid事件
表单元素为通过验证时触发，无论是提交表单还时直接调用checkValidity方法，只要有表单元素没有通过验证，就会触发invalid事件，invalid本身不处理任何事情，我们可以监听该事件，字定义事件处理。
<body>
<form action="">
<input type="text" name="name" id="name" required/>
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
window.onload = function(){
var name = document.getElementById("name");
name.addEventListener("invalid",invalidHandler,false);
}

function invalidHandler(evt){
var validity = evt.srcElement.validity;
if(validity.valueMissing){
alert("姓名是必填项，不能为空");
}
}
</script>
</body>
页面初始化的时候，为姓名输入框添加了一个监听的invalid事件，当表单验证不通过时，就会触发invalid事件，invalid事件会调用注册到事件里面的函数，这样就可以在自定义函数中做一些事情了。一般情况下，在invalid事件处理完成后，还是会触发浏览器默认的错误提示，比要的时候，我们可以屏蔽浏览器后续的提示，可以使用事件的preventDefault方法，阻止浏览器的默认行为，并自行处理错误提示。

其他处理函数
函数addError函数和clearError函数,是处理提示信息的，分别表示添加提示和清楚提示。函数invalidHandler是用于处理invalid事件的，当表单验证有错误时，会立即触发invalid事件，并执行invalidHandler函数，该函数为了获得更加准确的错误信息，对validityState对象的各个属性进行了判断，并且屏蔽了系统的验证提示。

Tags：HTML HTML网页

很赞哦！ ()

上一篇：网页中的链接(第五节)(图文)

下一篇：音频和视频（第七节）