HTML5新的语义标签和属性&表单新特性

HTML5新特性 —— 十大新特性

(1)新的语义标签和属性

(2)表单新特性

(3)视频和音频

(4)Canvas绘图

(5)SVG绘图

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

HTML5表单新特性

(1)新的input type

(2)新的表单标签

(3)表单标签的新属性

HTML5表单新特性之——新的input type—— 了解

HTML5之前已有的input type：

text、password、radio、checkbox、file、submit、reset、button、image、hidden

HTML5新增加的input type：

(1)email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口(可定制内容不能定制样式)

(2)url：URL地址输入域，在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口(可定制内容不能定制样式)

(3)number：数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口(可定制内容不能定制样式)

(4)tel：电话号码输入域，在手机浏览器中弹出数字输入键盘

(5)search：搜索输入域，在手机浏览器中右下角呈现搜索按键

(6)range：范围选择控件，帮助用户在一定范围内选择一个数字

实现一个调色板

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title></title>
 6   <style>
 7     #box {
 8       width: 200px;
 9       height: 100px;
10       border: 1px solid #aaa;
11     }
12     input[type="range"] {
13       vertical-align: middle;
14     }
15   </style>
16 </head>
17 <body>
18 <h3>练习：新的input type——range</h3>
19 
20 <div id="box"></div>
21 红色：<input type="range" max="255" value="255" id="red"><span>255</span><br>
22 绿色：<input type="range" max="255" value="255" id="green"><span>255</span><br>
23 蓝色：<input type="range" max="255" value="255" id="blue"><span>255</span><br>
24 
25 <script>
26   var list = document.querySelectorAll('[type="range"]');
27   for(var i=0; i<list.length; i++){
28     range = list[i];
29     range.onchange = function(){
30       //修改range后面的span的内容
31       this.nextElementSibling.innerHTML = this.value;
32       //修改上方div#box的背景颜色
33       setBoxBG();
34     }
35   }
36   function setBoxBG(){
37     var r = red.value;
38     var g = green.value;
39     var b = blue.value;
40     box.style.background = `rgb(${r},${g},${b})`;
41   }
42 
43 </script>
44 
45 
46 
47 </body>
48 </html>

View Code

效果如下图

(7)color：颜色选择控件，浏览器并未自己实现颜色选择框，而是使用操作系统自带的颜色选择控件

(8)date：日期选择控件，FF没有实现，推荐使用第三方插件代替，如jQueryUI-datepicker、laydate等

(9)month：月份选择控件，FF没有实现

(10)week：星期选择控件，FF没有实现

HTML5新特性之表单新特性——新的表单元素

HTML5之前FORM可以有的标签——用于数据提交：

INPUT、TEXTAREA、SELECT/OPTION、BUTTON

HTML5新增表单元素——用于信息提示，不能用于数据提交：

(1)datalist：数据列表，配合option使用，本身为不可见元素，为普通的input提供输入建议列表

(2)progress：进度条，未指定value属性则显示为“进行中”样式；若指定了value（默认在0~1之间）就可以控制其显示的进度

使用定时器让进度条不断前进，到100%就要停止

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title></title>
 6 </head>
 7 <body>
 8   <h3>HTML5表单新特性——新的表单元素</h3>
 9 
10   <form>
11     <datalist id="dishList">
12       <option>鱼香肉丝</option>
13       <option>青椒肉丝</option>
14       <option>京酱肉丝</option>
15       <option>茄丁肉丝</option>
16     </datalist>
17     中午午餐：<input type="text" list="dishList" name="lunch" autocomplete="off"><br>
18 
19     下载进度：<progress id="p1"></progress><br>
20     下载进度：<progress id="p2" value="0.0"></progress><br>
21 
22     <!--最优值在合理下限/上限之间：黄-绿-黄-->
23     机油含量：<meter id="m1" min="0" max="100" low="30" high="60" optimum="45" value="0"></meter><br>
24 
25     <!--最优值在合理下限之下：绿-黄-红-->
26     PM25含量：<meter id="m2" min="0" max="500" low="100" high="300" optimum="50" value="0"></meter><br>
27 
28     <!--最优值在合理上限之上：红-黄-绿-->
29     每月工资：<meter id="m3" min="0" max="100000" low="20000" high="60000" optimum="80000" value="0"></meter><br>
30 
31     单价：￥100.00 数量：<input type="number" min="1" max="99" value="2"> 小计：￥
32     <output>200.00</output><br>
33 
34 
35     <input type="submit"/>
36   </form>
37 
38   <script>
39     var timer = setInterval(function(){
40       var v = p2.value;
41       v = parseFloat(v);
42       v += 0.05;
43       p2.value = v;
44       if(v>=1){
45         clearInterval(timer);
46       }
47     },100)
48 
49     var tm1 = setInterval(function(){
50       var v = m1.value;
51       v = parseInt(v);
52       v+=2;
53       m1.value = v;
54       if(v>=100){
55         clearInterval(tm1);
56       }
57     }, 100)
58     var tm2 = setInterval(function(){
59       var v = m2.value;
60       v = parseInt(v);
61       v+=10;
62       m2.value = v;
63       if(v>=500){
64         clearInterval(tm2);
65       }
66     }, 100)
67     var tm3 = setInterval(function(){
68       var v = m3.value;
69       v = parseInt(v);
70       v+=1000;
71       m3.value = v;
72       if(v>=100000){
73         clearInterval(tm3);
74       }
75     }, 100)
76   </script>
77 
78 
79 
80 
81 
82 </body>
83 </html>

