1.新增元素与属性
新增属性
1. 表单内元素的form属性:在HTML5里,表单内的从属元素可以写在form外面。
<form id="testform">
<input type="text">
</form>
<!-- 下面的textarea不必写在上面的form表单内 -->
<textarea form="testform"></textarea>
2. 表单内元素的formaction属性:可以为所有的提交按钮,诸如、、等增加不同的fromaction属性,使得在单击不同的按钮时可以将表单提交到不同的页面。
<form id="testform" action="server.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
<input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
<input type="submit" name="s3" value="s3" formaction="s3.jsp">提交到s3 </form>
3. 表单内元素的formmethod属性:对每个表单元素分别制定不同的提交方法(POST或GET)
<form id="testform" action="serve.jsp">
姓名:<input type="text" name="name"><br>
<input type="submit" value="POST提交" formmethod="post">
<input type="submit" value="GET提交" formmethod="get"> </form>
4. 表单内元素的formenctype属性:对表单元素分别制定不同的编码方式,在HTML5之前,表单内有一个enctype属性,它用来指定表单被提交到服务器之前应该如何对数据进行编码,它有三个值:
①appliction/x-www-form-urlencoded(默认)
②multipart/form-data(文件上传)
③text/plain
<form action="server.jsp" method="post">
<input type="text" name="name" value="test"><br>
文件:<input type="file" name="files">
<input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data">
<input type="submit" value="提交">
</form>
5. 表单内元素的formtarget属性:它用于指定在何处打开表单提交后所需加载的页面,它的属性值如下:
①_blank:在新的窗口中打开
②_self:在本窗口中打开(默认)
③_parent:在当前窗口的父窗口中打开
④_top:在当前窗口中打开
⑤framename:在指定的框架(frame)中打开
<form id="testform" action="server.js">
<input type="submit" name="s1" value="v1" formaction="s1.jsp"
formtarget="_self">提交到s1
<input type="submit" name="s2" value="v2" formaction="s2.jsp"
formtarget="_blank">提交到s2
</form>
6. 表单内元素的autofocus属性:为文本框、选择框或按钮框加上autofocus属性后,当页面打开时,这些控件将自动获得焦点。一个页面只能有一个控件具有autofocus属性。
<input type="text" autofocus>
7.表单内元素的required属性:应用了此属性的输入框,在表单提交时,会检查是否已输入内容,如果没有输入内容,则会自动提示用户输入。
<input type="text" required>
8.表单内元素的labels属性:为所有能使用label元素的表单控件定义一个labels属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。(很难理解)
代码详见《HTML5与CSS3权威指南》第57页
9.标签的control属性:在标签(label元素)内部放置一个表单元素,并通过该标签的control属性来访问该表单。
<!DOCTYPE html>
<html>
<head>
<title>标签的control属性使用示例</title>
<meta charset="UTF-8">
<script>
function setValue () {
var label = document.getELementById("label");
var textbox = label.control;
textbox.value = "621000";
}
</script>
</head>
<body>
<form>
<label id="label">
邮编:<input type="text" maxlength="6">
<small>请输入六位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>
</body>
</html>
10.文本框的placeholder属性:文本框(text或textarea)处于未输入状态时显示的输入提示。另外我们可以在CSS中控制placeholder的显示样式
<input type="text" placeholder="Input Me">
11.文本框的list属性:单行文本框增加了一个list属性,该属性的值为某个datalist元素的id,此datalist元素列表为用户输入提供便捷选择。我们还可以使用CSS来控制此datalist不显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list属性示例</title>
</head>
<body>
text: <input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none;"将datalist元素设定为不显示 -->
<datalist id="greetings" style="display:none;">
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">Good Afternoon</option>
</datalist>
</body>
</html>
12.文本框的autocomplete属性:它可以指定’on’、‘off’和’'三个值,当指定为’on’时,可以显式指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表
<iniput type="text" name="geenting" autocomplete="on" list="greetings">
13.文本框的pattern属性:对input元素使用pattern属性,并将其值设为某个格式的正则表达式,在提交时会对用户输入进行检查,检查其输入内容是否符合给定的格式。
<form>
请输入指定格式的内容:<input type="text" pattern="[0-9][A-Z]{3}" name="part">
<input type="submit">
</form>
14.文本框的selectionDirection属性:针对input元素和textarea元素,当用户用鼠标选取其文字部分时,可以使用此属性来获取选取的方向,当正向选取文字时,该属性值为’forward’,反向时为’backward’。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selectionDirection属性使用示例</title>
<script>
function alertSelectionDirection () {
var control = document.forms[0]['text'];
var direction = control.selectionDirection;
alert(direction);
}
</script>
</head>
<body>
<form>
<input type="text" name="text">
<input type="button" value="点击我" onclick="alertSelectionDirection()">
</form>
</body>
</html>
15.复选框的indeterminate属性:以前的复选框checkbox只有选中和未选中两种状态,在HTML5中,可以通过JavaScript对该元素使用indeterminate属性,以说明该复选框处于"尚未明确是否选取状态"
<input type="checkbox" indeterminate id="cb">indeterminate属性测试
<script>
var cb = document.getElementById('cb');
//将indeterminate属性设为true
cb.indeterminate = true;
</script>
16.image提交按钮的height属性和width属性:针对类型为image的input元素,HTML5增加了width和height属性,分别指定图片的宽度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>image类型的input元素使用示例</title>
</head>
<body>
<form>
姓名: <input type="text" name="name">
<input type="image" src="edit.gif" alt="编辑" width=23 height=23>
</form>
</body>
</html>
17.textarea元素的maxlength属性和wrap属性:
maxlength属性使用整数值设定该textarea元素可输入的最大字符数
wrap属性可以指定soft和hard两个值:当指定为hard时,用户输入时的自动换行会被记录,即在换行处会插入一个换行标志,那么后台拿到的数据也是换行的,而soft则不会有这个效果。使用hard属性时必须指定textarea的cols属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>textarea元素新增的maxlength属性与wrap属性</title>
</head>
<body>
<form action="test.php" method="post">
<textarea name="name" maxlength=100 rows=5 wrap="hard" cols=5>
<input type="submit" value="提交">
</form>
</body>
</html>
新增和改良的input元素种类
- search:与text文本框类似,专用于搜索
- tel:与text文本框相似,专用于电话号码
- url:与text文本框相似,要求用户必须在其中输入url格式的内容
- email:与text文本框相似,要求用户必须在其中输入正确的email格式的内容
- date、month、week、time、dateimte-local:各种日期与实践输入文本框
- number:与text文本框相似,但其内容必须为数字,否则提交后内容为空
- range:只允许输入一段范围内数值的文本框,具有min属性和max属性
- color:颜色选择文本框
上面的新的属性在各浏览器中会表现的不一样
1.url类型:url类型的input专门用于输入url地址的文本框,若输入内容格式不符,则不允许提交
<input type="url" name="url" value="http://www.microsoft.com">
2.email类型:email类型的input专门用于输入email地址的文本框,若输入内容格式不符,则不允许提交,它还有一个multiple属性,这个属性允许用户输入多个email地址,使用逗号来分割
<input type="email" name="email" value="3494688@qq.com">
<input type="email" name="emails" multiple value="3494688@qq.com,kaindy7633@gmail.com">
3.date类型:date类型的input允许用户输入日期类型的内容,通常会以日历的形式向用户展示,方便用户选择输入。
<input type="date" name="date" value="2016-0101">
4.time类型:time类型的input是专门用来输入时间的文本框,并且在提交时会对输入的内容进行有效性检查。
<input type="time" name="time" value="10:00">
5.datetime-local类型:datetime-local类型专门用来输入本地日期和时间的文本框,并且在提交时会对输入内容进行有效性检查。
<input type="datetime-local" name="datetime-local" value="2016-01-01T10:00:15">
6.month类型:month类型专门用来输入月份的文本框,并在提交时做有效性检查
<input type="month" name="month" value="2015-10">
7.week类型:week类型专门用来输入周号的文本框,并在提交时做有效性检查
<input type="week" name="week" value="2010-W40">
8.日期与时间类型元素的属性
①所有用于输入日期和时间的元素(date、time、dateime-local、month、week)都具有一个step属性,该属性用于对用户的选择进行限定
<input type="date" name="date" step="3">
对于datetime-local属性,使用step=60或60的整数倍则表示最小的输入单位是分钟,而不为整数倍时,表示可以输入以秒为单位的值
②在JavaScript中,使用stepUp方法和stepDown方法,可以变更这些具有step属性的输入值
document.forms[0].date.stepUp(5);
③在使用这些日期和时间的元素时,可以通过使用min属性和max属性来限定输入值得范围
<input type="date" name="date" min="2016-01-01" max="2016-01-31">
④所有用于输入日期和时间的元素都有一个valueAsDate属性,用于设置或获取UTC日期和时间
⑤所有用于输入日期和时间的元素都有一个valueAsNumber属性,用于设置或获取元素中所设置的日期和时间呗转换后的整数值(1970年1月1日0时0点0秒后所经过的毫秒数),也就是时间戳。
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>valueAsDate属性使用示例</title>
</head>
<body>
<form>
<input type="date" name="date" id="date">
<input type="button" value="点击我" onclick="alert(document.getElementById('date').valueAsNumber)">
</form>
<script>
document.getElementById('date').valueAsDate = new Date();
</scriipt>
</body>
</html>
9.number类型:专门用来输入数字的文本框,并在提交时进行检查,若不符则会以空白内容提交。number类型也具有max、min和step属性
<input type="number" name="number" value="25" max="100" min="10" step="5">
JavaScript为number元素提供了valueAsNumber属性,可以利用该属性设置和读取该元素中的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>valueAsNumber属性使用示例</title>
<script>
function sum () {
var number1 = document.getElementById('number1').valueAsNumber;
var number2 = document.getElementById('number2').valueAsNumber;
document.getElementById('result').valueAsNumber = number1 + number2;
}
</script>
</head>
<body>
<form>
<input type="number" id="number1"> +
<input type="number" id="number2"> =
<input type="number" id="result" readonly>
<input type="button" value="计算" onclick="sum();">
</form>
</body>
</html>
10.range类型:一种只允许输入一段范围内的数值的文本框,具有max属性和min属性,也具有step属性
<input type="range" name="range" value="25" max="100" min="10" step="5">
11.search类型:它是一种专门用来输入搜索关键词的文本框。外观上可以用CSS样式改写:
input[type="search"] {-webkit-appearance: textfield;}
12.tel类型:它被设计用来输入电话号码的专用文本框,但它并没有校验规则,我们可以通过pattern属性来指定对用户输入内容进行验证。
13.color类型:color类型的input元素用于选取颜色,其提供了一个颜色选择器。
选择背景:
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent = this.value;">
<span id="currentColor"></span>
14.简单表单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单表单示例</title>
</head>
<body>
<form name="form1">
<label for="username">姓名:</label>
<input type="text" name="username" id="username" required><br>
<label for="age">年龄:</label>
<input type="number" name="age" id="age" min="0" max="100"><br>
<label for="birthday">出生日期:</label>
<input type="date" name="birthday" id="birthday"><br>
<label for="Email">Email:</label>
<input type="email" name="email" id="email" required><br>
<label for="url">个人主页:</label>
<input type="url" name="url" id="url"><br>
<label for="memo">个人简介:</label>
<textarea name="memo" id="memo" required></textarea><br>
<input type="submit">
</form>
</body>
</html>
对新的表单元素使用样式
output元素的追加
output元素定义不同类型的输出,比如计算结果或脚本的输出,它必须书写在表单内部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>output元素示例</title>
<script>
function value_change() {
var number = document.getElementById('range1').value;
document.getElementById('output1').value = number;
}
</script>
</head>
<body>
<form id="testform">
请选择一个数值:
<input type="range" id="range1" min=0 max=100 step=5 value=10 onchange="value_change()">
<output id="output1">10</output>
</form>
</body>
</html>
2.表单验证
1.自动验证
在HTML5中,通过对元素使用属性的方法,可以实现对表单提交时执行的自动验证功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证示例</title>
</head>
<body>
<form method="post">
<input type="text" required pattern="^\w.*$">
<input type="submit">
</form>
</body>
</html>
2.取消验证
有两种方法可以取消表单验证:
- 利用form元素的novalidate属性来关闭整个表单验证
- 利用input元素或submit元素的formnovalidate属性
3.显式验证
checkValidity方法,调用该方法,可以显式的对表单内所有元素内容或单个元素内容进行有效性验证,它返回布尔值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkValidity示例</title>
<script>
function check() {
var email = document.getElementById('email');
if(email.value == '') {
alert('请输入Email地址');
return false;
} else if(!email.checkValidity()) {
alert('请输入正确的email地址');
return false;
} else {
alert('您输入的Email地址有效');
}
}
</script>
</head>
<body>
<form id="testform" onsubmit="return check();" novalidate="true">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<input type="submit">
</form>
</body>
</html>
3.增强的页面元素
1.新增的figure元素与figcaption元素
figure元素用来表示页面上的块独立的内容,它可以表示图片、统计图表或示例代码
figcaption元素表示figure元素的标题,它从属与figure必须书写在figure元素的内部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>figure元素示例</title>
</head>
<body>
<figure>
<img src="s1.jpg" alt="森林">
<figcaption>森林</figcaption>
</figure>
</body>
</html>
2.新增的details元素与summary元素
details元素为一种用于标识该元素内部的子元素可以展开、收缩显示元素。
summary元素从属于details元素,在用鼠标点击summary元素中的内容文字时,details元素中的其他所有从属元素将会展开或收缩。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>details元素使用示例</title>
<script>
function detail_ontoggle(detail) {
var p = document.geElementById('p');
if(detail.open) {
p.style.visibility = 'visible';
} else {
p.style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<details id="detail" ontoggle="detail_ontoggle(this)" style="curosr:pointer">
<summary>精武风云</summary>
<p id="p" style="visibility:hidden">陈真(甄子丹 饰)当年为报杀师之仇,独创虹口道场...(精武风云电影介绍)</p>
</details>
</body>
</html>
3.新增的mark元素
mark元素表示页面中需要突出显示或高亮显示的内容
<p><mark>HTML5</mark>是近十年Web开发标准最巨大的飞跃</p>
4.新增的progress元素
progress元素代表一个任务的完成进度,这个进度可以是不确定的,表示进度正在进行。
该元素具有两个表示当前任务完成情况的属性,value属性表示已完成了多少工作量,max属性表示总共有多少工作量。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>progress元素的使用示例</title>
<script>
var progressBar = document.getElementById('p');
function button_onlcick() {
var progressBar = document.getElementById('p');
progressBar.getElementByTagName('span')[0].textContent = "0";
for(var i=0; i<=100; i++) {
updateProgress(i);
}
}
function updateProgress(newValue) {
var progressBar = document.getElementById('p');
progressBar.value = newValue;
progressBar.getElementByTagName('span')[0].textContent = newValue;
}
</script>
</head>
<body>
<section>
<h2>progress元素的使用示例</h2>
<p>完成百分比:<progress id="p" max=100><span>0</span>%</progress></p>
<input type="button" onclick="button_onclick()" vlaue="请点击">
</section>
</body>
</html>
5.新增的meter元素
meter元素表示规定范围内的数量值,如磁盘使用量,投票比例等,它有6个属性
- value:在元素中标示出来的实际值
- min:指定规定范围时允许使用的最小值
- max:指定规定范围时允许使用的最大值
- low:规定范围的下限值,必须小于或等于high属性的值
- high:规定范围的上限值
- optimum:最佳值,该属性值必须在min属性值和max属性值之间
<p>磁盘使用量:<meter value="40" min="0" max="160">40/160</meter>GB</p>
6.新增的dialog元素
dialog元素代表一个对话框
在默认情况下,dialog元素是隐藏的,我们可以在JavaScript代码中使用元素的show方法显示dialog元素,使用close方法隐藏dialog元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="打开对话框" onclick="document.getElementById('dg').show();">
<dialog id="dg" style="width: 9%; text-align: center;">
<h1> 用户登录 </h1>
<main>
<form class="" action="index.html" method="post">
<label for="txtName" value="用户名">
<input type="text" id="txtName">
</label><br>
<label for="txtPassword" value="密码">
<input type="password" id="txtPassword">
</label><br>
<input type="button" value="登录">
<input type="button" value="关闭" onclick="document.getElementById('dg').close();">
</form>
</main>
</dialog>
</body>
</html>
可以使用dialog元素的showModal方法以模式对话框的形式显示dialog元素
<input type="button" value="打开对话框" onclick="document.getElementById('dg').showModal();">
如果要在页面打开时显示对话框,可以使用dialog元素的open属性
<dialog id="dg" open style="width:9%;text-align:center;">
可以使用dialog元素的returnValue属性为对话框设置或返回一个值
<input type="button" value="打开对话框" onclick="document.getElementById('dg').show(); document.getElementById('dg').returnValue='返回的值';">
<input type="button" value="关闭" onclick="document.getElementById('dg').close(); alert(document.getElementById('dg').returnValue);">
7.改良的a元素
在HTML5中,为a标签添加了download属性,用户点击带有此属性的链接后,将直接下载链接所指向的资源文件。
<a href="html5.jpg" download="HTML5权威指南"><img src="html5.jpg"></a>
用户点击链接后将直接下载html5.jpg这个图片文件,且文件名为’HTML5权威指南’
8.改良的ol列表
在HTML5中,为ol元素添加了start属性和reversed属性
如果希望列表编号不是从1开始,可以使用start属性自定义开始编号
<ol start=5>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
如果需要对列表进行反向编号,可以使用ol列表的resersed属性
<ol start=5 resersed>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
9.改良的dl列表
dl列表可以用来定义文章或网页上的术语解释
<dl>
<dt><dfn>RSS</dfn></dt>
<dd>RSS也叫聚合RSS是在线共享内容的一种简易方式....</dd>
<dt><dfn>博客</dfn></dt>
<dd>博客,又译为网络日志、部落格或部落阁等,是一种通常由个人管理...</dd>
</dl>
它也可以用来表示一些页面或article元素中内容的辅助信息
<dl>
<dt>作者</dt>
<dd>Kaindy</dd>
<dt>出版社</dt>
<dd>机械工业出版社</dd>
<dt>类别</dt>
<dd>网络开发</dd>
</dl>
10.加以严格限制的cite元素
cite元素表示作品(一本书、一篇文章、一首歌曲)的标题。在HTML4中cite可以用来表示作者,但在HTML5中明确规定不能使用cite元素表示包括作者在内的任何人名。
<p>我最喜欢的电影是由甄子丹主演的<cite>精武风云</cite>。</p>
11.重新定义的small元素
small元素定义了更具体的、专门用来标识所谓"小字印刷体"的元素,通常用在诸如免责声明、注意事项、法律规定、版权相关等声明文字中。
12.安全性增强的iframe元素
略…
13.增强的script元素
在HTML5中,对于script元素,新增async属性和defer属性,它们的作用都是为了加快页面的加载速度,使得脚本代码的读取不再妨碍页面上其他元素的加载。
当我们使用async属性时,脚本文件下载完毕后,会立即执行onload事件处理函数
<script async src="xxx.js" onload="myInit1()"></script>
<script async src="aaa.js" onload="myInit2()"></script>
而当我们使用defer属性时,脚本文件下载完毕后,不会立即执行onload事件处理函数,而是要等到页面全部加载完成后,才执行该脚本文件的onload事件处理函数
<script defer src="xxx.js" onload="myInit1()"></script>
<script defer src="aaa.js" onload="myInit2()"></script>