HTML5新增input输入类型，你知道多少？

最新推荐文章于 2021-06-26 00:14:00 发布
最新推荐文章于 2021-06-26 00:14:00 发布
阅读量217 收藏 1
点赞数
分类专栏： html日常总结 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/114892284
版权

HTML5新增input输入类型，你知道多少？

1、email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值。

<!DOCTYPE HTML>
<html>
<body>

	<form action="/example/html5/demo_form.asp" method="get">
	E-mail: <input type="email" name="user_email" />
	<input type="submit" />
	</form>

</body>
</html>

效果如图，当输入错误的邮箱格式，会有相应的提示
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

<!DOCTYPE HTML>
<html>
<body>

	<form action="/example/html5/demo_form.asp" method="get">
	Homepage: <input type="url" name="user_url" />
	<input type="submit" />
	</form>

</body>
</html>

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

3、number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

<!DOCTYPE HTML>
<html>
<body>

	<form action="/example/html5/demo_form.asp" method="get">
	Points: <input type="number" name="points" min="1" max="10" />
	<input type="submit" />
	</form>

</body>
</html>

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

4、range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定：

<!DOCTYPE HTML>
<html>
<body>

	<form action="/example/html5/demo_form.asp" method="get">
	Points: <input type="range" name="points" min="1" max="10" />
	<input type="submit" />
	</form>

</body>
</html>

在这里插入图片描述

5、Date Pickers（日期选择器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
下面的例子允许您从日历中选取一个日期：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Date: <input type="datetime-local" name="user_date" />
<input type="submit" />
</form>

</body>
</html>

在这里插入图片描述

6、search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="search" name="points" placeholder="i am search"/>
<input type="submit" />
</form>

</body>
</html>

如图所示，初始时的页面
在这里插入图片描述
当输入内容时，注意右侧有一个“叉号”，点击可以直接清空内容
在这里插入图片描述

