HTML5新增特性（新表单元素）

最新推荐文章于 2024-07-29 00:36:24 发布

⊱sun⊰

最新推荐文章于 2024-07-29 00:36:24 发布

阅读量750

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/sun12345678_/article/details/131797220

版权

本文详细介绍了HTML5的新特性，包括浏览器的支持情况，新增的语义元素如

、

摘要由CSDN通过智能技术生成

一、HTML5概述

1.1HTML5浏览器支持（重要）

现代的浏览器都支持 HTML5。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

1.2、将HTML5元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

header, section, footer, aside, nav, main, article, figure {
display: block;
}

1.3、为 HTML 添加新元素(自定义标签)

你可以为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 : <myHero>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>

注:JavaScript 语句 document.createElement(“myHero”) 是为 IE 浏览器添加新的元素。

1.4HTML5语义化

在HTML5添加新标签的时候，提出了一个关键词 “语义”。

语义= 意义
语义元素 = 有意义的元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义元素实例： <div>和 <span> 无需考虑内容
语义元素实例：<form> ，<table> ,<img>- 清楚的定义了它的内容.

二、HTML5新布局标签

许多现有网站都包含以下HTML代码： <div id="nav">,<div class="header">,或者 <div id="footer">,来指明导航链接，头部，以及尾部。

2.1、HTML5 header元素

<header>元素描述了文档的头部区域。

<header>元素主要用于定义内容的介绍展示区域。

在页面中你可以使用多个<header>元素(文档头、独立内容头)。

2.2、HTML5 nav元素

<nav>标签定义导航链接的部分。

<nav>元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在<nav>元素中

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

2.3、HTML5 article元素

<article>标签定义独立的内容

2.4、HTML5 section 元素

<section>标签定义义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。根据W3C HTML5文档: section 包含了一组内容及其标题。

2.5、HTML5 footer 元素

<footer>元素描述了文档的底部区域.

<footer>元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个<footer>元素

2.6、HTML5 figure 和 figcaption 元素

标签规定独立的流内容（图像、图表、照片、代码等等）。

元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption>标签定义<figure>元素的标题

<figcaption>元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

三、HTML5新表单元素

3.1、HTML5 新的 input 类型

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

控件名称	type属性值	描述
电子邮箱	email	包含e-mail地址的输入域（有效验）
拾色器	color	color 类型用在input字段主要用于选取颜色选择你喜欢的颜色:
日期字段	date datetime datetime-local month week time	定义日期字段：包含年月日定义日期字段：（UTC 时间） (仅opera支持) 定义日期字段：包含年月日时分（无时区）定义日期：年月定义年中的周数定义时间
数值框	number	输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。使用min属性和max属性设置最小和最大值 step 设置数字间隔如果step=“3” ,那么数值间隔是3
数值滑块空间	range	用于应该包含一定范围内数字值的输入域。。 range 类型显示为滑动条。使用min属性和max属性设置最小和最大值,step设置数字间隔
搜索框	search	用于搜索字段，比如站内搜索或谷歌搜索等。
电话号码框	tel	定义输入电话号码字段,但是不会进行校验
url地址	url	包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

3.2、HTML5 新的表单控件

3.2.1、HTML5 datalist 元素 (重要)

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

<datalist>> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用<input>的元素的list属性与<datalist>元素绑定

<input type = “text” name=”data” list=”dlist”>
<datalist id=”dlist”>
<option value="CAD" >CAD</option>
<option value="HTML5">HTML5</option>
<option value="JAVASCRIPT" >JAVASCRIPT</option>
<option value=".NET">.NET</option>
<option value="JAVA">JAVA</option>
</datalist>

3.3、HTML5 新的表单属性

HTML5 的<form>和<input>标签添加了几个新属性.

<form> 新属性：

autocomplete
novalidate

<input> 新属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step

3.3.1、form / input autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

3.3.2、form novalidate属性

novalidate 属性是一个 boolean(布尔) 属性.

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

3.3.3、input placeholder属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, tel, email 以及 password。

3.3.4、input required属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input> 标签：text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。

3.3.5、input step属性

step 属性为输入域规定合法的数字间隔。

如果 step=“3”，则合法的数是 -3,0,3,6 等

