H5属性变化-Input新增类型

最新推荐文章于 2021-08-30 16:45:31 发布
最新推荐文章于 2021-08-30 16:45:31 发布
阅读量219 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gogaogao/article/details/110751994
版权

H5中Input新增类型

email/url/number/range/date picker/search/color/tel

email、url、tel

• email-电子邮件
• url-统一资源定位符
• tel-电话类型
在这里插入图片描述上述三个类型在手机端有相应的显示，PC端暂无显示区别

number

在这里插入图片描述在这里插入图片描述

Date Pickers

  1. date–年月日
  2. month–年月
  3. week–年周
  4. time–时间（小时和分钟）
  5. datetime–年月日时分（UTC时间）
    UTC：指的是协调世界时间，又称世界统一时间，世界标准时间，国际协调时间
  6. datetime-local–年月日时分（本地时间）
    在这里插入图片描述

range

默认值 0到100
在这里插入图片描述在这里插入图片描述

search

在这里插入图片描述未输入内容时，页面还是显示一个空白的输入框， 但是有输入内容后，右侧会出现一个×。

color

在这里插入图片描述在这里插入图片描述

BBBuild~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5新增input类型与属性
sinat_40442798的博客
05-27 727
在HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码。但是，在HTML5在以上的基础上增加了许多标签和属性，为开发人员带来了极大的方便。例如，当需要填写手机号时，要想规定用户只输入数字，以往的版本必须通过JavaScript来实现，但在HTML5中确不必。 新增input类型 电子邮件类型<input type="email"/> 规定输入的内容中必须包含"@"，且"@"后面必须具有内容。示例...
H5常用新增input类型
指尖艺术的博客
03-20 214
类型 说明 IE Firefox Opera Chrome safari
h5 新增input类型
weixin_43294560的博客
11-15 418
input新增,自带校验功能 邮箱 type="email" 必须包含@，且@后有内容 搜素框 type="search" 搜索内容后多个×号，和浏览器有关 重置 type="reset" url类型 type="url" 内容必须包含http://,且后面有内容 颜色选择框 type="color" 数字 typ...
H5学习之路之Input类型新特性
红岸基地
05-31 847
input的输入类型在H5之前已经有很多很广泛的使用了，但是H5其实加入了很多新的属性和验证，提供方便的同时给我们开发带来了更多的是安全性的提升，今天我们就简单的说一下H5中新的input属性和用法。EmailE-mail: &lt;input type="email" name="user_email" /&gt;当我们使用email的时候，默然会检测到输入的格式是不是正确的，如果是使用的Iph...
在html5中input新类型是,html5 input新输入类型 – HTML5教程
weixin_42628573的博客
06-29 737
上一章HTML教程请查看：html ISO语言代码在本教程中，你将了解HTML5中引入的input输入类型。HTML5中的input新输入类型HTML5引入了几种新的类型，如电子邮件、日期、时间、颜色、范围等，改善用户体验，使表单更具交互性。但是，如果浏览器不能识别这些新的输入类型，它将把它们当作普通的文本框。在本节中，我们将简要介绍以下每种新的输入类型：colordatedatetime-loc...
h5-transfer-pdf:H5TransferPDF是一个将网页HTML渲染为PDF和各种图像格式的API工具，完美兼容HTML，CSS，JS，更好的替换支持，并支持生成多种版本的PDF
03-18
h5-转移-pdf H5TransferPDF是一个将网页HTML渲染为PDF和各种图像格式的API工具，完美兼容HTML，CSS，JS，更好的替换支持，并支持生成多种版本的PDF。 好未来内部有很多使用PDF的场景，某些演讲义，布局等，尤其是在...
H5U-通讯-MODBUS元件地址编码和功能码定义.pdf
09-03
"H5U-通讯-MODBUS元件地址编码和功能码定义" 本文档介绍了汇川H5U系列控制器中的Modbus协议支持的功能码、软元件和变量的地址定义、MODBUS RTU和MODBUS TCP通讯帧格式说明。 MODBUS协议支持的功能码 MODBUS协议...
vue-h5-router-webapp.zip
09-24
完成的一个程序包,下载就可以使用,vue-h5-router搭建的可用webapp,包含前后端分离,链接后端程序/页面渲染/页面跳转
vue-h5-activity-components:h5移动端组件
05-25
此项目属于移动端h5的ui组件库
h5py-2.10.0-cp36-cp36m-linux-aarch64.whl
01-31
h5py-2.10.0-cp36-cp36m-linux_aarch64.whl
第十四课--H5新的 Input 类型
阅读之后，对你有帮助，那就点个赞再走吧
08-03 197
color颜色 date允许你从一个日期选择器选择一个日期。 datetime-local类型允许你选择一个日期和时间 (无时区). email用于应该包含 e-mail 地址的输入域。 month允许你选择一个月份。 number用于应该包含数值的输入域。您还能够通过max min设定对所接受的数字的限定 range用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。 请使用下...
h5 新的 input 类型
aler56010的博客
03-25 106
Input 类型: color color 类型用在input字段主要用于选取颜色， 从拾色器中选择一个颜色如下所示： <input type="color" name="favcolor"> Input 类型: date date 类型允许你从一个日期选择器选择一个日期。 <input type="date" name="day"&gt...
H5 新增的input元素的类型
06-15 3189
一、email email 类型用于应在包含E-mail地址的输入域。 二、url url类型用于应在包含url地址的输入域。 三、number number类型用于应在包含数值的输入域。 四、range range类型用于应该包含一定范围内数字值的输入域。 五、Date pickers(数据检出器) 六、search search类型用于搜索域，如站点搜索或Goog
HTML5新增input属性
DGL_CSDN的博客
08-30 517
1 新增 input 属性 1.1 新增 type 值 1.1.1 date 可以选择⽇期 <input type="date" /> 1.1.2 time 可以选择时间的输⼊框 <input type="time" /> 1.1.3 month 可以选择年份⽉份的输⼊框 <input type="month" /> 1.1.4 week 可以选择XX年XX周的输⼊框 <input type="week" />
HTML5新增input输入类型，你知道多少？
丑小鸭变黑天鹅的博客
03-16 214
HTML5新增input输入类型，你知道多少？1、email2、url3、number4、range5、Date Pickers（日期选择器）6、search 1、email email 类型用于应该包含 e-mail 地址的输入域。 在提交表单时，会自动验证 email 域的值。 <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get">
H5的新特性（三）新增 input 表单、表单属性
m0_46166985的博客
11-29 276
<!-- number tel 在移动端访问可以直接弹出数字键盘 --> <li><input type="number"></li> <li><input type="tel"></li> <!-- 点击x可以清空表单 --> <li><input type="search...
H5新增表单类型和属性
里昂的博客
11-06 857
属性值 说明 type=“email” 限制用户输入必须为Email类型 type=“url” 限制用户输入必须为URL类型 type=“date” 限制用户输入必须为日期类型 type=“time” 限制用户输入必须为时间类型 type=“month” 限制用户输入必须为月类型 type=“week” 限制用户输入必须为周类型 type=“number” ...
在HTML5中，为input元素新增了以下一些type属性值
lgl_19910331的博客
08-15 3497
  color：用于指定颜色的控件。 date：用于输入日期的控件（年，月，日，不包括时间）。 month：用于输入年月的控件，不带时区。 week：用于输入一个由星期-年组成的日期，日期不包括时区 time：用于输入不含时区的时间控件。 datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。 datetime-local：用于输入日期时间控件，不包含时区。 ...
H5新增元素及属性
qq_41681019的博客
10-23 1064
H5新增元素 新增表单元素 type=“email”：限制用户输入为邮箱类型 type=“url”:限制用户输入为网址，输入内容必须包含http://或者https:// type=“number”:限制用户输入为数字类型，输入内容必须是数字和小数点（输入框最右边有上下调节按钮） 属性：value,min,max,step(设置步进值，即每次递增递减的数值) type=“range”:滑动条 属性：value,min,max,step(设置步进值，即每次递增递减的数值) type=“Date”:日期
h5-audio-recorder
最新发布
05-23
h5-audio-recorder 是一个基于 HTML5 技术的录音插件，可以在浏览器中录制音频并将其保存为 MP3、WAV 等格式。它支持多种浏览器，并且...使用 h5-audio-recorder 可以方便地实现语音留言、在线教育、语音识别等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值