HTML5表单

一、HTML原有的表单

　<form.../>元素用于生成输入表单，该元素不会生成可视化部分。

　<form.../>除了基本属性外还可以定义如下属性：

　　action：当点击“确定”按钮的时候，
表单被提交的地址；
　　method：提交方式，属性值为POST或GET；
　　enctype：指定对表单内容进行编码所使用的字符集；
　　name：指定表单的唯一名称，建议该属性值与id属性值保持一致；
　　target：指定使用哪种方式打开目标URL，与超链接的target可接受的属性值一致，该属性值可以为_blank、_parent、_self和_top四个值中之一。

<input.../>元素是表单控件中功能最丰富的，如下几种输入元素都是通过<input.../>元素生成的。

单行文本框：type="text";
密码输入框：type="password";
隐藏域：type="hidden";
单选框：type="radio";
复选框：type="checkbox";
图像域：type="image";
文件上传域：type="file";
提交、重设、无动作按钮：type="submit";　　type="reset";　　type="button";

下面代码使用了<input.../>元素定义了表单控件：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> 表单 </title>
 7     </head>
 8     <body>
 9         <form action="http://www.crazyit.org" method="get">
10             单行文本框：<input id="username" name="username" type="text" /><br />
11             不能编辑的文本框：<input id="username2" name="username" type="text"
12                 readonly="readonly" /><br />
13             密码框：<input id="password" name="password" type="password" /><br />
14             隐藏域：<input id="hidden" name="hidden" type="hidden" /><br />
15             第一组单选框：<br />
16             <input id="color" name="color" type="radio" value="red"/>
17             <input id="color2" name="color" type="radio" value="green" />
18             <input id="color3" name="color" type="radio" value="blue"/><br />
19             第二组单选框：<br />
20             <input id="gender" name="gender" type="radio" value="male"/>
21             <input id="gender2" name="gender" type="radio" value="female" /><br />
22             两个复选框：<br />
23             <input id="website" name="website" type="checkbox" 
24                 value="leegang.org" />
25             <input id="website2" name="website" type="checkbox" 
26                 value="crazyit.org" /><br />
27             文件上传域：<input id="file" name="file" type="file"/><br />
28             图像域：<input type="image" src="images/wjc.gif" alt="疯狂Java联盟"/><br />
29             下面是四个按钮：<br />
30             <input id="ok" name="ok" type="submit" value="提交" />
31             <input id="dis" name="dis" type="submit" value="提交"
32                 disabled="disabled" />
33             <input id="cancel" name="cancel" type="reset" value="重填"/>
34             <input id="no" name="no" type="button" value="无动作" />
35         </form>
36     </body>
37 </html>

View Code

<label.../>标签的for属性：

　　让标签和表单关联有两种方式：

隐式使用for属性：指定<label.../>元素的for属性值为所关联表单控件的id属性值。
显式关联：将普通文本、表单控件一起放在<label.../>元素内部即可。

下面的表单代码分别使用了两种方式将标签和表单控件关联在一起。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> label元素 </title>
 7     </head>
 8     <body>
 9         <form action="http://www.crazyit.org" method="get">
10             <label for="username">单行文本框：</label>
11             <input id="username" name="username" type="text" /><br />
12             <label>密码框：<input id="password" name="password" type="password" />
13             </label><br />
14             <input id='ok' type="submit" value="登录疯狂Java联盟" />
15         </form>
16     </body>
17 </html>

注：尽量少用显式的关联方式，这种方式在IE浏览器没有很好地支持。

<textarea.../>定义的文本域

属性值：

clos:指定文本域的宽度
rows:指定文本域的高度
disabled:指定禁用该文本域
readonly:指定该文本域只读，该属性值也只能是readonly

下面页面代码定义了两个多行文本域：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> 多行文本域 </title>
 7     </head>
 8     <body>
 9         <form action="http://www.crazyit.org" method="post">
