Concise version of HTML5 study notes (7): New attributes (2)

dirname attribute

The input and textarea elements have a new element dirname, which is used to control the directionality of submission set by the user (annotation, that is, the directionality of writing, ltr or rtl).

<form action="addcomment.cgi" method=post>
 <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
 <p><button name="mode" type=submit value="add">Post Comment</button></p>
</form>

When the user submits, the browser will receive three parameters: comment, comment.dir and mode, similar to the following: comment=Hello&comment.dir=ltr&mode=add

If it is an Arabic browser and the input is Arabic مرحبًا, the parameters returned should be like this:

comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add

maxlength and wrap attributes under textarea

The new maxlength of textarea is the same as the maxlength of input, both limiting the maximum length.

The newly added wrap attribute is an enumeration value (soft/hard), which means:

hard: automatic hard return and line feed, and the line feed mark is sent to the server together. It must Use it together with cols to determine how many characters are required to wrap;

soft: automatic soft carriage return and newline, the newline mark will not be sent to the server

novalidate attribute under form

The new attribute novalidate means that the form can be submitted without verification (regardless of whether the elements in the form have verification conditions, such as required, min, max, etc.).

Example code:

<form action="demo_form.asp" novalidate="novalidate">
  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>

Another usage is that if there are multiple submit buttons in the same form, you can set the formnovalidate attribute for a certain button to ignore verification, for example:

<form action="editor.cgi" method="post">
 <p><label>Name: <input required name=fn></label></p>
 <p><label>Essay: <textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="Submit essay"></p>
 <p><input type=submit formnovalidate name=save value="Save essay"></p>
 <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
</form>

This form is only verified when the Submit essay button is clicked, and the other two buttons are not verified.

New attributes under input and button

The input and button elements have added several new attributes (formaction, formenctype, formmethod, formnovalidate and formtarget). If these attributes are set, then The corresponding form attribute value will be overwritten, that is, the action, enctype, method, novalidate and target attribute values ​​of the form element to which the input or button belongs will be overwritten.

Example code:

<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" /><br />
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />
</form>

Type and label attributes under menu

The menu element has two new attributes: type and label. They allow the element to be transformed into a menu in a typical user interface and provide a context menu in conjunction with the global contextmenu property.

scoped attribute under style

The style element has a new scoped attribute, which is used to enable scoped style sheets. Style rules in such a style element apply only to the subtree, or sibling tree, of the current style element's parent element.

<!-- 这个article正常使用head里声明的style -->
 <article>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
</article>

<article>
    <!-- 这里声明的style只能让该article以及子元素使用 -->
    <style scoped>
        h1 { color: hotpink; }
        article { border: solid 1px hotpink; }
    </style>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
</article>

The async attribute under script

The async attribute allows the script loading steps to be executed asynchronously (that is, it must be in the form of a src reference file), for example:

<script type="text/javascript" src="demo_async.js" async="async"></script>

有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步执行（当页面继续进行解析时，脚本将被执行）

如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

html下的manifest属性

html 元素有了一个新属性 manifest，指向一个用于结合离线Web应用API的应用程序缓存清单。

首先，需要先创建manifest文件

CACHE MANIFEST
#This is a comment

CACHE #需要缓存的文件
index.html
style.css

NETWORK: #不需要缓存的文件
search.php
login.php

FALLBACK: #资源不可用的情况下，重定向的地址
/api offline.html

然后加该文的地址加到html属性里：

<html manifest="/offline.manifest">

例子：http://www.mangguo.org/create-offline-html5-web-apps-in-5-easy-steps/

link下的sizes属性

link 元素有了一个新的属性 sizes。可以结合 icon 的关系(通过设置 rel 属性，可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。

例子代码：

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />

ol下的reversed属性

ol 元素有了一个新属性 reversed。当其存在时，代表列表中的顺序为降序。

iframe下的sanddbox, seamless和srcdoc属性

iframe 元素有了三个新属性分别是 sandbox, seamless, 和 srcdoc，用以允许沙箱内容，例如，博客评论。

例子代码：

<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html"></iframe>

Seamless:

<nav><iframe seamless src="nav.include.html"></iframe></nav>

video和audio的play属性

HTML5也使得所有来自HTML4的事件处理属性（那些形如 onevent-name 的属性）变成全局属性，并为其定义的新的事件添加了几个新的事件处理属性。比如，媒体元素(video 和 audio)API所使用的 play 事件。

The above is the concise version of HTML5 study notes (7): the content of new attributes (2). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!