html5表单地区元素,html5新增表单域元素及属性
1、新增表单元素
在之前的HTML表单标签中,对于一些功能支持的不够好,比如:文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能。(早期是通过js和dom元素配合实现这些通用的功能)
在HTML5中,把这些常用的基本的功能直接加入到表单标签中。
新的标准中添加了很多输入型控件,比如:number、url、email、range、color等。而他们都是以 input标签的type属性出场,
1)number类型的input标签
表示当前标签只接受数字类型输入
name:用来标识表单提交时的key值
min和max:HTML5新增加的属性,表示当前输入框输入的最小和最大值
step: HTML5新增加的属性,是步长的意思,也就是在点击增大或者减小的时候的增加或减少的步长
2)email类型的input标签
表示当前input标签接受一个邮箱的输入
运行效果:
placeholder,提示信息
当表单在提交前,此文本框会自动校验是否符合邮箱的正则表达式
3)url类型的input标签
运行效果:
4)tel类型的input标签
运行效果:
5)range类型的input标签
滑块控件,输入范围内的数据变得非常简单容易
运行效果:
可与HTML5新增加的output标签一块使用,达到一个联动的效果。 标签定义一些输出类型计算表单结果配合oninput事件。
0
100
+
=
6) date pickers日期选择器类型的input标签
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
7)颜色选择input标签
运行效果:
input标签新增加的特有属性
autofocus:页面加载时,域自动地获得焦点。适用所有 标签的类型。
max、min、step:适用以下类型的 标签:date pickers、number 以及 range。
autocomplete:form或input域是否拥有自动完成功能(值为on和off)。适用于以下类型的 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
input标签新增加的特有属性
placeholder:提示信息属性。
multiple:输入域中可选择多个值,用于文件上传控件,设置此属性后,允许上传多个文件。适用于以下类型的 标签:email 和 file。
required: 当前文本框在提交前必须有数据输入。适用于以下类型的 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
input标签新增加的特有属性
pattern:规定用于验证输入字段的模式。pattern 属性适用于以下类型的 标签:text, search, url, telephone, email 以及 password。
示例:
国家代码:
input标签新增加的特有属性
form:规定输入域所属的一个或多个表单(而不是必须在进行包裹)。适用于所有 标签的类型。
First name:
下面的 "Last name" 字段位于 form 元素之外,但仍然是表单的一部分。
Last name:
html5表单地区元素,html5新增表单域元素及属性相关推荐
- Oracle 数据库表空间不足拓展方法实例演示,表空间剩余大小查看,通过新增表空间文件拓展表空间,表空间文件路径查看
Oracle 数据库表空间 第一章:表空间的拓展 ① 查看剩余表空间大小 ② 查看表空间文件路径 ③ 通过新增表空间文件拓展表空间 ④ 查看表空间已分配大小 第一章:表空间的拓展 ① 查看剩余表空间大 ...
- Polygon zkEVM中Goldilocks域元素circom约束
1. 引言 前序博客有: Goldilocks域 Goldilocks域 p=264−232+1p= 2^{64} - 2^{32} + 1p=264−232+1. Polygon zkEVM中Gol ...
- 【04】HTML5+CSS3:01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...
- html5新增了哪些表单元素,HTML5新增表单元素
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? HTML5新增表单元素主要有 input标签 其type类型主要有有以下几种:type="tel"用 ...
- html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
- html表单新增类型,HTML5表单设计——新增输入类型和新增表单属性
新增输入类型 email类型 用来输入邮箱地址的文本框.该文本框与普通文本框在页面显示时没有任何区别,专门用于接收Email地址信息.提交表单时自动验证是否符合Email地址格式,如果不符合,将提示相 ...
- html5新增标签——新增语义化标签、新增表单控件 、多媒体
1.html5 HTML5是一个新的网络标准,现在仍处于发展阶段.目标是取代现有的HTML 4.01和XHTML 1.0 标准.它希望能够减少互联网富应用(RIA)对Flash.Silverlight ...
- HTML5新增表单属性(HTML5)
HTML5新增表单属性(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
- html中input标签中type属性小总(包含html5新增表单属性)
前言 HTML5新增了许多属性和方法,其中一些就有input标签中 type属性. 有关于input中type的全部可取值如下 1.button 2.text 3.time(会呈现表的形状) 4. ...
最新文章
- 为Office Communicator启用超链接
- MongoDB使用小结:一些常用操作分享
- 图片的裁剪、旋转、平移、模糊
- P3932 浮游大陆的68号岛
- 有关域索引错误产生的原因及解决办法
- MySQL索引的一些问题
- [转]EXCEL截取字符串中某几位的函数——LeftMIDRight及Find函数的使用
- magento memcache缓存配置
- Python字符集编码和文件读写
- 临时更换swap优先级
- 2.概率论-概率论公理
- 微信小程序从云存储中读取图片
- 信息系统设计之软件设计和系统架构
- TI/德州仪器 SN74AHC1G04DBVR 单路反向器闸
- 我的产品经理书单(2017-2019)
- 目标检测(object detection)—— RCNN总结
- windows远程桌面占用CPU的处理办法
- 阿里云数据盘扩容操作遇险记录
- 多商家入驻分销平台开发 多商家入驻分销源码下载
- java中关于图片的操作
热门文章
- [多线程]多线程使用QTimer
- 计算机毕业优秀作品展观后感,毕业展观后感
- Make a mark of Gates
- 远程桌面打开任务管理器
- 学习C语言的相关网站(C学习资料)
- python笔迹识别_CVPR 2019笔迹识别论文:逆鉴别网络+八路Attention
- 《A Survey on Transfer Learning》中文版翻译《迁移学习研究综述》
- 栈的详解(C/C++数据结构)
- FFmpeg数据结构AVFrame
- 海康威视IPCamera图像捕获方法:捕获实时流,将实时流解码成YV12,然后转换成RGB