10             简单多行文本域：<br />
11             <textarea cols="20" rows="2"></textarea><br />
12             只读的多行文本域：<br />
13             <textarea cols="28" rows="4" readonly="readonly">
14 你好，这个文本域设置了readonly属性，内容不能修改！
15             </textarea><br />
16             <button type="submit"><b>提交</b></button><br />
17         </form>
18     </body>
19 </html>

二、HTMl5新增的元素和属性

form属性

在HTML5之前，所有表单必须放在<form.../>表单之内，表明该表单控件属于该表单；但是HTML5之后为表单控件增加了form属性，用于定义该表单控件所属的表单，该属性的值应该是他所属表单的id。

下面代码示范了form属性的用法：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> form属性 </title>
 7     </head>
 8     <body>
 9         <form id="addForm" action="add">
10             物品名：<input type="text" name="name"/>
11             <input type="submit" value="添加"/>
12         </form>
13         物品描述：<textarea name="desc" form="addForm"></textarea>
14         </body>
15 </html>

formaction属性

如果一个页面中的表单包含了两个及以上的提交按钮，但程序需要提交到不同的action，如果在以前需要通过javascript代码来实现，在HTML5中，formaction即可实现该功能

例如如下页面：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> formaction属性 </title>
 7     </head>
 8     <body>
 9         <form method="post">
10             用户名：<input type="text" name="name"/><br/>
11             密码：<input type="password" name="name"/><br/>
12             <input type="submit" value="注册" formaction="regist"/>
13             <input type="submit" value="修改" formaction="login"/>
14         </form>
15     </body>
16 </html>

上面代码两个按钮的formaction属性不同，因此单击第一个按钮将会提交到regist，单击第二个按钮将会提交到login。

autofocus属性，当浏览器打开该页面的时候，组件会自动获取焦点
placeholder属性，用于设置单行文本框、多行文本域的提示信息，在Html5之前，需要用到javascript才能实现
list属性：

list属性的值应该是一个<detailst.../>组件的id。也就是说，list属性值必须与<detailst.../>元素结合使用。

下面代码示范了list属性与<detalist.../>元素的用法。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> list属性 </title>
 7     </head>
 8     <body>
 9         <form method="post" action="buy">
10             请输入图书：<input type="text" name="name" list="books"/><br/>
11             <input type="submit" value="购买"/>
12         </form>
13         <datalist id="books">
14             <option value="java">疯狂Java讲义</option>
15             <option value="ee">轻量级Java EE企业应用实战</option>
16             <option value="android">疯狂Android讲义</option>
17         </datalist>
18     </body>
19 </html>

功能丰富的input属性

HTML5为<input...>元素的type属性新增了如下几种类型。

color：生成一个颜色选择器
date：生成一个日期选择器
time：生成一个时间选择器
datetime：生成一个UTC日期时间选择器
datetime-local：生成一个本地日期时间选择器
week：生成一个用户选择第几周的文本框
month：生成一个月份选择器
email：生成一个E-mail输入框
tel：生成一个只能输入电话号码的输入框
url：生成一个URL输入框
number：生成一个只能输入数字的文本框
range：生成一个拖动条
search：生成一个专门用于输入搜索关键字的文本框，这种文本框与type="text";的文本框没有太大区别！

下面代码示范了HTML5新增的各种<input.../>元素的用法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> 功能丰富的input元素 </title>
 7     </head>
 8     <body>
 9         <form action="do">
