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.

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

... img[data-nom] {box-shadow : 10px 10px 10px gray; width : 50% ; height :auto ;} ... <img src ="../img_bio/bispire.jpg" data-nom = "Bispire" data-description ="ver annélidé polychète tubicole" > <img src ="../img_bio/lanice.jpg" data-nom = "Lanice" data-description ="ver annélidé polychète tubicole" > <button onclick ="info()">Infos sur ces deux images !</button> ...

L'attribut "data-nom" est utilisé pour mettre en forme les images de la page.

Le script

function info()
{
	var image =document.querySelector("img") ; 
	var nom = image.getAttribute("data-nom"); 
	var description =image.getAttribute("data-description"); 
	alert("nom animal : " + nom + " description : " + description); 
	
	var image =document.querySelectorAll("img")[1];
	var nom = image.dataset.nom; 
	var description = image.dataset.description ; 
	alert("nom espèce : " + nom + " description espèce : " + description); 
}

La fonction affiche des infos sur les deux images.
Pour la première image avec la méthode traditionnelle getAttribute()
Pour la deuxième image avec la nouvelle propriété JS dataset.
La syntaxe est alors : élément.dataset.attribut

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

Les attributs data-* et jQuery Mobile

JQuery Mobile est une extension de jQuery. Ce greffon (ou "plugin") permet de créer rapidement la version mobile d'un site et utilise systématiquement les attributs data-* ! Pour en savoir plus sur jQuery Mobile

Rendre une boite éditable

Avec HTML5 tous les éléments peuvent devenir éditables et non plus seulement les zones de texte des formulaires.

Exemple politique (lol)

Si vous n'êtes pas d'accord avec cette insertion vous pouvez la modifier puis vous cliquez sur le bouton.

Macron est un bon président !

Code CSS & HTML

... div {border : 1px solid red ; width :80% ; min-height : 100px ; overflow : hidden ; resize : both; } ... <div contenteditable ='true'>Macron est un bon président ! </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('div');
		var texte = boite.textContent ; 
		alert("texte de la boîte :" + texte); 
	}

La fonction affiche le contenu de la boîte DIV (sans le balisage).
Retour menu