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基础知识汇总_(2)自己定义属性及表单新特性

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

  3. html5表单新特性

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

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

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

  5. HTML5表单新属性

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

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

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

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

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

  8. HTML5的新特性

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

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

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

随机推荐

  1. Vim基础操作

    在正式使用Vim之前,先来点开胃菜,学习下Vim中一些常用的命令,有了这些基本命令,才能让我们使用Vim更加得心应手,加快工作的效率~ 注意:接下来将要介绍的命令主要是用在Vim的Normal模式下. ...

  2. easycwmp在开发板上的配置

    原创作品,转载请注明出处 copyright:weishusheng   2015.3.18 email:642613208@qq.com 平台: Linux version 2.6.32-279.e ...

  3. Google&#39;s Open Source SLAM Library ---- Cartographer

    What is Cartographer? Google announce the open source release of Cartographer, a real-time simultane ...

  4. Display Images in widget

    在自定义的widget中显示图片. 思路:定义类MyWidget,public 继承自QWidget,然后实现 void paintEvent(QPaintEvent *). 新建Empty qmak ...

  5. linux命令详解之useradd命令

    useradd命令使用方法,还包括用户账号的添加.删除与修改.用户口令的管理.用户组的管理方法. Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申 ...

  6. tomcat+nginx+redis实现均衡负载、session共享(二)

    今天我们接着说上次还没完成session共享的部分,还没看过上一篇的朋友可以先看下上次内容,http://www.cnblogs.com/zhrxidian/p/5432886.html. 1.red ...

  7. 汉高澳大利亚sinox接口捆绑经典winxp,全面支持unicode跨语言处理

    用qtconfig(或者qtconfig-qt4)设置字体后,汉澳sinox视窗界面以跟winxp媲美的界面出现,爽心悦目. 并且视窗使用非常稳定.非常少出现死机无响应现象,堪称完美. 引入unico ...

  8. configure HDFS(hadoop 分布式文件系统) high available

    注:来自尚学堂小陈老师上课笔记 1.安装启动zookeeper a)上传解压zookeeper包 b)cp zoo_sample.cfg zoo.cfg修改zoo.cfg文件 c)dataDir=/o ...

  9. Java经典编程题50道之五十

    有五个学生,每个学生有3门课的成绩,从键盘输入以上数据(包括学生号,姓名,三门课成绩),计算出平均成绩,况原有的数据和计算出的平均分数存放在磁盘文件 "stud"中. public ...

  10. BZOJ_3670_[Noi2014]动物园_KMP

    BZOJ_3670_[Noi2014]动物园_KMP Description 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的 ...