10             type="color"的文本框:<br/><input name="color" type="color"/><p>
11             type="date"的文本框:<br/><input name="date" type="date"/><p>
12             type="time"的文本框:<br/><input name="time" type="time"/><p>
13             type="datetime"的文本框:<br/><input name="datetime" type="datetime"/><p>
14             type="datetime-local"的文本框:<br/><input name="datetime-local" type="datetime-local"/><p>
15             type="month"的文本框:<br/><input name="month" type="month"/><p>
16             type="time"的文本框:<br/><input name="time" type="time"/><p>
17             type="week"的文本框:<br/><input name="week" type="week"/><p>
18             type="email"的文本框:<br/><input name="email" type="email" multiple/><p>
19             type="tel"的文本框:<br/><input name="tel" type="tel"/><p>
20             type="url"的文本框:<br/><input name="url" type="url"/><p>
21             type="number"的文本框:<br/><input name="number" type="number"/><p>
22             type="range"的文本框:<br/><input name="range" type="range" min="0" max="100" step="5"/><p>
23             type="search"的文本框:<br/><input name="search" type="search"/><p>
24             <input value="提交" type="submit"/>
25         </form>
26     </body>
27 </html>

View Code

三、HTML5增强的文件上传域

在HTML5之前，文件上传有局限性，如下：

每次用户只能上传一个文件；
客户端代码只能获取被上传文件的文件路径，无法访问实际的文件内容。

HTML5规范改变了这个现状，HTML5允许同时选择多个文件进行上传，而且HTML5允许客户端JavaScript访问实际的文件内容。

1、FileList对象与File对象

HTML5为type="file"的<input.../>元素增加了如下两个属性。

accept：该属性控制允许上传的文件类型。该属性值为一个或多个MIME类型字符串。多个MIME类型字符串之间应以逗号分隔。
multiple：该属性设置是否允许选择多个文件。

JavaScript可以通过files属性访问type="file"的<input.../>元素生成的文件上传域内的所有文件，该属性返回一个FileList对象，FileList对象相当于一个数组，开发者可以使用类似于数组的方法来访问数组内的每一个对象。

File对象是一个JavaScript对象，JavaScript可以通过该对象获取用户浏览所有文件的信息。File对象包含如下常用属性：

name：返回该File对象对应的文件的文件名，不包括文件路径部分。
type：返回该File对象对应的文件的MIME类型字符串。
size：返回该File对象对应的文件的大小。

下面代码示范了如何通过FileList、File对象来访问文件上传域内选择多个文件。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> 文件上传域 </title>
 7     </head>
 8     <body>
 9         浏览图片：<input id="images" type="file" multiple 
10             accept="image/*"/>
11         <input type="button" value="显示文件" onclick="showDetails();"/>
12         <script type="text/javascript">
13         var showDetails = function()
14         {
15             var imageEle = document.getElementById("images");
16             // 获取文件上传域内输入的多个文件
17             var fileList = imageEle.files;
18             // 遍历每个文件
19             for(var i = 0 ; i < fileList.length ; i ++)
20             {
21                 var file = fileList[i];
22                 div = document.createElement("div");
23                 // 依次读取每个文件的文件名、文件类型、文件大小
24                 div.innerHTML = "第" + (i + 1) + "个文件的文件名是：" + file.name
25                     + "，该文件类型是：" + file.type
26                     + "，该文件大小为：" + file.size;
27                 // 把div元素添加到页面中。
28                 document.body.appendChild(div);
29             }
30         }
31         </script>
32     </body>
33 </html>

View Code

不要单靠accept属性来过滤文件的类型，因为这只是客户端的文件类型的过滤，这种文件类型的过滤是很脆弱的，如果开发者需要进行文件上传，则必须在服务器端对文件类型进行过滤。

2、使用FileReader读取文件内容

FileReader同样是一个JavaScript对象，开发者可以通过该对象在客户端读取文件上传域所选择的文件内容。

FileReader提供了如下的方法：

readAsText(file,encoding)：以文本文件的方式来读取该文件，其中encoding参数指定读取该文件时所用的字符集，该参数的默认值是UTF-8。
readAsBinary(file)：以二进制方式来读取文件。通过这种方式可以读取文件内容的二进制数据，这样就可以通过Ajax把数据上传到服务器。
readAsDataURL(file)：以DataURL的方式来读取文件。这种方式也可用于读取二进制文件，只是这种方式将会采用base64方式把文件内容编码成DataURL格式字符串。
abort()：停止读取。

