W3CAPI 在线教程 | 菜鸟教程_LOGO
文档目录
文档目录
我的书签
请登录
 

HTML

HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI
1
2020-06-15 06:59:35

HTML5 Input输入类型简介

什么是HTML5 Input输入类型？

概念：input表单控件对用户输入数据的控制，根据当前控件中声明的输入类型来控制用户可以输入数据的种类和范围。HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

为什么需要HTML5 Input输入类型？

我们在网页中进行数据处理的时候，往往需要使用输入控件来让用户输入相应的信息，比如用户注册的时候我们需要让用户输入他的姓名、电话、年龄等信息，一般情况下用户可能由于操作失误，输入一些特殊的字符，如果我们没有进行处理则对于用户体验度则大大折扣；如果在输入控件中声明了输入数据类型的控制，比如，我们在年龄控件中声明输入类型为：range，则控件本身就会忽略掉这些特殊字符，只是提取正确的数据类型：年龄的取值范围为1-200之内，这样不仅提升了用户体验度，也提高了数据的安全性。

HTML5 Input输入类型大全

输入类型名称 功能 备注
email email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时，会自动验证 email 域的值。		 iPhone 中的 Safari 浏览器支持 email 输入类型，
并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）
url url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。		 iPhone 中的 Safari 浏览器支持 url 输入类型，
并通过改变触摸屏键盘来配合它（添加 .com 选项）
number number 类型用于应该包含数值的输入域。
您还能够设定对所接收的数字的限定：
  • max：规定允许的最大值
  • min：规定允许的最小值
  • step：规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
  • value：规定默认值
 iPhone 中的 Safari 浏览器支持 number 输入类型，
并通过改变触摸屏键盘来配合它（显示数字）
range range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定：
  • max：规定允许的最大值
  • min：规定允许的最小值
  • step：规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
  • value：规定默认值
  
Date pickers (date, month, week,
time, datetime, datetime-local)		 HTML5 拥有多个可供选取日期和时间的新输入类型：
  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间（小时和分钟）
  • datetime - 选取时间、日、月、年（UTC 时间）
  • datetime-local - 选取时间、日、月、年（本地时间）
  
search search 类型用于搜索域，比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。		  
color color 类型用在input字段主要用于选取颜色。  
tel 规定输入类型为电话号码。 目前所有浏览器都不支持
week week 类型允许你选择周和年。  

HTML5 Input输入类型 浏览器支持及兼容

并不是所有的主流浏览器都支持新的 HTML5 input输入类型（Opera 对新的输入类型的支持最好），不过我们已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
Input 输入类型 IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 No
search No 4.0 11.0 10.0 No
color No No 11.0 No No
tel NO No No No No

HTML5 Input输入类型实例

一、使用 Input 输入类型 email 来控制用户只能输入电子邮件地址

<form action="/" method="get">
    <p>电子邮件(E-mail): <input type="email" name="user_email" required="required" /></p>
    <p><button type="submit">点我提交</button></p>
</form>
执行一下

二、使用 Input 输入类型 url 来控制用户只能输入网页地址

<form action="/" method="get">
    <p>网站(Homepage): <input type="url" name="homepage" required="required" /></p>
    <p><button type="submit">点我提交</button></p>
</form>
执行一下

三、使用 Input 输入类型 number 来控制用户只能输入数字

<form action="/" method="get">
    <p>序号: <input type="number" name="index" required="required" /></p>
    <p><button type="submit">点我提交</button></p>
</form>
执行一下

四、使用 Input 输入类型 range 来控制用户只能输入规定范围内的数字

<form action="/" method="get">
    <p>1-10的数字: <input type="range" min="1" max="10" name="index" required="required" /></p>
    <p><button type="submit">点我提交</button></p>
</form>
执行一下

五、使用 Input 输入类型 datetime 来控制用户只能输入日期和时间

<form action="/" method="get">
    <p>月份: <input type="month" name="month" required="required" /></p>
    <p>周: <input type="week" name="week" required="required" /></p>
    <p>时间: <input type="time" name="time" required="required" /></p>
    <p>日期时间: <input type="datetime" name="datetime" required="required" /></p>
    <p>系统格式的日期时间: <input type="datetime-local" name="datetime-local" required="required" /></p>
    <p><button type="submit">点我提交</button></p>
</form>
执行一下
作者文档
相关提问
敬请期待

扫一扫关注官方微信公众号
豫ICP备18043494号-2
以API的视角诠释计算机技术
W3CAPI 在线教程 | 菜鸟教程 © 2018 版权所有