H5表单新特性
1.HTML5表单新特性之——新的input type
<input type=" ">
HTML5之前已有的input type:
text、password、radio、checkbox、file、submit、reset、button、image、hidden
HTML5新增的input type:
1.Email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示矿口(可定制内容不能定制样式)
<input type="email">
2.url:URL地址输入域。在表单提交时提供简单的URL地址格式验证,并弹出一个提示窗口
<input type="url">
3.number:数字输入域,在表单提交时提供简单的数字格式验证,并弹出一个提示窗口
<input type="number" min="" max="" step="">
4.tel:电话号码输入域,在手机浏览器中弹出数字键盘
<input type="tel">
5.search:搜索输入域,在手机浏览器中右下角呈现搜索按键
<input type="search">
6.range:范围选择控件,帮助用户在一定范围内选择一个数字
<input type="range" min="" max="" step="">
(7)color:颜色选择控件,浏览器并未自己实现颜色选择框,而是使用操作系统自带的颜色选择控件
<input type="color">
(8)date:日期选择控件,FF没有实现,推荐使用第三方插件代替,如jQueryUI-datepicker、laydate等
<input type="date">
(9)month:月份选择控件,FF没有实现
<input type="month">
(10)week:星期选择控件,FF没有实现
<input type="week">
HTML5新特性之表单新特性——新的表单元素
HTML5之前FORM可以有的标签——用于数据提交:
INPUT、TEXTAREA、SELECT/OPTION、BUTTON
HTML5新增表单元素——用于信息提示,不能用于数据提交:
(1)datalist:数据列表,配合option使用,本身为不可见元素,为普通的input提供输入建议列表
<datalist id="l"><option>XXX</option></datalist>
<input type="text" list="l">
(2)progress:进度条,未指定value属性则显示为“进行中”样式;若指定了value(默认在0~1之间)就可以控制其显示的进度
<progress value="0.5"></progress>
(3)meter:刻度尺/度量衡,用红黄绿三色表示出一个数值所处的范围:不可接受/可以接受/最优范围
<meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最优值" value="实际值"></meter>
(4)output:输出,用于描述表单中的计算结果,语义标签,样式与SPAN无异。
<output>xxx</output>
HTML5新特性表单新特性——表单元素新的属性——重点
HTML5之前表单元素可用的属性:
id、class、title、style、type、name、value、checked、selected、disabled、readonly
HTML5之前表单元素新增的属性:
(1)autocomplete:on/off,自动补全,是否自动记录之前提交的数据,以用于下一次输入建议
<input autocomplete="off">
(2)placeholder:站位符,用于在输入框中显示提示性文字,与value不同,不能被提交
<input placeholder="提示性文字">
(3)autofocus:false/true,自动获得输入焦点
<input autofocus>
(4)multiple:false/true,是否允许多个输入值,若声明了该属性,输入框中(如email)就允许输入用逗号分隔的多个值
<input type="email" multiple>
(5)form:为一个元素指定form属性,值为某个表单的ID,则此输入域可以放到表单的外部
<form id="f"></form>
<input form="f">
========上述五个属性是新的通用属性===========
=======上述六个属性是输入验证相关属性========
(6)required:false/true,必需的/必填项,在表单提交时会验证是否有输入,没有输入则弹出提示消息
<input required>
(7)maxlength:最大长度,在有输入的情况下,限定输入域中字符的个数
<input maxlength="9">
(8)minlength:最小长度,在有输入的情况下,限定输入域中字符的个数,不是HTML5标准属性,仅部分浏览器支持(如Chrome)
<input minlength="6">
(9)min:限定输入的数字的最小值
<input min="">
(10)max:限定输入的数字的最大值
<input max="">
(11)step:限定输入的数字的步长,与min属性连用
<input step="">
(12)pattern:指定一个正则表达式,对输入进行验证
<input pattern="1[3578]\d{9}">
注意:上述正则表达式可以省略^和$
H5表单新特性的更多相关文章
- HTML5 十大新特性(二)——表单新特性
H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...
- HTML5_01之表单新特性
1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt ...
- HTML5基础知识汇总_(2)自己定义属性及表单新特性
自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然 ...
- html5表单新特性
type=range 值区域范围 默认值(0-100) type=data 选择日期 type=color value='初始值' 颜色选择器控件 type=search 搜索框效果 type=im ...
- H5表单
H5表单 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range ...
- 完善:HTML5表单新特征简介与举例——张鑫旭
一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...
- 基于react hooks,zarm组件库配置开发h5表单页面
最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...
- HTML5表单新属性
HTML5表单新属性 autofocus 自动聚焦 <input type="text" autofocus> placeholder占位文本 tel ...
- HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
随机推荐
- 从Windows转mac遇到的一些坑
本屌由于运气,分了一台imac来办公,由于以前一直都在用windows,现在用Mac有很多不适应的地方.下面介绍一下Mac与Windows有明显区别的地方: mac与windows鼠标滑轮方向不同. ...
- C/C++中回调函数【重要】
参考学习:https://www.cnblogs.com/xuelisheng/p/9339924.html 1. 回调函数定义 回调函数就是一个通过函数指针调用的函数. 如果你把 函数的指针(地址) ...
- SharpGL学习笔记(一) 平台构建与Opengl的hello World (转)
(一)平台构建与Opengl的hello World OpenGL就是3d绘图的API,微软针和它竞争推出D3D,也就是玩游戏时最常见的DirectorX组件中的3d功能. 所以不要指望windows ...
- Swift4.0复习错误处理
1.Swift中错误的表示: “在Swift中如果我们要定义一个表示错误的类型非常简单,只需遵循 Error 协议即可.我们通常用枚举或结构体类型来表示错误类型,当然枚举可能用得更多些,因为它能更直观 ...
- dockerfile里面的内容编写顺序,必须严格按照顺序编写,否则编译不成
完整文档请参照https://www.cnblogs.com/effortsing/p/10480972.html 这里只介绍dockerfile里面的步骤顺序 cat>/home/jenkin ...
- 【编程基础】CppLint工具使用过程
前言 coding最好要形成一定的编程风格,一般常用的开源风格有google code style,可以使用cpplint工具检查是否符合该编程风格. 目录 1. linux系统使用过程: 2. wi ...
- .Net Core 程序报错 在上一个操作完成之前,在此上下文上启动了第二个操作。
错误一: 程序完整报错: A second operation started on this context before a previous operation completed. This ...
- WPF 使用winform的webbrowser
首先要添加如下引用: WindowsFormsIntegration System.Drawing System.Windows.Forms 然后在xaml中添加引用 xmlns:winform=&q ...
- XML字符串和JAVA对象之间的转化
1.JAXB中相关的注解.类和接口说明 JAXB 中主要的一些注解 - shenyunsese 的专栏 - CSDN 博客 注:教程很全面很详细.但是仅供参考. 主要疑问区分和说明: 1.1 @X ...
- android基础---->传感器的使用
现在每部Android 手机里面都会内置有许多的传感器,它们能够监测到各种发生在手机上的物理事件,而我们只要灵活运用这些事件就可以编写出很多好玩的应用程序.今天我们开始简单的传感器使用的学习. 目录导 ...