丑小鸭变黑天鹅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5 新增的input元素的类型
06-15 3193
一、email email 类型用于应在包含E-mail地址的输入域。 二、url url类型用于应在包含url地址的输入域。 三、number number类型用于应在包含数值的输入域。 四、range range类型用于应该包含一定范围内数字值的输入域。 五、Date pickers(数据检出器) 六、search search类型用于搜索域，如站点搜索或Goog
HTML5——新增Iinput输入类型
admin_djp的博客
04-14 600
以下是我们以前学过的input输入类型: 文本域: <input type="text"> 单选按钮 :<input type="radio"> 复选框: <input type="checkbox"> 下拉列表 :<select><option> 密码域: <input type="password"> 提交按钮: <...
H5常用新增input类型
指尖艺术的博客
03-20 215
类型 说明 IE Firefox Opera Chrome safari
H5属性变化-Input新增类型
gogaogao的博客
12-06 222
H5中Input新增类型 email/url/number/range/date picker/search/color/tel email、url、tel • email-电子邮件 • url-统一资源定位符 • tel-电话类型 上述三个类型在手机端有相应的显示，PC端暂无显示区别 number Date Pickers date–年月日 month–年月 week–年周 time–时间（小时和分钟） datetime–年月日时分（UTC时间） UTC：指的是协调世界时间，又称世界统一时间，世界标准
H5新增表单类型和属性
里昂的博客
11-06 859
属性值 说明 type=“email” 限制用户输入必须为Email类型 type=“url” 限制用户输入必须为URL类型 type=“date” 限制用户输入必须为日期类型 type=“time” 限制用户输入必须为时间类型 type=“month” 限制用户输入必须为月类型 type=“week” 限制用户输入必须为周类型 type=“number” ...
HTML5新增的8类INPUT输入类型介绍
09-28
主要介绍了HTML5新增的8类INPUT输入类型介绍,这8个新的输入类型分别是email类型、url类型、number类型、range类型、日期类型、search类型、tel类型,本文分别对它们一一介绍,需要的朋友可以参考下
HTML5表单中新增的input输入类型3.pdf
07-11
HTML5为表单引入了多种新的`input`输入类型，旨在提高用户体验和数据验证的效率。这些新类型包括`search`、`tel`和`color`，它们各自有特定的用途和功能。 1. **search类型**： `search`类型的`input`元素主要用于...
HTML5表单中新增的input输入类型1.pdf
07-11
其中，新增的input输入类型是提升用户体验和数据准确性的关键。在HTML5中，`<input>`元素不再局限于传统的文本、密码、单选、多选等基本类型，而是扩展了多种新的输入类型，包括`email`、`url`、`number`和`range`等...
HTML5表单中新增的input输入类型3案例.pdf
07-11
在HTML5中，表单元素得到了显著的增强，新增了多种input输入类型，以更好地支持各种数据类型的输入和用户体验。本文将详细讲解三个HTML5新引入的input输入类型：search、tel和color，并通过案例展示它们的实际应用。...
H5新增元素及属性
qq_41681019的博客
10-23 1069
H5新增元素 新增表单元素 type=“email”：限制用户输入为邮箱类型 type=“url”:限制用户输入为网址，输入内容必须包含http://或者https:// type=“number”:限制用户输入为数字类型，输入内容必须是数字和小数点（输入框最右边有上下调节按钮） 属性：value,min,max,step(设置步进值，即每次递增递减的数值) type=“range”:滑动条 属性：value,min,max,step(设置步进值，即每次递增递减的数值) type=“Date”:日期
注意注意！ html5新增的input类型大总结
sxtweb的博客
09-02 338
文章背景 ​ 1.在其他版本的HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码 ​ 2.以上的不足都已经在html5中被克服，HTML5在以上的基础上增加了许多标签和属性，为开发人员带来了极大的方便 电子邮件类型< input type=“email” /> 功能就是输入E-mail地址的文本框 注意：输入的内容中必须包含“@”,"@"后面必须具有内容 代码示例： < body> ​ &l
html动态添加input
weixin_33827590的博客
01-04 860
html动态添加input <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/199...
html js添加input,js创建form添加input项目并提交表单
weixin_35647812的博客
06-26 614
var generateHideElement = function (name, value) {var tempInput = document.createElement("input");tempInput.type = "hidden";tempInput.name = name;tempInput.value = value;return tempInput;}var form = d...
在固定时间内，清空input框内容、
专栏
05-04 1018
setTimeout(function(){ $("#querydate").val(""); },2000); querydate为input框的id 2000为时间
清除html5input样式,在html5中如何去掉input type date默认样式？
weixin_30794639的博客
06-10 499
在html5中如何去掉input type date默认样式？1.时间选择的种类:html代码：选择日期：选择时间：选择星期：选择月份：2.对日期时间控件的样式进行修改目前webkit下有如下9个伪元素可以改变日期控件的ui：::-webkit-datetime-edit – 控制编辑区域的::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的::-...
HTML5新增input元素的类型
我是希希呀的博客
03-16 7803
记住这些可以省去很多麻烦
html5 新增input类型,html5新增的input类型
weixin_42697475的博客
06-09 3326
html5新增的input类型你可能已经听说过现在HTML5里引入了几种新的input类型，在HTML5之前，大家熟知的input类型包括：text(文本输入框)，hidden(隐藏域)，submit(提交按钮)等。而HTML5到来之后，新增的input类型包括： email (e-mail 地址)，date(日期)，number(数字)等等。下面我们来看看HTML5中新增input类型都有哪些吧...
HTML5中新增的input类型及其属性
热门推荐
rishonyou的博客
02-22 2万+
HTML5中新增的input类型及其属性HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括： color 点击时弹出颜色选择器，可以选择任意颜色 number 输入范围内的数字，可以手动输入超出范围的数字，但不能提交 tel 输入电话号码，只有
html5中如何去掉input type date默认样式
weixin_42124622的博客
05-10 8033
html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码： 选择日期：&lt;input type="date" value="2017-06-01" /&gt; 选择时间：&lt;input type="time" value="22:52" /&gt; 选择星期：&lt;input type="week" /&gt; 选择月
html5新增的input类型有
最新发布
05-19
HTML5新增了多种input类型，包括： 1. color：用于选择颜色的输入框 2. date：用于选择日期的输入框 3. datetime-local：用于选择日期和时间的输入框 4. email：用于输入电子邮件地址的输入框 5. month：用于选择...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值