目录
- 一、HTML5概述
- 三、HTML5新表单元素
- 3.1、HTML5 新的 input 类型
- 3.2、HTML5 新的表单控件
- 3.3、HTML5 新的表单属性
- 3.3.1、form / input autocomplete 属性
- 3.3.2、form novalidate属性
- 3.3.3、input placeholder属性
- 3.3.4、input required属性
- 3.3.5、input step属性
- 3.3.6、input autofocus属性
- 3.3.7、input form属性
- 3.3.8、input formaction属性
- 3.3.9、input formenctype属性
- 3.3.10、input formmethod 属性
- 3.3.11、input formnovalidate 属性
- 3.3.12、input height 和 width 属性
- 3.3.13、input pattern 属性
- 3.3.14、input min 和 max 属性
一、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属性值 | 描述 |
---|---|---|
电子邮箱 | 包含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>