Les éléments d’interaction

Afficher des détails

Lorsque vous disposez de peu de place dans une page web, il peut être intéressant de n’afficher une information que si le visiteur le souhaite. Pour cela, nous utilisons l’élément <details> qui est le conteneur général. L’élément <summary> contiendra le texte sur lequel les visiteurs devront cliquer pour afficher les détails. C’est dans l’élément <summary> que vous placez tous les éléments que vous souhaitez voir afficher.

Voici un exemple simple :

<!DOCTYPE HTML> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <title>Détails et sommaire</title> 
</head> 
<body> 
   <details> 
       <summary>Affichez les informations détaillées</summary> 
           <p>Morbi leo risus, porta ac consectetur...</p> 
           <p><img src="gutenberg.jpg" alt="Gutenberg" /> 
           </p> 
   </details> 
</body> 
</html>

Voici l’affichage obtenu au chargement de la page. Le texte à cliquer est précédé par un triangle...

Utiliser une boîte de dialogue

Toujours dans la même optique de gagner de la place dans une page web, vous pouvez utiliser l’élément <dialog> qui permet d’afficher des informations supplémentaires dans une boîte de dialogue qui s’ouvrira par une action de l’utilisateur.

Si cet élément d’interaction est intéressant, il n’est cependant que reconnu par Google Chrome.

Voici les compatibilités indiquées par le site Can I Use :

Pour exploiter au mieux l’interaction avec les visiteurs, nous allons utiliser un petit script JavaScript qui permettra aux visiteurs d’ouvrir et de fermer la boîte de dialogue en cliquant sur des boutons. En effet, par défaut, la boîte de dialogue est déjà affichée lors du chargement de la page. C’est l’attribut booléen open qui le permet.

Voici la structure de cet élément :

<!DOCTYPE HTML> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <title>Boîte de dialogue</title> 
</head> 
<body> 
   <h3>Afficher et fermer la boîte de dialogue</h3> 
   <button id="ouvrir">Ouvrir</button> 
   <button id="fermer">Fermer</button> 
   <dialog...