提示：step 属性可以与 max 和 min 属性创建一个区域值.

注意：step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

3.3.6、input autofocus属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

3.3.7、input form属性

form 属性规定输入域所属的一个或多个表单。

提示:如需引用一个以上的表单，请使用空格分隔的列表。

3.3.8、input formaction属性

formaction 属性用于描述表单提交的URL地址.

formaction 属性会覆盖<form>元素中的action属性.

注意: formaction 属性用于 type=“submit” 和 type=“image”.

3.3.9、input formenctype属性

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

注意: 该属性与 type=“submit” 和 type=“image” 配合使用。

3.3.10、input formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了<form>元素的 method 属性。

注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。

3.3.11、input formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证

formnovalidate 属性会覆盖<form> 元素的novalidate属性

3.3.12、input height 和 width 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

3.3.13、input pattern 属性

pattern 属性描述了一个正则表达式用于验证<input>元素的值。

注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.

3.3.14、input min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的标签：date pickers、number 以及 range。

<body>
    <!-- autocomplete 表示允许文本进行自动填充（需要检查浏览器设置），默认为开启状态
    autocomplete 可以作用域表单上面，表示所有的文本都可以自动填充 -->
    <!-- novalidate 表示表单中输入内容不进行格式效验即可提交 -->
    <form action="" autocomplete="on" novalidate>
        用户名：<input type="text" name="username" placeholder="请输入用户名"><br>
        昵称：<input type="text" name="nickname" autocomplete="off" placeholder="请输入昵称"><br>
        邮箱：<input type="email" name="email" placeholder="请输入邮箱"><br>
        网址：<input type="url" name="url"><br>
        <input type="submit">
    </form>
    <hr>
    <!-- repuired表示当前文本框内容不能为空 -->
    <form action="" autocomplete="on">
        <!-- autofocus可以使其在页面加载完毕后自动获得焦点 -->
        用户名：<input type="text" name="username" placeholder="请输入用户名" required autofocus><br>
        昵称：<input type="text" name="nickname" autocomplete="off" placeholder="请输入昵称"><br>
        邮箱：<input type="email" name="email" placeholder="请输入邮箱"><br>
        网址：<input type="url" name="url"><br>
        <!-- step属性为输入域规定合法的数字间隔 -->
        年龄：<input type="number" name="age"  step="5" min="0" max="100"><br>
        <input type="submit">
    </form>
    <hr>
    <!-- formmaction属性用于描述表单提交的url地址
        formmaction属性会覆盖<form>元素中的action属性 -->
    <!-- 再提交图片的时候需要将enctype设置为multipart/form-data
    method需要为post -->
    <!-- formenctype属性描述了表单提交到服务器的数据编码(只对form表单中method="post"表单)
        formenctype属性覆盖form元素的enctype属性 -->
    <form action="" method="post" enctype="multipart/form-data">
        用户名: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        <input type="submit">
        <input type="submit" formenctype="http://www.baidu.com" value="新提交">
    </form>
    <hr>
    <!-- formmethod属性定义了表单提交的方式
        formmethod属性覆盖率<form>元素的method属性 -->
    <form action="" method="post" enctype="multipart/form-data">
        用户名: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        <input type="submit">
        <input type="submit" formmethod="get" value="新提交"> 
    </form>
    <hr>
    <!-- formnovalidate属性会覆盖<form>元素的novalidate属性 -->
    <form action="" method="get">
        邮箱: <input type="email" name="email">
        <input type="submit" style="width: 100px; height: 100px;">
        <input type="submit" formnovalidate value="新提交">
        <input type="image" src="img/ruanjian.png" width="200px" height="50px">
    </form>
    <hr>
    <!-- pattern 可以指定一个正则表达式来对复杂的字符格式进行效验 -->
    <form method="get">
        手机号码：<input type="tel" pattern="^1[3456789]\d{9}$" title="输入正确的手机号码" name="tel">
        日期：<input type="date" min="1949-10-1">
        年龄：<input type="number" step="2" min="1" max="18">
        <input type="submit">
    </form>
</body>

⊱sun⊰

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML5新增特性（新表单元素）

现代的浏览器都支持 HTML5。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。你可以为 HTML 添加新的元素。该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 :<myHero>
复制链接

扫一扫