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新增表单域元素及属性相关推荐

  1. Oracle 数据库表空间不足拓展方法实例演示,表空间剩余大小查看,通过新增表空间文件拓展表空间,表空间文件路径查看

    Oracle 数据库表空间 第一章:表空间的拓展 ① 查看剩余表空间大小 ② 查看表空间文件路径 ③ 通过新增表空间文件拓展表空间 ④ 查看表空间已分配大小 第一章:表空间的拓展 ① 查看剩余表空间大 ...

  2. Polygon zkEVM中Goldilocks域元素circom约束

    1. 引言 前序博客有: Goldilocks域 Goldilocks域 p=264−232+1p= 2^{64} - 2^{32} + 1p=264−232+1. Polygon zkEVM中Gol ...

  3. 【04】HTML5+CSS3:01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换

    文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...

  4. html5新增了哪些表单元素,HTML5新增表单元素

    8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? HTML5新增表单元素主要有 input标签 其type类型主要有有以下几种:type="tel"用 ...

  5. html5表单实例元素,HTML5新表单元素的图文实例-

    这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...

  6. html表单新增类型,HTML5表单设计——新增输入类型和新增表单属性

    新增输入类型 email类型 用来输入邮箱地址的文本框.该文本框与普通文本框在页面显示时没有任何区别,专门用于接收Email地址信息.提交表单时自动验证是否符合Email地址格式,如果不符合,将提示相 ...

  7. html5新增标签——新增语义化标签、新增表单控件 、多媒体

    1.html5 HTML5是一个新的网络标准,现在仍处于发展阶段.目标是取代现有的HTML 4.01和XHTML 1.0 标准.它希望能够减少互联网富应用(RIA)对Flash.Silverlight ...

  8. HTML5新增表单属性(HTML5)

    HTML5新增表单属性(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...

  9. html中input标签中type属性小总(包含html5新增表单属性)

    前言   HTML5新增了许多属性和方法,其中一些就有input标签中 type属性. 有关于input中type的全部可取值如下 1.button 2.text 3.time(会呈现表的形状) 4. ...

最新文章

  1. 为Office Communicator启用超链接
  2. MongoDB使用小结:一些常用操作分享
  3. 图片的裁剪、旋转、平移、模糊
  4. P3932 浮游大陆的68号岛
  5. 有关域索引错误产生的原因及解决办法
  6. MySQL索引的一些问题
  7. [转]EXCEL截取字符串中某几位的函数——LeftMIDRight及Find函数的使用
  8. magento memcache缓存配置
  9. Python字符集编码和文件读写
  10. 临时更换swap优先级
  11. 2.概率论-概率论公理
  12. 微信小程序从云存储中读取图片
  13. 信息系统设计之软件设计和系统架构
  14. TI/德州仪器 SN74AHC1G04DBVR 单路反向器闸
  15. 我的产品经理书单(2017-2019)
  16. 目标检测(object detection)—— RCNN总结
  17. windows远程桌面占用CPU的处理办法
  18. 阿里云数据盘扩容操作遇险记录
  19. 多商家入驻分销平台开发 多商家入驻分销源码下载
  20. java中关于图片的操作

热门文章

  1. [多线程]多线程使用QTimer
  2. 计算机毕业优秀作品展观后感,毕业展观后感
  3. Make a mark of Gates
  4. 远程桌面打开任务管理器
  5. 学习C语言的相关网站(C学习资料)
  6. python笔迹识别_CVPR 2019笔迹识别论文:逆鉴别网络+八路Attention
  7. 《A Survey on Transfer Learning》中文版翻译《迁移学习研究综述》
  8. 栈的详解(C/C++数据结构)
  9. FFmpeg数据结构AVFrame
  10. 海康威视IPCamera图像捕获方法:捕获实时流,将实时流解码成YV12,然后转换成RGB