HTML5 - nouveaux attributs de balise

Avec HTML5 on peut associer à tout élément des attributs data-* et aux éléments de type block l'attribut contenteditable.

Dans le chapitre précédent nous avons vu que la balise INPUT type ="text" dispose désormais de nouveaux attributs.

input

optional : champ dont la saisie est facultative
required : champ dont la saisie est obligatoire
autofocus : champ sélectionné lors du chargement de la page
pattern : précise le masque de saisie à respecter sous forme d'une expression régulière
placeholder : affichage d'un texte dans le champ tant que le champ n'a pas été rempli

Les attributs data-*

C'est l'un des grandes nouveautés de HTML5. Le développeur peut associer à chaque élément des données en créant ses propres attributs.
Seule condition : le nom de chaque attribut doit commencer par "data-".
C'est pour cette raison que l'on parle des attributs data-*.
Ces attributs personnalisés peuvent ensuite être utilisés par CSS et JavaScript.

Exemple

Faisons un peu de biologie aquatique !

Les images apparaissent ombrées.

Le code CSS

	img[data-nom] {box-shadow : 10px 10px 10px gray; width : 50% ; height :auto ;}
	figure {margin : 10px auto 10px auto}

Les image ayant l'attribut "data-non" seront ombrées.
Les éléments figure centrés horizontalement dans la page.

Le code HTML

...
<figure>
	<img src ="../img_bio/bispire.jpg" data-nom = "Bispire" 
	data-description ="ver annélidé polychète tubicole" class ="centre"  id ="image1">
	<figcaption> ? </figcaption>
</figure>
<figure>
	<img src ="../img_bio/lanice.jpg" data-nom = "Lanice" 
	data-description ="ver annélidé polychète tubicole" class="centre" id ="image2">
	<figcaption> ? </figcaption>
</figure>
...

Les images sont contenues dans une balise FIGURE.

data-nom qui contient le nom de l'espèce représentée par l'image
data-description qui contient "ver annélidé polychète tubicole" (description succincte de l'espèce)

Le script

function info()
{
	var image1 =document.querySelector("#image1") ; 
	var legende1 =document.querySelector("figcaption") ; 
	var nom1 = image1.dataset.nom;
	var description1 =image1.dataset.description;
	legende1.textContent = nom1 + " "  + description1 ; 
	
	var image2 =document.querySelector("#image2");
	var legende2 =document.querySelectorAll("figcaption")[1];
	var nom2 = image2.dataset.nom ; 
	var description2 =image2.dataset.description ; 
	legende2.textContent = nom2 + " " + description2;
}

La fonction remplit chacune des balises figcaption associée à une image.
Pour la première image avec la méthode traditionnelle getAttribute()
Pour la deuxième image avec la nouvelle propriété JavaScript dataset.
La syntaxe est alors : élément.dataset.attribut

Attention dans cette syntaxe l'attribut personnalisé doit être débarassé du préfixe "data-" .

Rendre une boite éditable

Avec HTML5 tous les éléments peuvent devenir éditables et non plus seulement les zones de texte des formulaires (balises INPUT & TEXTAREA).

Exemple politique (lol)

Vous pouvez corriger, compléter le texte contenu ci-dessous dans un DIV.

Poutine est un fou dangereux !

Code CSS & HTML

	...
	#boite {border : 1px solid red ; width :80% ; 
		min-height : 100px ; overflow : hidden ; resize : both; }
	...
	<div  contenteditable ='true'>Poutine est un fou dangereux ! </div>
	...
	<button onclick ="fafficher()">Afficher le texte de la boîte</button>
	...

La boîte DIV a l'attribut contenteditable= 'true' !

Le script

	function fafficher() 
	{
		var boite =document.querySelector('#boite');
		var texte = boite.textContent ; 
		alert("texte de la boîte :" + texte); 
	}

La fonction affiche le nouveau contenu de la boîte identifiée "boite".

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

HTML5 : nouvelles balises et nouveaux attributs

Des API utiles, des applications en HTML5

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

HTML5 - nouveaux attributs de balise

Les attributs data-*

Exemple

Le code CSS

Le code HTML

Le script

Rendre une boite éditable

Exemple politique (lol)

Code CSS & HTML

Le script