HTML5学习系列之表单与文件
- article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或者其他任何独立的内容。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>苹果</h1> <p>发表日期:<time pubdate="pubdate">2010/10/09</time></p> </header> <p><b>苹果</b></p> </article> </body> </html>
- seciton元素
section元素用于对网站或应用程序中页面上的内容进行分块，一个seciton元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或脚本定义行为时，推荐使用div而非section元素。
- nav元素
nav元素是一个可以用作导航的链接组，其中的导航链接到其他页面或当前页面的其他部分，并不是所有的链接组都要被放进nav元素，只需要将主要的，基本的链接组放进1.nav元素即可。具体来说，nav元素可以用于以下这些场合：
传统导航条：现在主流网站上都有不同层级的导航条，器作用是将当前画面跳转到网站的其他主要页面上去。
2.现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。
3.页内导航的作用是在本页面几个主要的组成部分之间进行跳转。
4.翻页操作时指在多个页面的前后页或博客网站的前后篇文章滚动。
- aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。
aside元素只要有以下两种使用方法：
- 被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释。
- 在article元素之外使用，作为页面或站点全局的附属信息部分，最典型的形式是侧边栏，其中的内容可以是友情链接，博客中其他文字列表、广告单元等。
- time元素与微格式
首先说一下微格式，它是一种利用HTML的class属性来对页面添加附加信息的方法，附加信息例如新闻事件发生的日期和时间，个人电话号码，企业邮箱等。
微格式并不是在html 5之后才有的，在html5之前它就和html结合使用，但是在使用过程中发现在日期和时间的机器编码上出现了一些问题，编码过程中产生一些歧义。Html5增加了一种新的元素来无歧义的，明确的对机器的日期和时间进行编码，并且以让人容易读的方式来展现它，这个元素就是time元素。
time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差，它可以定义很多格式的日期和事件。
<time datetime=”2010-11-13”>2010年11月13日</time>
- pubdate属性
pubdate属性是一个可选的、boolean值的属性，它可以用到article元素中的time元素上，意思是time元素代表了文章或整个网页的发布日期。
- header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内一个内容区块的标题，但也可以包含其他内容。
- hgroup元素
hgroup元素是将标题及其子标题进行分组的元素，hgroup元素通常会将h1~h6元素进行分组。
- footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注，footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。
- address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address应该不只是用来呈现电子邮箱或真实地址，还应用来展示跟文档相关的联系人的所有联系信息。
- form属性
在html4中，表单内的从属元素必须书写在表单内部，但是在html 5中，可以把它们书写在页面上任何地方，然后给该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。form属性的例子如下：
<form id=”testfrom”> <input type=”text”> </form> <textarea form=”testform”></textarea>
Input元素从属于foo表单，它被书写在表单内部，用不着再对它指定form属性，textarea元素被书写在form表单之外，但它从属于form表单，所以将form表单的id指定给textarea元素的form属性。这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加，因为它们不是被分散在表单之内的了。
- formaction属性
在html4中，一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页面，而在html5中可以给所有的提交按钮，都增加不同的formaction属性，使得点击不同的按钮，可以将表单提交到不同的页面。例子如下：
<form id=”testform” action=”serve.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=”v3” formaction=”s3.jsp”>提交到s3 <input type=”submit”> </form>
- formmethod属性
在html 4中，一个表单内只有一个action属性来对表单内所有元素统一指定提交页面，所以每个表单内也只有一个method属性来统一指定提交方法，同时也可以使用formmethod属性来对每个表单元素分班指定不同的提交方法，例子如下：
<form id=”testform” action=”serve.jsp”> <input type=”submit” name=”s1” value=”v1” formaction=”s1.jsp” formmethod=”post”>提交到s1 <input type=”submit” name=”s2” value=”v2” formaction=”s2.jsp” formmethod=”post”>提交到s2 </form>
- placeholder属性
placeholder是指当文本框处于未输入状态时文本框中显示的输入提示，实现方法非常简单，只要加上placeholder属性，然后指定提示文字就可以了。
- autofocus属性
给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点，目前为止要做到这点需要使用JavaScript
- list属性
在html5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id，datalist元素也是html 5中新增元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许其自行输入，该元素本身并不现实，而是当文本框获得焦点时以提示输入的方式显示，为了避免在买有支持该元素的浏览器上出现显示错误，可以用css等将它设定为不显示例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>list属性示例</title> </head> <body> text:<input type="text" name="greeting" list="greetings"> <datalist id="greetings" style="display: none"> <option value="good">good</option> <option value="hello">hello</option> <option value="afternoon">afternoon</option> </datalist> </body> </html>
- autocomplete属性
辅助输入所用的自动完成功能，是一个节省输入时间，同时十分方便的功能，在html 5之前，因为谁都可以看见输入的值，所用存在安全隐患，但只要使用autocomplete属性，安全性就可以得到很好的控制，对应autocomplete属性，可以指定”on”、”off”与””这三种值，不指定时，使用浏览器默认值，把该属性设为on时，可以显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以将该datalist元素中的数据作为候补输入的数据列表，自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示。
Input元素类型
- url类型
url类型的input元素是一种专门用来输入url地址的文本框，提交时如果该文本框中内容不是url地址格式的文字，则不允许提交。
- email类型
email类型的input元素是一种专门用来输入email地址的文本框，提交时如果该文本框内容不是email地址格式的文字则不允许提交，但是它并不坚持该email地址是否存在，提交时该文本框可以为空，除非加上了required属性。
Email类型的文本框具有一个multiple属性——它允许在该文本框中输入一串以逗号分隔的email地址，当然，并不强制要求用户输入该email地址列表，在实际使用过程中，可以由开发者通过编程的方式将用户联系人地址列表中的邮件列表弹出，在每个联系人的邮件地址旁边带有复选框，供用户选择输入。
- date类型
date类型的input元素是深受开发者喜爱的一直元素，我们也经常看到页面中要求我们输入的各种各样的日期。Date类型的input元素以日历的形式方便用户输入。
- time类型
time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查，她的外观取决于浏览器，可能是简单的文本框，只是提交时检查是否输入了有效的时间，也可能以时钟形式出现，还可以携带时区。
- datetime类型
datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和事件进行有效性检查。
- datetime-local类型
datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。
- month类型
month类型的input元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月份的有效性进行检查。
- week类型
week类型的input元素是一种专门用来输入周号的文本框，并且在提交时会对输入的周号之有效性进行检查。
- number类型
number类型的input元素是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是否为数字，它具有min、max与step属性。
- range类型
range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值，它还具有step属性，可以指定每次拖到的幅度。
- search类型
search类型的input元素是一种专门用来输入搜素关键词的文本框，search类型与text类型仅仅在外观上有区别。
- tel类型
tel类型的input元素被设计为用来输入电话号码的专用文本框，它没有特殊的校验规则，不强制输入数字。但是开发者可以通过pattern属性来指定对于输入的电话号码格式的验证。
- color类型
color类型的input元素用来选取颜色，它提供了一个颜色选取器。
- output元素的追加
html 5中新增加了元素output，output元素定义不同类型的输出，比如计算结果或脚本的输出，output元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或者对它添加form属性。例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>output元素示例</title> </head> <body> <form id="testform"> 请选择一个数值： <input name="rangel" type="range" min="0" max="100" step="5"/> <output onforminput="value=rangel.value">50</output> </form> </body> </html>
- 表单自动验证
在html 5 中，通过对元素使用属性的方法，可以实现在表单提交时执行自动验证的功能。
- required属性
在html 5 中新增的required属性可以应用在大多数输入元素上（除了隐藏元素、图片元素按钮上）。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必须输入内容。
- pattern属性
之前提到的一些新增的input元素，要求输入内容符合一定的格式，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式，当输入的内容不符合给定格式时，则不允许提交，同事在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。
- min属性与miax属性
min与max这两个属性是数值类型或日期类型的input元素的专用属性，它们限制了在input元素中输入的数值与日期的范围。
- step属性
step属性控制input元素中的值增加或减少时的步幅。
- 显式验证
除了对input元素添加属性进行元素内容有效性的自动验证外，在html 5中，form元素与input元素都具有一个checkValidity方法，调用该方法，可以显式地对表单内容所有元素内容或单个元素内容进行有效性验证。CheckValidity方法以boolean的形式返回验证结果，例如：
<!DOCTYPE html> <html lang="en"> <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地址") } else { alert("您输入的Email地址有效") } } </script> </head> <body> <form id="testform" onsubmit="return check()"> <label for="email">Email</label> <input name="email" id="email" type="email"/> <br/> <input type="submit"/> </form> </body> </html>
- 取消验证
有时我们可能想要把表单临时提交一下，但又不想让它进行表单中所有元素内容的有效性检查。例如，一个非常大的表单需要分成两个部分，在第二部分中有个文本框中内容是必须要填的，如果填每一部分内容则会耗时较多，或填完第一部分之后，第二部分要过一段时间再填，在这种情况下应该允许用户先提交保存第一部分内容，但是同时需要临时取消第二部分的内容表单验证。
有两种方法：
第一种方法是利用form元素的novalidate属性它可以关闭整个表单验证，当整个表单的第二部分需要验证的内容比较多，但又想先提交表单的第一部分内容时，可以使用这个方法，先把该属性设置为true，关闭表单验证，提交第一部分内容，然后在提交第二部分时在把它设为false，打开表单验证，提交的第二部分内容。
第二种方法是利用input元素或submit元素的formnovalidate属性，利用input元素的formnovalidate属性可以让表单验证对单个input元素失效，在前面所举例子中，当表单的第二部分中需要验证的元素数量很少时，可以只利用这些元素的formnovalidate属性，让表单验证对这些元素失效。
而如果对submit按钮使用了formnovalidate属性，点击该按钮时，相当于利用了form元素的novalidate属性，整个表单验证都失效了。
- 自定义错误信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义错误信息示例</title> <script> function check() { var pass1 = document.getElementById("pass1"); var pass2 = document.getElementById("pass2"); if (pass1.value != pass2.value) { pass2.setCustomValidity("密码不一致。"); } else { pass2.setCustomValidity(""); } var email = document.getElementById("email"); if (!email.checkValidity()) { email.setCustomValidity("请输入正确的Email地址"); } } </script> </head> <body> <form id="testform" onsubmit="return check()"> 密码：<input type="password" name="pass1" id="pass1"/><br/> 确认密码：<input type="password" name="pass2" id="pass2"/><br/> Email:<input type="email" name="email" id="email"/><br/> <input type="submit"> </form> </body> </html>
- 新增的figure元素和figcation元素
figure元素也是一种元素的组合，电邮可选标题，figure元素用来表示网页上一块独立内如，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片、统计图或代码示例。
Figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部，可以书写在figure元素内的其他从属元素的前面或后面，一个figure元素内最多只允许放置一个figcaption元素，但允许放置多个其他元素。
- 新增的details元素
details元素提供了一种替代JavaScript的、将画面上局部区域进行展示或收缩的方法，不过现在还有任何浏览器对它支持。
- 新增的mark元素
mark元素表示页面中需要突出显示或高亮显示的，对应当前用户具有参考作用的一段文字，它通常使用于引用原文的时候，目的是引起读者的注意，mark元素是对原文内容具有补充作用的一个元素，它应该用于一段原文作者不认为重要，但未了与原文作者不相关的其他目的，而需要突出显示或高亮显示文字上面，
mark元素最主要的目的是吸引当前用户的注意，因为标示出来的文字与用户的当前操作有关，通常该元素对于当前用户具有很好的帮助作用。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mark元素应用在页面检索时的示例</title> </head> <body> <h1>搜索"<mark>HTML 5</mark>",找到相关页面约10,200,000篇，用时0.041秒</h1> <section id="search-results"> <article> <h2> <a href="#"> </a> </h2> </article> </section> </body> </html>
- 新增的progress元素
progress元素代表一个任务的完成进度，这个进度可以是不确定的，只是表示进度正在进行，但不清楚还有多少工作量没有完成，也可以用0到某个最大数字如100之间数字来表示准确的进度完成情况。
该元素具有两个属性来表示当前任务完成情况，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量，工作量的单位是随意的，不用指定。
在属性设定的时候，value属性和max属性只能指定为有效的浮点数，value属性的值必须大于0，且小于或等于max属性，max属性的值必须大于0。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>progress元素的使用示例</title> <script> var progressBar = document.getElementById("p"); function button_onclick() { var progressBar = document.getElementById("p"); progressBar.getElementsByTagName("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.getElementsByTagName("span")[0].textContent = newValue; } </script> </head> <body> <section> <h2>progress元素的使用示例</h2> <p>完成百分比:<progress id="p" max="100" value="50"><span>13</span>%</progress></p> <input type="button" onclick="button_onclick()" value="请点击"> </section> </body> </html>
