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.
- Nouveaux attributs de la balise 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
Les images sont contenues dans une balise FIGURE.
- Pour chaque images il y a deux attributs "data-*" :
- 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)
Si vous n'êtes pas d'accord avec cette insertion vous pouvez la modifier puis vous cliquez sur le bouton.
Code CSS & HTML
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".