onloadstart：FileReader开始读取数据时触发该事件指定的函数
onprogress：FileReader正在读取数据时触发该事件指定的函数
onload：FileReader成功读取数据后触发该属性事件的函数
onloadend：FileReader读取数据完成后触发该事件指定的函数，无论读取成功还是读取失败都将触发该事件指定的函数
onerror：FileReader读取失败时触发该事件的函数

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> 文件上传域 </title>
 7     </head>
 8     <body>
 9         浏览文件：<input id="file1" type="file"/><br/>
10         <div id="result"></div>
11         <input type="button" value="读取文本文件" onclick="readText();"/><br/>
12         <input type="button" value="读取二进制文件" onclick="readBinary();"/><br/>
13         <input type="button" value="以DataURL方式读取" onclick="readURL();"/><br/>
14         <script type="text/javascript">
15         var reader = null;
16         // 如果浏览器支持FileReader对象
17         if(FileReader)
18         {
19             reader = new FileReader();
20         }
21         // 如果浏览器不支持FileReader对象，弹出提示信息
22         else
23         {
24             alert("浏览器暂不支持FileReader");
25         }
26         var readText = function()
27         {
28             // 通过正则表达式验证该文件是否为文本文件，
29             // 如果用户选择的第一个文件是文本文件
30             if(/text\/\w+/.test(document.getElementById("file1").files[0].type))
31             {
32                 // 以文本文件的方式读取用户选择的第一个文件
33                 reader.readAsText(document.getElementById("file1").files[0] , "gbk");
34                 // 当reader读取数据完成时将会激发该函数
35                 reader.onload = function()
36                 {
37                     document.getElementById("result").innerHTML = reader.result;
38                 };
39             }
40             else
41             {
42                 alert("你选择的文件不是文本文件！");
43             }
44         }
45         var readBinary = function()
46         {
47             // 以二进制流的方式读取用户选择的第一个文件
48             reader.readAsBinaryString(document.getElementById("file1").files[0]);
49             // 当reader读取数据完成时将会激发该函数
50             reader.onload = function()
51             {
52                 document.getElementById("result").innerHTML = reader.result;
53             };
54         }
55         var readURL = function()
56         {
57             // 以DataURL的方式读取用户选择的第一个文件
58             reader.readAsDataURL(document.getElementById("file1").files[0]);
59             // 当reader读取数据完成时将会激发该函数
60             reader.onload = function()
61             {
62                 document.getElementById("result").innerHTML = reader.result;
63             };
64         }
65         </script>
66     </body>
67 </html>

View Code

在上面的程序中，readText函数将会以文本的方式来读取文件的内容，在文件的上传域中选择一个文本文件，并单击“读取文本文件”按钮，将可以看到如下图所示的效果：

对于readAsBinaryString和readAsDataURL两种方式，他们都可以读取二进制文。例如，随便选择一个文件，并单击“读取二进制文件”按钮，将如下图的效果：

对于readAsDataURL方法，他可以读取二进制文件，但他返回的是该二进制文件编码成DataURL格式的字符串。可以看到如下效果：

FileReader在读取文件的过程中可能多次触发 onprogress 事件，通过该事件绑定监听器即可实现监控文件的读取速度。

例如：下面页面代码使用了<progress.../>元素来显示文件的读取进度。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> 文件上传域 </title>
 7     </head>
 8     <body>
 9         浏览文件：<input id="file1" type="file"/><br/>