View Code

效果图如下：

(3)meter：刻度尺/度量衡，用红黄绿三色表示出一个数值所处的范围：不可接受/可以接受/最优范围

(4) output：输出，用于描述表单中的计算结果，语义标签，样式与SPAN无异。

6.HTML5新特性表单新特性——表单元素新的属性——重点

HTML5之前表单元素可用的属性：

id、class、title、style、type、name、value、checked、selected、disabled、readonly

HTML5之前表单元素新增的属性：

(1)autocomplete：on/off，自动补全，是否自动记录之前提交的数据，以用于下一次输入建议

(2)placeholder：站位符，用于在输入框中显示提示性文字，与value不同，不能被提交

(3)autofocus：false/true，自动获得输入焦点

(4)multiple：false/true，是否允许多个输入值，若声明了该属性，输入框中（如email）就允许输入用逗号分隔的多个值

(5)form：为一个元素指定form属性，值为某个表单的ID，则此输入域可以放到表单的外部

========上述五个属性是新的通用属性===========

=======上述六个属性是输入验证相关属性========

(6)required：false/true，必需的/必填项，在表单提交时会验证是否有输入，没有输入则弹出提示消息

(7)maxlength：最大长度，在有输入的情况下，限定输入域中字符的个数

(8)minlength：最小长度，在有输入的情况下，限定输入域中字符的个数，不是HTML5标准属性，仅部分浏览器支持（如Chrome）

(9)min：限定输入的数字的最小值

(10)max：限定输入的数字的最大值

(11)step：限定输入的数字的步长，与min属性连用

(12)pattern：指定一个正则表达式，对输入进行验证

注意：上述正则表达式可以省略^和$

7.总结：HTML5表单新特性：

(1)新的input type——10个

email、url、number、tel、search、range、color、date、month、week

(2)新的表单元素——4个

datalist、progress、meter、output

(3)表单元素的新属性——12个

autocomplete、autofocus、placeholder、multiple、form

required、maxlength、minlength、min、max、step、pattern

注意：加粗的是当前常用的！红色的特性可能弹出错误消息。

8.如何定制表单2.0中的错误提示消息内容——难点&掌握

HTML5为每个标签对应的JS对象添加了新属性，以标识用户输入的有效性：

input.validity {

badInput：false，无效的输入，如email输入无效

typeMismatch：false，类型不匹配，如number中出现字符

valueMissing：false，值缺失，如required验证失败

tooLong：false，输入的内容超过maxlength限制

tooShort：false，输入的内容不满足minlength限制

rangeOverflow：false，输入的数字超过max

rangeUnderflow：false，输入的数字不满足min

stepMismatch：false，步长不匹配

patternMismatch：false，正则表达式不匹配

customError：false，是否存在自定义错误

valid：true，输入值是否有效

}

注意：

(1)最后的validity.valid属性，只有其它属性都为false（没有任何错误），valid值为true；否则只要任何一个其它属性为true（说明有某方面的错误），valild值为false。

(2)上述属性的值会随着输入域中值的改变而立即改变，无需等到表单提交。

(3)使用input.setCustomValidity('XXX')可以生成一个自定义错误消息，使得validity.customError属性变为true；若执行input.setCustomValidity('')可以删除自定义错误消息，使得validity.customError属性变为false

(4)自定义错误消息的优先级高于任何系统自带的错误消息优先级。

posted @ 2017-01-07 11:53 时间脱臼阅读(313) 评论(0) 收藏举报

刷新页面返回顶部

时间脱臼

HTML5新的语义标签和属性&表单新特性

公告