1、WebStorm快捷键:
 Ctrl+Alt+(向下方向键):快速复制当前行
 Alt+(向上/下方向键):移动当前行
 Ctrl+D:删除当前行
 Ctrl+/:快速(取消)注释当前行
 Ctrl+Alt+L:格式化当前文档
2、HTML5九大新特性:
 ①表单新特性、②视频音频、③Canvas绘图、④SVG绘图、⑤地理定位、⑥拖放API、⑦WebWorker、⑧WebStorage、⑨WebSocket
3、表单Input类型:
 ①已有type类型:
  text(文本框)、password(密码框)、radio(单选按钮)、checkbox(复选框)、button(普通按钮)、reset(重置)、submit(提交)、image(图片)、file(文件选择)、hidden(隐藏域);
 ②HTML5新添加type类型:
  number:数字输入框,相应属性:min(最小值)、max(最大值)、step(等差值);
  email:邮件输入框,默认验证规则——中间‘@’符号,前后各至少一个字符;
  url:URL地址输入框,默认验证规则——冒号‘:’,且前面存在任意字符;
  tel:电话号码输入框,无格式验证,手机浏览器弹出数字键盘;
  search:搜索输入框,PC下Chrome搜索框内有删除符号‘x’,手机弹出键盘右下角显示‘搜索’;
  range:范围选择滑块,相应属性:min(最小值)、max(最大值)、value(默认值)、step(等差值);
  color:颜色选择窗口,浏览器会调用操作系统提供的颜色选择窗口,提交的是颜色值;
  date:日期选择窗口,不能定制样式,相应属性:min(最小日期,取值“xxxx/xx/xx”);
  month:月份选择器;
  week:星期/周选择器;
4、表单元素:
 ①已有表单元素——可与用户交互并提交:input(各种形式交互表单)、select(option)(下拉选择)、textarea(文本输入域)、button(普通按钮);
 ②HTML5新增表单元素——不能交互/提交,仅作信息展示:
  datalist:数据列表,为输入框提供输入建议;例:
   <datalist id="xx">
    <option>xxxxx</option>
    <option>xxxxx</option>
    ...
   </datalist>
   <input list="xx">
  progress:进度条;例:
   <progress value=""></progress>
  meter:度量衡,刻度尺,使用不同颜色标识出数据所处的区间;例:
   <meter min="0" low="25" value="0" high="75" optimum="50" max="100"></meter>
  output:输出值,用于表示数据的计算结果,语义标签;例:
   <output for="xx"></output>
5、表单元素属性:
 ①已有表单标签常用属性:name、value、readonly、disabled(禁用)、checked(选中)、for;
 ②HTML5新增表单标签属性:
  placeholder:占位提示消息,与value不同,仅能提示,不能提交;例:
   <input placeholder="提示性文字">
  autofocus:自动获得焦点;
  multiple:多项,用于email和file输入框,允许输入多个值,逗号分隔;例:
  autocomplete:自动完成,取值on/off,指定输入域是否记录上次提交的输入,下次输入时给予提示;
  form:表单,指定当前输入域所属的表单ID,可以将声明了form的输入框放到表单元素外面,仍可以一同被提交;例:
   <form id="formID">...</form>
   ...
   <input form="formID">
  required:必填项,提交时验证,若没有输入则无法提交;
  min:最小值,若输入值小于该值则无法提交;
  max:最大值,若输入值大于该值则无法提交;
  minlength:最小长度,若输入的字符串长度小于该值无法提交(非HTML5标准属性,FireFox不支持,Chrome支持);
  maxlength:最大长度,若输入字符串长度大于该值无法提交;
  pattern:正则表达式样式,若输入字符串不符合指定正则表达式则无法提交;例:
   <input pattern="^1[3578]\d{9}$">
6、自定义表单错误提示消息:
 HTML5新增表单输入域属性:validity(有效性) ;
 ValidityState{
  valid:true;
  badInput:false——无效输入,number;
  customError:false——自定义错误,setCustomValidity('')参数字符串有内容,customError就变为true;参数值是空字符串,customError变为false;
  patternMismatch:false——样式不匹配,pattern;
  rangeOverflow:false——范围上溢出,max;
  rangeUnderflow:false——范围下溢出,min;
  stepMismatch:false——步长不匹配,step;
  tooLong:false——字符串太长,maxlength;
  tooShort:false——字符串太短,minlength;
  typeMismatch:false——类型不匹配,email/url;
  valueMissing:false——值缺失,required;
 }

HTML5_01之表单新特性的更多相关文章

  1. HTML5 十大新特性(二)——表单新特性

    H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...

  2. html5表单新特性

    type=range 值区域范围 默认值(0-100) type=data  选择日期 type=color value='初始值' 颜色选择器控件 type=search 搜索框效果 type=im ...

  3. 走进AngularJs 表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  4. 走进AngularJs(九)表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  5. HTML5的新特性

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.footer. ...

  6. HTML5的常用新特性你必须知道

    HTML5的常用新特性你必须知道 1 新的 声明 HTML 有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是 的用处. 不是 HTML ...

  7. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  8. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  9. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

随机推荐

  1. 机器学习——支持向量机(SVM)之拉格朗日乘子法,KKT条件以及简化版SMO算法分析

    SVM有很多实现,现在只关注其中最流行的一种实现,即序列最小优化(Sequential Minimal Optimization,SMO)算法,然后介绍如何使用一种核函数(kernel)的方式将SVM ...

  2. STOMP协议介绍

    STOMP,Streaming Text Orientated Message Protocol,是流文本定向消息协议,是一种为MOM(Message Oriented Middleware,面向消息 ...

  3. linux java so 历险

    一开始 -bash-4.1# java -cp "/usr/linkapp/bin/tomcat-master/webapps/ROOT/WEB-INF/lib/*":" ...

  4. web前端~~浏览器兼容问题(百度)

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  5. 个人介绍和Github使用流程

    我叫石莉静,来自网络工程143班,学号1413042067 我的兴趣爱好有看电影.动漫,听音乐,摄影,寻找美食等等. 个人编程能力:非常真诚的说,我的编程能力蛮差的,用C++写过一共写过...(很少很 ...

  6. Html标签第三课

    1.css div { position:absolute; } #d1 { height:100px; width:100px; border: solid 1px red; background- ...

  7. nohup使用(转)

    在启动weblogic的时候我们经常看到如下的命令: nohup ./startWebLogic.sh >out.log 2>&1 & 其中 0.1.2分别代表如下含义:  ...

  8. vs默认VS Development Sever和用IIS Web Server的一点差别

    关于VS Development Server(vs调试默认运行环境)和IIS Web Server 做运行服务器时,请求处理的一点区别. 将请求粗略分为两类:静态资源请求和动态资源请求. 静态资源请 ...

  9. 微信支付之JSAPI开发第一篇-基本概念

    申请权限 具体步骤就不说了,进入微信支付商户平台进行申请认证,认证成功后在微信公众号后台会有个微信支付的菜单按钮,点击后会有如下的信息 配置 在进行微信支付开发之前,必须进行一些必要的配置,如果这些配 ...

  10. VPN常见错误码(633,628,691)的意思及修复方法

    因为工作原因经常上国外网站需要用到VPN,在这里总结一下使用中可能遇到的一些常见问题.(目前用Nydus觉得还不错) 1.633错误 :由于Windows系统本身的问题,在PPTP协议连接多次并断开之 ...