你的位置:首页 > 网页设计

[网页设计]HTML5表单学习笔记


表单在网页设计中的作用非常重要,HTML5又增加了表单方面的诸多功能,包括增加input输入类型,input属性,form元素,form属性等,解决了我们以前比较头疼或者繁琐的功能。

新增的输入类型

1.email输入类型:此类型是一种专门用于输入E-mail地址的文本输入框,在提交表单时会自动验证email输入框的值,如果值无效则浏览器是不允许提交的,并会有一个错误信息提示。  

<input type="email" name="user_email" />

2.number类型:用于包含数值的输入域。还可以设定数字的限制即规定允许的最大最小值,合法的数字间隔等,不在范围内的数字会出现错误提示。

<input type="number" name="number1" ><input type="number" name="number1" min="1" max="20" step="4">

3.url类型:文本域要求输入格式正确的URL地址。

<input type="url" name="user_url" />

4.range类型:此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.

<input type="range" name="range1" min="1" max="30" />

5.日期时间相关输入类型输入日期,这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件。

<input type="date" name=" date1" /><!--选取日,月,年--><input type="month" name=" month1" /><!--选取月,年--><input type="week" name="week1" /><!--选取周,年--><input type="time" name="time1" /><!--选取时间(小时和分钟)--><input type="time" name="time1" step="5" value="09:00"><input type="datetime" name="datetime1" /><!--选取时间、日、月、年(UTC 时间)--><input type="datetime-local" name="datetime-local1" /><!--选取时间、日、月、年(本地时间)-->

6.search类型:此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标. 

<input type="search" name="search1" />

7.tel类型:此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.

<input type="tel" name="tel1" />

8.color类型:用于颜色选择域。点击时会弹出一个颜色选择框。

<input type="color" name="color1" />

新增属性

1.autocomplete属性:此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="/formexample.asp" method="get" autocomplete="on">姓名:<input type="text" name="name1" /><br />职业:<input type="text" name="career1" /><br />电子邮件地址:<input type="email" name="email1" autocomplete="off" /><!--用off单独设置这一行,当用户提交过一次表单后,再次访问,name的输入框会提示你曾输入的值,而email则不会提示。--><br /><input type="submit" value="提交信息" /></form><form autocompelete="on"> <!--属性设置为on时可以使用HTML5中新增的datalist和list属性提供一个数据列表供用户选择-->    输入你最喜欢的城市名称:<input type="text" id="city" list="cityList" ">   <datalist id="cityList" style="display:none;">    <option value="BeiJing">BeiJing</option>    <option value="QingDao">QingDao</option>    <option value="QingZhou">QingZhou</option>    <option value="QingHai">QingHai</option></datalist></form>

 

2.autofocus属性:规定在页面加载时,域自动地获得焦点。适用于所有 <input> 标签的类型。

<input type="submit" value="同意" autofocus="on"><!--属性值为on则此按钮获得焦点-->

3.form属性:规定输入域所属的一个或多个表单。适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id。

<form action="" method="get" id="form1">请输入姓名:<input type="text" name="name1" autofocus/><input type="submit" value="提交"/></form><p>下面的输入框在 form 元素之外,但因为指定的form属性,并且值为表单的id,所以该输入框仍然是表单的一部分。</p>请输入住址:<input type="text" name="address1" form="form1" />

4.表单重写属性:用于重写 form 元素的某些属性设定。

  • formaction - 重写表单的 action 属性
  • formenctype - 重写表单的 enctype 属性
  • formmethod - 重写表单的 method 属性
  • formnovalidate - 重写表单的 novalidate 属性
  • formtarget - 重写表单的 target 属性   

注意表单重写属性只适应于submit 和 image

<form id="user_form">  <input type="email" name="userid" />  <input type="submit" value="Submit" />  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />  <input type="submit" formnovalidate="true" value="Submit without validation" /></form>

5.required属性:表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.

<form action="demo.asp" method="get">请输入姓名: <input type="text" name="usr_name" required="required" /><input type="submit" value="提交" />

6.placeholder属性:提供一种提示。适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。

请输入邮政编码: <input type="text" name="m" placeholder="请输入邮政编码" /><input type="submit" value="提交" />

7.pattern属性:规定用于验证 input 域的内容是否与自定义的正则表达式相匹配,适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。

请输入邮政编码: <input type="text" name="zip_code" pattern="[0-9]{6}"placeholder="请输入6位数的邮政编码" /><input type="submit" value="提交" />

8.multiple属性:规定输入域中可选择多个值。适用于email 和 file。

请选择要上传的多个文件: <input type="file" name="file1" multiple="multiple" /><input type="submit" value="提交" />

9.max/min/step属性:限制值的输入范围,以及值的输入渐进程度

请输入数值:<input type="number" name=number1" min="0" max="12" step="4" /><input type="submit" value="提交" />

10.list属性:该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.

请输入网址: <input type="url" list="url_list" name="weblink" /><datalist id="url_list">  <option label="新浪" value="http://www.sina.com.cn" />  <option label="搜狐" value="http://www.sohu.com" />  <option label="网易" value="http://www.163.com" /></datalist>

11.novalidate属性:规定在提交表单时不应该验证 form 或 input 域。适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color。

<form novalidate="true">  <input type="email" name="user_email" />  <input type="submit" /></form>

新增元素

1.datalist元素:规定输入域的选项列表,列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id。

例子请看list属性

2.keygen元素:提供一种验证用户的可靠方法。keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

请输入用户名: <input type="text" name="usr_name" /><br>请选择加密强度: <keygen name="security" />

3.output元素:用于不同类型的输出,比如计算或脚本输出

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><head><script type="text/javascript">   function multi(){     a=parseInt(prompt("请输入第1个数字。",0));     b=parseInt(prompt("请输入第2个数字。",0));     document.forms["form"]["result"].value=a*b;   }</script></head><body onload="multi()"><form action="/testform.asp" method="get" name="form">两数的乘积为:<output name="result"></output></form></body></html>