您现在的位置是:首页 > 前端学习 > 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网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计108篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们