Accueil
Mes tutoriels sur la programmation

Tutoriel HTML - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

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.

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.

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)

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

... #boite {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('#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".