HTML5所有新标签总结

最新推荐文章于 2024-05-30 09:37:34 发布

雪飞静

最新推荐文章于 2024-05-30 09:37:34 发布

阅读量960

点赞数

分类专栏：【前端】文章标签： html5 标签

本文链接：https://blog.csdn.net/basycia/article/details/50481436

版权

【前端】专栏收录该内容

66 篇文章 0 订阅

订阅专栏

1.输入标签（input）

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的标签

输入类型：

email
url
number//max min value step
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

表单属性:

新的 form 属性：

autocomplete
novalidate//novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

新的 input 属性：

autocomplete//autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。类似保存密码。zid
autofocus//自动get焦点，例如输入框自动鼠标定位
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

autocomplete自动保存输入的第一次相关内容

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

autofocus聚焦焦点，光标定位于输入框

User name: <input type="text" name="user_name"  autofocus="autofocus" />

multiple(可选择输入多个文件，并显示文件数)

Select images: <input type="file" name="img" multiple="multiple" />//选择多个文件

pattern(配合正则表达式，匹配模式，输入要求)

<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
</body>
</html>

placehoder类似于背景显示提示，在输入框显示淡色search

<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search" />
<input type="submit" />
</form>
</body>
</html>

required要求次属性必须填写，否则提示错误

<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>
</body>
</html>

表单元素：

datalist
keygen
output

<pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, 'Courier New', Courier, monospace; width: 685px; background: rgb(245, 245, 245);">Webpage: <input type="url" <span class="marked" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 0, 0);">list="url_list"</span> name="link" />
<code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, 'Courier New', Courier, monospace; color: rgb(0, 0, 221);"><datalist id="url_list"></code>
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
<code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, 'Courier New', Courier, monospace; color: rgb(0, 0, 221);"></datalist></code>

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<output id="result" onforminput="resCalc()"></output>

output 元素用于不同类型的输出，比如计算或脚本输出：

2浏览器支持

注：所有新增的实物有一个接受过程，大部分浏览器还不支持，我觉得这需要时间来历练。

Input type	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

3实例（其他类似，修改type）

E-mail: <input type="email" name="user_email" />

雪飞静

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5所有新标签总结

1.输入标签（input）HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本章全面介绍这些新的标签输入类型：emailurlnumber//max min value steprangeDate pickers (date, month, week, time, datetime, datetime-local)searchcolor
复制链接

扫一扫