HTML5新特性——十个新特性

(1)新的语义标签 (2)增强型表单 (3)音频和视频(4)Canvas绘图(5)SVG绘图(6)地理定位(7)拖放API(8)Web Worker(9)Web Storage(10)Web Socket

1.HTML5表单的新特性

(1) 新的input type

H4中input type:text、password、radio, checkbox, file, hidden, submit, reset, image

H5中input type:email, url, number, tel, search, range, color, date, month, week

(2)新的表单元素

H4中 form element: input, textarea, select/option, label

H5中新增的 form element: datalist, progress, meter, output

Datalist位input提供一个输入建议列表，用户可以手动输入，也可以选择：

acton="">
    
    Please input you need option:
    type="text" name="select option" list="optionList">

Progress:不推荐使用。推荐使用DIV+CSS代替（可以仿照bootstrap中的进度条组件自定义）

acton="">
    Internet is connecting ...id="p1">

    Download file value:value="0.5" id="p2">

    Picture downloading value="0" id="p3">

Meter: 刻度尺，用于标识一个值所处的范围，红色，黄色，绿色

 high="合理的上限值" optimum="最佳值" value="当前实际值">

acton="">
    
    机油含量：id="m1" min="0" max="100" low="30" high="70" optimum="40" value="0">
    
    PM 2.5: id="m2" min="0" max="500" low="100" high="300" optimum="10" value="0">
    
    每月薪资： id="m3" min="0" max="10000" low="5000" high="8000" optimum="10000" value="0">

Output:输出，语义标签(like: footer)，没有任何外观样式，等同于Span

acton="">
    price: ￥88.10  number:type="number" value="1" max="99"/>
    total: 
￥88.10

    price: ￥99.10  number:type="number" value="1" max="99"/>
    total: 
￥99.10


    All total: 
￥187.20

(3)表单元素的新属性

H4中表单element attr:

    id,class,title,style,type,value,name,readonly,disabled,checked.

H5中的表单element attribute：

(1)placeholder:占位字符， 显示在input框中仅做提示

(2)autofocus：自动获取焦点

(3)multiple : 允许输入框中的多个输入(用逗号分开)，如邮箱

加name属性才能提交input中的值

(4) form: 让表单元素可以写在FORM表单元素的外面

user name:type="text" placeholder="Please input your name..." autofocus value="" name="username" form="f5"/>

Password: type="text" placeholder="Please input password ..." autofocus name="userpsw" form="f5"/> 

action="5.do"  id="f5">

   Your used all email address:

    type="email" name="userMails" multiple />


type="submit" form="f5">

(5)required:必填项，内容不能为空

(6)maxlength：指定字符串最大长度

(7)minlength：指定字符串最小长度

(8)max： 指定数字最大值

(9)min：指定数字最小值

(10)pattern:指定输入必须符合的正则表达式  

pattern="1[35789]\d{9}">

在js中idname.value可以直接获得表单的value属性的值。

寻找WebStorm注册码的地址：

http://blog.csdn.net/aya19880214/article/details/40681315