HTNL5智能表单(新的表单类型、属性、虚拟键盘适配)

3. 智能表单

3.1. 新的表单类型

email - 限定输入内容为邮箱地址，表单提交时会校验格式
url - 限定输入内容为URL，表单提交时会校验格式
number - 限定输入内容为数字，表单提交时会校验格式
range - 数值范围选择器
Date Pickers - 日期时间选择器
- 样式不能修改，移动端用的比较多，因为移动端显示的是系统的时间或日期选择器
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年，浏览器兼容性不好，效果等同于datetime-local
- datetime-local - 选取本地时间、日、月、年
search - 搜索域，语义化，表示定义搜索框

3.2. 新的表单属性

form 上使用的新属性
- autocomplete 设置整个表单是否开启自动完成 on|off
- novalidate 设置H5的表单校验是否工作 true 不工作不加该属性代表校验
input 上使用的新属性
- autocomplete 单独设置每个文本框的自动完成
- autofocus 设置当前文本域页面加载完了过后自动得到焦点
- form 属性是让表单外的表单元素也可以跟随表单一起提交
- form overrides
  - formaction 在submit上重写表单的特定属性，当点击当前submit时会以当前值使用
  - formenctype,
  - formmethod,
  - formnovalidate,
  - formtarget
- list 作用就是指定当前文本框的自动完成列表的数据 datalist 在界面上是看不见的，只是用于定义数据列表的
- min / max / step
  - min max 限制值的范围，但是不会再输入时限制，提交时校验，
  - step设置的是每次加减的增量
  - 主要使用在number range datepicker上
- multiple
  - 文本域的多选
- pattern
  - 设置文本框的匹配格式（正则）
- placeholder
  - 文本框占位符
- required
  - 限制当前input为必须的

3.3. 虚拟键盘适配

在移动端中，我们可以通过不同的表单类型控制弹出的键盘类型

3.4. 关于什么时候使用H5的新特性，能不能使用新特性的问题

无伤大雅的地方直接用
- 比如一个文本框，加上placeholder就具备占位文本提示功能，浏览器不支持也不会报错，那就可以直接使用
- 再比如<input type="email">，如果浏览器不支持，默认会显示文本框，那也可以直接用。

HTNL5智能表单(新的表单类型、属性、虚拟键盘适配)相关推荐

java实现将A表数据转移到B表_解决用B表跟新A表数据，如果A表中没有，则把B表的数据插入A表（merge into）...
作用:merge into 解决用B表跟新A表数据,如果A表中没有,则把B表的数据插入A表: 语法: MERGE INTO [your table-name] [rename your table h ...
html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
oracle如何收缩表空间,ORACLE收缩表空间
最近导一个空库到数据库后,发现占用的表空间非常大,执行表收缩(SHRINK SPACE CASCADE)后,发现实际占用的空间不到1%. 但是收缩表空间大小提示错误 ALTER DATABAS ...
R语言write.xlsx函数将数据写入Excel文件：写入Excel文件并自定义表单的名称、将数据写入Excel文件新的表单（sheet）中、将文件保存为xls文件格式(而不是xlsx)
R语言write.xlsx函数将数据写入Excel文件:写入Excel文件并自定义表单的名称.将数据写入Excel文件新的表单(sheet)中.将文件保存为xls文件格式(而不是xlsx) 目录
BootStrap 智能表单系列五表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
HTML5新的解析顺序,HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. HTML5表单新功能解析 ...
C语言单相智能电表课程设计,《单相单用户电能表的设计课程设计》
<<单相单用户电能表的设计课程设计>>由会员分享,可在线阅读,更多相关<<单相单用户电能表的设计课程设计>(10页珍藏版)>请在金锄头文库上搜索. 1. ...
GerbView生产高级软件,支持新旧表单
GerbView生产高级软件,支持新旧表单 GerbView生产高级软件Companions,但也易于用于替换.打印和查看HPGL.HPGL/2.Excellon和国际象棋文件.该程序支持RS274D ...
html5表单新特性
html5表单新特性学习的笔记,记录备忘. 效果图: 代码: <!DOCTYPE html> <html><head><meta charset=" ...

HTNL5智能表单(新的表单类型、属性、虚拟键盘适配)

3. 智能表单

3.1. 新的表单类型

3.2. 新的表单属性

3.3. 虚拟键盘适配

3.4. 关于什么时候使用H5的新特性，能不能使用新特性的问题

HTNL5智能表单(新的表单类型、属性、虚拟键盘适配)相关推荐

最新文章

热门文章