H5新增表单

2014-12-18

HTML 新增表单类型

- 邮箱<input type="email" name="email" id="email">
  注意：会验证邮箱的格式，如果输入错误，则会提示
- 网址 <input type="url" name="url" id="url">
注意：会验证输入的url是否带有http或https协议前缀，如果没有，则会提示
- 搜索 <input type="search" name="search" id="search">
注意：在有内容的情况下，会出现清除按钮
- 数字 <input type="number" name="number" id="number" max=" min=" step="" value="">
注意：Max：数字输入框的最大值
  Min：数字输入框的最小值
  Step：步进值
  Value：当前的值
- 范围 <input type="range" name="range" id="range" max=" min=" step=" value=">
    注意：Max：数字输入框的最大值
      Min：数字输入框的最小值
      Step：步进值
      Value：当前的值
- 时间 <input type="time" name="time" id="time">
- 日期 <input type="date" name="date" id="date">
- 颜色 <input type="color" name="color" id="color">
- 手机号 <input type="tel" name="tel" id="tel">

新增表单元素

datalist 数据列表
一般河input配合使用，要保证datalist的id和input的listd的值完全一致
例： <input type="text" name="text" id="text" list="program">
<datalist id="program">
    <option value="java"></option>
    <option value="php"></option>
    <option value="C++"></option>
</datalist>

新增表单属性

1 placeholder 占位符 
告诉用户在该输入框中输入什么样的内容
2 Autocomplete  自动完成
当在输入框中输入，提交之后，下次输入可以自动填充
3 autofouse 
自动完成，当页面载入之后，光标会自动聚焦在该输入框上
4 require 
必填，拥有该属性的输入框，如果不填，则无法成功提交
5 multiple 
多选，可以一次性选择多个文件
6 pattern 
自定义验证，根据正则表达式验证内容是否符合正则的规则

新增的表单事件

1 element.oninput=function(){}
作用：当用户在该输入框中输入的时候，会多次触发该事件
2 element.oninvalid=function(){}
作用：当验证不通过的时候，会触发该事件
3 element.setCustomValidity('')
作用：设置错误提示的信息

HTML5 多媒体标签

1 Audio 标签媒体标签
例： <audio controls="controls" autoplay="autoplay" loop="loop">
<source src="...." type="audio/mp3">    
</audio>
2 Video 标签播放视频
    <audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="...." type="video/mp4">    
    </audio>
audio文件格式： ogg, Mp3,WAN,
video 文件格式： ogg MP4, WebM

HTML5 的DOM扩展

1 API获取元素
 document.querySelector('');
 document.querySelectorAll('');
 2 API 操作类名
 node.classList.add('')  添加类名
 node.classList.remove('') 删除类名
 node.classList.contains('') 判断类名中是否包含一个类名
 node.classList.toggle('')
 替换类名 （有则删除，无则添加）

API 自定义属性

自定义属性设置
以data开头 
格式： data-*(自定义的值)=value;
获取 node.dataset.* （*代表我们自己给属性起的名字）
用js获取自定义属性的值
node.dataset.*=value