Astuces ⇒ HTML CSS facebook twitter youtube

Nouveaux attributs dans HTML 5 | Nouveaux attributs dans HTML 5


Les balises de HTML 5 comportent de nouveaux attributs qui facilitera la réalisation d'application en ligne et l'interaction avec l'utilisateur.

Voici ceux qui paraissent essentiels

required

Cet attribut sans valeur spécifie que le champ concerné doit avoir une valeur pour que le formulaire soit validé
Si le formulaire n'est pas validé, un message d'alerte apparaît indiquant que le champ requis doit être rempli.

Les objets de formulaire en HTML 5
Exemple:

 

 <input name="x" required>

form

C'est une balise, mais c'est aussi maintenant un attribut pour les objets de formulaire. Cela permet de les placer n'importe où dans la page et de les associer à un formulaire en indiquant sont ID.
Exemple:

<form id="x"></form><button form="x" />

novalidate

Attribut de form qui indique que les données de formulaire doivent être envoyées sans validation. On ignore alors l'attribut required.

draggable, dropzone

Deux attributs pour toute balise indique le premier que l'on peut déplacer l'élément, pour le second que l'on peut le placer ici.


async

Attribut de script qui fait qu'un script JavaScript sera exécuté de façon asynchrone, après chargement complet de la page, même s'il se trouve en tête de page.

 <script async></script>

reversed

Pour une liste <ol>, affiche des nombres en ordre descendant.

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

download

Pour une URL, permet de télécharger le fichier au lieu de l'afficher.

<a href="filename" download="newfilename"></a>

Attributs de input et textarea

Outre les attributs déjà vus, communs à plusieurs objets de formulaire, certains attributs complètent les champs de formulaire.

autocomplete

Cet attribut de la balise form, a deux valeurs, on, si l'autocomplétion est active, off sinon. Quand il elle est activée, ce qui l'utilisateur tape dans un champ de texte peut être automatiquement complété par le navigateur en fonction de ce qu'il a déjà entré par le passé dans le même champ.
Le développeur n'a rien d'autre à incorporer.
Exemple:

 <form action="" autocomplete="on"> 

pattern

On lui assigne une expression régulière. Par exemple:

<input pattern="[A-Za-z0-9]">

pour valider le texte entré par l'utilisateur limité aux caractères alphanumériques.

 

placeholder

Est un complément à l'attribut "value" pour un champ d'entrée de texte. Il affiche une valeur indicative dans le champ de texte, et, quand on clique dans le champ, contrairement à ce qui se passe avec la valeur, ce contenu disparaît. Il n'est pas passé avec les valeurs de formulaire.

 

<input name="nom" type="text"  placeholder="Votre Nom ">
 

dirname

Dirname=direction name, le nom de la direction du texte, de gauche à droite ou de droite à gauche, ce qui est utile pour les pays ou la direction est inversée. Cette direction pour les champs textarea et input est généralement choisie par défaut par le navigateur, selon le pays où il réside, ou selon la contenu de la page. Elle vaut ltr ou rtl. Si on attribue par exemple "mydir" à l'attribut dirname, on aura dans les données de formulaire mydir=ltr ou mydir=rtl.

 

min, max, step

Ces attributs concernent les champs de texte de type: number, range, date, datetime, datetime-local, month, week, time. Il limitent les valeurs que l'on peut entrer avec respectivement, une valeur de limite inférieure, une limite supérieure et un incrément.
Exemple:

<input type="number" min="1" max="100" step="3" />
 

Attributs de document

Dans la balise <head>, l'attribut charset remplace une définition meta compliquée...

<meta charset="utf-8">

Cela a été en fait supporté par les navigateurs longtemps avant HTML 5 sans avoir été standardisé.

L'attribut manifest de <html> désigne un fichier manifeste utilisé en mode hors ligne, spécifiant la liste des contenus à mettre en cache.

Des attributs disparaissent...

A l'inverse, des attributs de HTML 4 deviennent inutiles et obsolète. C'est le cas de l'attribut type pour les balises <style> ou <script>. On écrit maintenant simplement:

<style></style>
<script></script>

Les images n'ont plus d'attribut name, mais seulement un id.

Weight et height restent utiles sur certaines balises comme img, canvas, mais sont obsolètes dans les tables.


Objet
Prévisualisation
Code HTML 5
Texte simple
<label>Texte</label>
Bouton simple
<input type="button" name="nom" value="Bouton">
Bouton image
<input type="image" src="image/bimage.jpg">
Champ de texte
<input type="text" name="texte" value="rien">
Mot de passe
<input type="password" name="monpass" value="12345">
Date
<input type="date" name="d" value="<?php echo $today?>">
Date et temps
<input type="datetime" name="dt" value="<?php echo $now?>">
Time
<time>2013-06-27</time>
Nombre
<input type="number" name="nombre" value="12345">
Couleur
<input type="color" name="couleur" value="">
Champ de recherche
<input type="search" name="" list="datalist" value="">
Data
Dix
<data value="10">Dix</data>
Case à cocher
<input type="checkbox" name="checkbox1" value="checkbox">
Groupe radio

<label>Choix 1
<input type="radio" name="radio1" value="radio1">
</label>
<label>Choix 2
<input type="radio" name="radio1" value="radio2">
</label>
Zone de texte
<textarea name="textarea">contenu</textarea>
Range
<input type="range" min="-100" max="100" value="0" step="2" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
<option value="+50">
</datalist>
Liste de données

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">

Select
<select name="select">
<option>Alpha</option>
<option>Beta</option>
<option>Delta</option>
</select>
Select liste
<select name="select2" size="3">
<option>Alpha</option>
<option>Beta</option>
<option>Delta</option>
</select>
Menu
  • Nouveau
  • Ouvrir
  • Sauver
  • <menu type="context">
    <li>Nouveau</li>
    <li>Ouvrir</li>
    <li>Sauver</li>
    </menu>
    Toolbar
  • <menu type="toolbar">
    <li><button type="button" onclick="fnew()">Nouveau</button></li>
    <li><button type="button" onclick="fopen()">Ouvrir</button></li>
    <li><button type="button" onclick="fsave()">Sauver</button></li>
    </menu>
    Combobox
    <input type="text" list="comboid">
    <datalist id="comboid">
    <option value="0">
    <option value="-30">
    <option value="30">
    <option value="+50">
    </datalist>
    Fichier
    <input type="file" name="file">
    Image et légende
    Caption
    <figure>
    <img src="images/comment.png">
    <figcaption>Caption</figcaption>
    </figure>
    Fieldset
    Titre

    ...Contenu...

    <fieldset> <legend>Titre </legend>
    <p>Contenu</p>
    </fieldset>
    Output
    <output onforminput="value = 2 + 2"></output>
    Meter
    12 units
    <meter min=0 max=24 value=12>12 units</meter>
    Progress
    0%
    <progress id="prog" max=100>
    Summary
    Présentation
    terme
    définition
    ...
    <details>
    <summary> Présentation </summary>
    <dl>
    <dt>terme</dt>
    <dd>définition</dd>
    ...
    </dl>
    </details>
    Bouton d'envoi
    <input type="submit" name="envoi" value="Envoyer">



    >
    Changer le fond
    Oregionale Skin
    7astuces
    Sélectionnez un Fond (11)
    7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
    Fond de contenu
    7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces