温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML5中八个新增INPUT输入类型的使用示例

发布时间:2021-02-26 09:46:52 来源:亿速云 阅读:179 作者:清风 栏目:web开发

本文将为大家详细介绍“HTML5中八个新增INPUT输入类型的使用示例”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“HTML5中八个新增INPUT输入类型的使用示例”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。

html是什么

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。

HTML5新增的8类INPUT输入类型介绍,这8个新的输入类型分别是email类型、url类型、number类型、range类型、日期类型、search类型、tel类型。

已经有的输入类型 HTML代码示例:

文本域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮 <input type="submit">
可单击按钮 <input type="button">
图像按钮 <input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
文件域 <input type="file">

在HTML5中,增加了多个新的表单input输入类型,通过使用这些新增元素,可以实现更好的输入控制和验证。
1、email类型的应用
email类型的input元素是一种专门用于输入E-mail地址的文本输入框,在提交表单的时候,会自动验证email输入框的值。

<input type="email" name="user_email" />

2、url类型的应用
url类型的input元素提供用于输入url地址这类特殊文本的文本框。

<input type="url" name="user_url" />

3、number类型的应用
number类型的input元素提供用于输入数值的文本框。

<input type="number" name="number1" min="1" max="20" step="4" />

4、range类型的应用
range类型的input元素提供用于输入包含一定范围内数字值得文本框,在网页中显示为滚动条。

<input type="range" name="range1" min="1" max="30" />

5、日期检出类型的应用
输入类型 HTML代码  功能说明

date <input type="date">

选取日、月、年

month <input type="month">

选取月、年

week <input type="week">

选取周和年

time <input type="time">

选取时间(小时和分钟)

datetime <input type="datetime">

选取时间、日、月、年(UTC时间)

datetime-local
<input type="datetime-local"> 选取时间、日、月、年(本地时间)

6、search类型的应用

search类型的input元素提供用于输入搜索关键词的文本框。

<input type="search" name="search2" />
input[type="search"]
{  
 -webkit-appearance:textfield;
 }

7、tel类型的应用
tel类型的input元素提供专门用于输入电话号码的文本框。

<input type="tel" name="tel" />

8、color类型的应用
color类型的input元素提供专门用于设置颜色的文本框。

<input type="color" name="color" />

如果你能读到这里,小编希望你对“HTML5中八个新增INPUT输入类型的使用示例”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI