您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“HTML5新的输入类型有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML5新的输入类型有哪些”文章能帮助大家解决问题。
HTML 5拥有多个新的形成表单输入侧类型这些新特性提供了更好的输入侧控制状语从句：验证。
本章全面介绍这些新的输入类型：电子邮件，网址，数量，范围，日期选择器（日，月，周，时间，日期时间，本地日期时间），搜索，颜色
输入类型-电子邮件
电子邮件类型为应该包含电子邮件地址的输入域。在提交表单时，会自动验证电子邮件域的值。实例：
电子邮件：<input type =“ email” name =“ user_email” />
复制代码
提示：iPhone中的Safari浏览器支持电子邮件输入类型，并通过更改触摸屏键盘来配合它（添加@和.com选项）。
输入类型
-url url类型为应该包含URL地址的输入域。在提交表单时，会自动验证url域的值。实例：
主页：<input type =“ url” name =“ user_url” />
复制代码
提示：iPhone中的Safari浏览器支持url输入类型，并通过更改触摸屏键盘来配合它（添加.com选项）。
输入类型-数字
number类型为应该包含数值的输入域。接受的数字的限定：实例：
点数：<input type =“ number” name =“ points” min =“ 1” max =“ 10” />
复制代码
我们通常使用下面的属性来规定对数字类型的限定：
属性 值 描述
最大限度 数字 规定允许的利率
分 数字 规定允许的预设
步 数字 规定合法的数字间隔（如果step =“ 3”，则合法的数是-3,0,3,6等）
价值 数字 规定预设值
让我们试一下带有所有限定属性的例子：大家亲自试一试吧，代码如下：
<！DOCTYPE HTML>
<html>
<身体>
<form action =“ / example / HTML 5 / demo_form.asp” method =“ get”>
<input type =“ number” name =“ points” min =“ 0” max =“ 10” step =“ 3” value =“ 6” />
<input type =“ submit” />
</ form>
</ body>
</ html>
复制代码
提示：iPhone中的Safari浏览器支持数字输入类型，并通过更改触摸屏键盘来配合它（显示数字）。
输入类型-范围
范围类型为应该包含一定范围内数字值的输入域。条。您还能够设定对所接受的数字的限定。实例：
<input type =“ range” name =“ points” min =“ 1” max =“ 10” />
复制代码
我们通常使用下面的属性来规定对数字类型的限定：
属性 值 描述
最大限度 数字 规定允许的利率
分 数字 规定允许的预设
步 数字 规定合法的数字间隔（如果step =“ 3”，则合法的数是-3,0,3,6等）
价值 数字 规定预设值
输入类型-日期选择器（数据检出器）
HTML 5拥有多个可选选择日期和时间的新输入类型：日期-选取日，月，年月-选取月，年周-选取周和年时间-选取时间（小时和分钟）的datetime -选取时间，日，月，年（UTC时间）日期时间本地-选取时间，日，月，年（本地时间）
下面的例子允许您从日历中选取一个日期：实例：
日期：<input type =“ date” name =“ user_date” />
复制代码
输入输入类型“月”：
月：<input type =“ month” name =“ user_date” />
复制代码
输入输入类型“周”：
周：<input type =“ week” name =“ user_date” />
复制代码
输入输入类型“时间”：
时间：<input type =“ time” name =“ user_date” />
复制代码
输入输入类型“日期时间”：
日期和时间：<input type =“ datetime” name =“ user_date” />
复制代码
输入输入类型“ datetime-local”：
日期和时间：<input type =“ datetime-local” name =“ user_date” />
复制代码
输入类型-搜索
搜索类型为搜索域，某些站点搜索或Google搜索。search域显示为常规的文本域。
关于“HTML5新的输入类型有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。