HTML5_01之表单新特性
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之表单新特性的更多相关文章
- HTML5 十大新特性(二)——表单新特性
H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...
- H5表单新特性
1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text.password.rad ...
- HTML5基础知识汇总_(2)自己定义属性及表单新特性
自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然 ...
- html5表单新特性
type=range 值区域范围 默认值(0-100) type=data 选择日期 type=color value='初始值' 颜色选择器控件 type=search 搜索框效果 type=im ...
- 完善:HTML5表单新特征简介与举例——张鑫旭
一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...
- HTML5表单新属性
HTML5表单新属性 autofocus 自动聚焦 <input type="text" autofocus> placeholder占位文本 tel ...
- HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
- HTML5新标签与特性---新表单+新属性----综合案例1
HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...
- 走进AngularJs 表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
随机推荐
- 转:Delphi 6 实用函数
来自: daocaoren0824, 时间: -- ::, ID: 再给你一份 程序员实用函数 {▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎} {▎ ▎} {▎ 大 ...
- Java基础加强之多线程篇(线程创建与终止、互斥、通信、本地变量)
线程创建与终止 线程创建 Thread类与Runnable接口的关系 public interface Runnable { public abstract void run(); } public ...
- pycharm快捷键、配置virtualenv环境,配置django调试,配置远程调试
pycharm安装和首次使用 http://blog.csdn.net/chenggong2dm/article/details/9365437 快捷键: 找文件.代码.引用相关 1.双击shift ...
- 2019年台积电进军AR芯片,将用于下一代iPhone
近日,有报道表示台积电10nm 芯片可怜的收益率可能会对 2017 年多款高端移动设备的推出产生较大的影响,其中自然包括下一代 iPhone 和 iPad 机型.不过,台积电正式驳斥了这一说法,表明1 ...
- 关于scale和zoom的区别
其实关于scale,我之前是用他来搞一些css3的特效的放大缩小啊,玩的也挺6666,而*zoom:1之前是用来做css的hack,也就是触发IE6/7的haslayout清除浮动的.终于某天,好事的 ...
- TLV(类型—长度—值)格式及编码
转自: http://www.cnblogs.com/tml839720759/archive/2014/07/13/3841820.html 引子: 前段时间在项目中第一次接触TLV,项目中用这种格 ...
- VS调试程序时一闪而过的问题-解决方法(网上搜集)
在VS2012里的控制台应用程序在运行时,结果画面一闪而过,不管是用F5 还是用Ctrl + F5都是一样,导致无法看到结果. 网上有不少的办法,说是都是在程序最后加一个要程序暂停的语句或从控制台上获 ...
- 个人查阅资料-Sql语句
SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...
- advstringgrid笔记
一下操作是在advstringgrid7.4.6.3版本下有效,advstringgrid控件名设置为 zy 一.属性设置 1.修改单元格内的值:zy.cells[col,row]='value'; ...
- SqlServer游标简介
游标实例: Declare MyCusror Cursor Scroll For Select * From Master_Goods Order By GoodsID Ope ...