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. H5表单新特性

    1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text.password.rad ...

  3. HTML5基础知识汇总_(2)自己定义属性及表单新特性

    自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然 ...

  4. html5表单新特性

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

  5. 完善:HTML5表单新特征简介与举例——张鑫旭

    一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...

  6. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

  7. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

  8. HTML5新标签与特性---新表单+新属性----综合案例1

    HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

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

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

随机推荐

  1. 转:Delphi 6 实用函数

    来自: daocaoren0824, 时间: -- ::, ID: 再给你一份 程序员实用函数 {▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎} {▎ ▎} {▎ 大 ...

  2. Java基础加强之多线程篇(线程创建与终止、互斥、通信、本地变量)

    线程创建与终止 线程创建 Thread类与Runnable接口的关系 public interface Runnable { public abstract void run(); } public ...

  3. pycharm快捷键、配置virtualenv环境,配置django调试,配置远程调试

    pycharm安装和首次使用 http://blog.csdn.net/chenggong2dm/article/details/9365437 快捷键: 找文件.代码.引用相关 1.双击shift ...

  4. 2019年台积电进军AR芯片,将用于下一代iPhone

    近日,有报道表示台积电10nm 芯片可怜的收益率可能会对 2017 年多款高端移动设备的推出产生较大的影响,其中自然包括下一代 iPhone 和 iPad 机型.不过,台积电正式驳斥了这一说法,表明1 ...

  5. 关于scale和zoom的区别

    其实关于scale,我之前是用他来搞一些css3的特效的放大缩小啊,玩的也挺6666,而*zoom:1之前是用来做css的hack,也就是触发IE6/7的haslayout清除浮动的.终于某天,好事的 ...

  6. TLV(类型—长度—值)格式及编码

    转自: http://www.cnblogs.com/tml839720759/archive/2014/07/13/3841820.html 引子: 前段时间在项目中第一次接触TLV,项目中用这种格 ...

  7. VS调试程序时一闪而过的问题-解决方法(网上搜集)

    在VS2012里的控制台应用程序在运行时,结果画面一闪而过,不管是用F5 还是用Ctrl + F5都是一样,导致无法看到结果. 网上有不少的办法,说是都是在程序最后加一个要程序暂停的语句或从控制台上获 ...

  8. 个人查阅资料-Sql语句

    SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...

  9. advstringgrid笔记

    一下操作是在advstringgrid7.4.6.3版本下有效,advstringgrid控件名设置为 zy 一.属性设置 1.修改单元格内的值:zy.cells[col,row]='value'; ...

  10. SqlServer游标简介

    游标实例:             Declare MyCusror Cursor Scroll For Select * From Master_Goods Order By GoodsID Ope ...