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>