10         上传进度：<progress id="pro" value="0"></progress>
11         <div id="result"></div>
12         <input type="button" value="读取二进制文件" onclick="readBinary();"/><br/>
13         <script type="text/javascript">
14         var reader = null;
15         // 如果浏览器支持FileReader对象
16         if(FileReader)
17         {
18             reader = new FileReader();
19         }
20         // 如果浏览器不支持FileReader对象，弹出提示信息
21         else
22         {
23             alert("浏览器暂不支持FileReader");
24         }
25         var readBinary = function()
26         {
27             // 以二进制流的方式读取用户选择的第一个文件
28             reader.readAsBinaryString(document.getElementById("file1").files[0]);
29             var pro = document.getElementById("pro");
30             pro.max = document.getElementById("file1").files[0].size;
31             // 当reader读取数据的过程中会不断激发该函数。
32             reader.onprogress = function(evt)
33             {
34                 pro.value = evt.loaded;
35             };
36         }
37         </script>
38     </body>
39 </html>

View Code

四、HTML5新增的客户端校验

1、属性校验

常用的属性有：required、pattern、min、max、step...

2、调用checkValidity方法进行校验

如果表单对象调用checkValidity()方法返回true，则表明该表单控件可以通过输入校验；否则返回false。

下面的代码使用了checkValidity()方法执行输入校验。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> 通过checkValidity进行校验 </title>
 7     </head>
 8     <body>
 9         <form action="add">
10             生日：<input id="birth" name="birth" type="date"/><br/>
11             邮件地址：<input id="email" name="email" type="email"/><br/>
12             <input type="submit" value="提交" onclick="return check();"/>
13         </form>
14         <script type="text/javascript">
15             var check = function()
16             {
17                 return commonCheck("birth" , "生日" , "字段必须是有效的日期！")
18                     && commonCheck("email" , "邮件地址" , "字段必须符合电子邮件的格式！");
19             }
20             var commonCheck = function(field , fieldName , tip)
21             {
22                 var targetEle = document.getElementById(field);
23                 // 如果该字段的值为空
24                 if (targetEle.value.trim() == "")
25                 {
26                     alert(fieldName + "字段必须填写！");
27                     return false;
28                 }
29                 // 调用checkValidity()方法执行输入校验
30                 else if(!targetEle.checkValidity())
31                 {
32                     alert(fieldName + tip);
33                     return false;
34                 }
35                 return true;
36             }
37         </script>
38     </body>
39 </html>

View Code

3、自定义错误提示

可以借助HTML5为表单新增的setCustomValidity()来实现

例子如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> 通过属性进行校验 </title>
 7     </head>
 8     <body>
 9         <form action="add">
10             图书名：<input id="name" name="name" type="text" required/><br/>
11             图书ISBN：<input id="isbn" name="isbn" type="text"
12                 required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
13             图书价格：<input id="price" name="price" type="number" 
14                 min="20" max="150" step="5"/><br/>
15             <input type="submit" value="提交" onclick="check();"/>
16         </form>
17         <script type="text/javascript">
18             var check = function()
19             {
20                 if(!document.getElementById("name").checkValidity())
21                 {
22                     document.getElementById("name").setCustomValidity("图书名是必填的！");
23                 }
24                 if(!document.getElementById("isbn").checkValidity())
25                 {
26                     document.getElementById("isbn").setCustomValidity("图书ISBN必须填写，"
27                         + "\n而且必须符合xxx-x-xxx-xxxxx的格式（其中x代表数字）。");
28                 }
29                 if(!document.getElementById("price").checkValidity())
30                 {
31                     document.getElementById("price").setCustomValidity("图书价格必须填写，"
32                         + "\n而且必须在20~150之间，且是5的倍数。");
33                 }
34             };
35         </script>
36     </body>
37 </html>

View Code

------------------------------转载请注明：http://www.cnblogs.com/zhjsll/p/3844040.html ------------------------------

posted @ 2014-07-15 09:30 HuijunZhang 阅读(933) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

小小码农

博客地址已转移至：https://zhanghuijun0.github.io/

HTML5表单

一、HTML原有的表单

二、HTMl5新增的元素和属性

1、FileList对象与File对象

2、使用FileReader读取文件内容

四、HTML5新增的客户端校验

1、属性校验

2、调用checkValidity方法进行校验

3、自定义错误提示

公告