Version concise des notes d'étude HTML5 (7) : nouveaux attributs (2)

Attribut dirname

Les éléments input et textarea ont un nouvel élément dirname, qui est utilisé pour contrôler la directionnalité de soumission définie par l'utilisateur (annotation, c'est-à-dire la directionnalité de l'écriture, ltr ou 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>

Lorsque l'utilisateur soumet, le navigateur recevra 3 paramètres, à savoir : comment, comment.dir et mode, similaires à ce qui suit : comment=Hello&comment.dir=ltr&mode=add

S'il s'agit d'un navigateur arabe et que l'entrée est arabe مرحبًا, les paramètres renvoyés devraient ressembler à ceci :

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

maxlength et textarea Le nouvel attribut maxlength de wrap

textarea est la même que la longueur maximale de l'entrée, les deux limitant la longueur maximale.

L'attribut wrap nouvellement ajouté est une valeur d'énumération (soft/hard), ce qui signifie :

hard : retour matériel et saut de ligne automatiques, et la marque de saut de ligne est transmise ensemble au serveur . Il doit l'utiliser avec cols pour déterminer le nombre de caractères à envelopper ;

soft : retour chariot automatique et saut de ligne, la marque de saut de ligne ne sera pas envoyée au serveur

novalidate. attribut sous formulaire

Le nouvel attribut novalidate signifie que le formulaire peut être soumis sans vérification (que les éléments du formulaire aient ou non des conditions de vérification, telles que obligatoire, min, max, etc.).

Exemple de code :

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

Une autre utilisation est qu'il existe plusieurs boutons de soumission dans le même formulaire. Vous pouvez définir l'attribut formnovalidate pour qu'un bouton ignore la validation, par exemple :

<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>

Ce formulaire n'est validé que lorsque le bouton Soumettre l'essai est cliqué, et les deux autres boutons ne sont pas validés.

Nouveaux attributs sous input et bouton

Les éléments d'entrée et de bouton ont ajouté plusieurs nouveaux attributs (formaction, formenctype, formmethod, formnovalidate et formtarget). Si ces attributs sont définis, alors l'attribut de formulaire correspondant). La valeur sera écrasée, c'est-à-dire que les valeurs des attributs action, enctype, method, novalidate et target de l'élément de formulaire auquel appartient l'entrée ou le bouton seront écrasées.

Exemple de 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>

attributs type et label sous le menu

L'élément menu a deux nouveaux attributs : type et label. Ils permettent à l'élément d'être transformé en menu dans une interface utilisateur typique et fournissent un menu contextuel en conjonction avec la propriété globale contextmenu. L'attribut scoped sous

style L'élément

style a un nouvel attribut scoped, qui est utilisé pour activer les feuilles de style scoped. Les règles de style dans un tel élément de style s'appliquent uniquement au sous-arbre, ou à l'arbre frère, de l'élément parent de l'élément de style actuel.

<!-- 这个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>

L'attribut async sous script

L'attribut async permet d'exécuter les étapes de chargement du script de manière asynchrone (c'est-à-dire qu'il doit être sous la forme d'un fichier de référence src pour être utilisé ), par exemple :

<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 事件。

Ce qui précède est la version concise des notes d'étude HTML5 (7) : le contenu des nouveaux attributs (2). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !