Certains éléments de base constituent l’ossature de tout document HTML. Nous allons ici nous focaliser sur ceux qui permettent l’interaction avec l’utilisateur.
I Principaux éléments d’une page web
Dans une page web, beaucoup d’éléments servent à structurer la page et fournir sa sémantique tandis que d’autres permettent d’interagir avec un utilisateur : les plus connus sont les liens hypertextes, les zones de texte, les boutons ou les listes déroulantes.
L’interaction peut se faire via l’utilisation de styles CSS, à l’aide du langage JavaScript ou encore en déclenchant une action sur le serveur lors d’une validation de formulaire.
II Les différents types d’interaction
1 Interaction via un style CSS
Une façon très simple d’interagir avec un utilisateur est de le faire via les CSS (Cascading Style Sheet). Cette interaction peut concerner toute sorte d’éléments HTML.
Par exemple, pour mettre en avant les liens dans une page, on peut faire réagir au survol d’un lien en utilisant la pseudo-classe de style :hover.
Pour obtenir au survol un agrandissement de 200 % de la taille des liens :
a:hover{ font-size: 200%; }
2 Interaction sur la base d’un
Un formulaire HTML est indiqué par la balise
et contient notamment des champs de saisie appelés de différents types.Voici des types courants de champs :
Description | Type | Exemple d’affichage |
|---|---|---|
Champ texte d’une ligne | text | |
Champ mot de passe | password | |
Choix exclusif | radio | |
Cases à cocher | checkbox | |
Sélection de fichier | file | |
Bouton de soumission | submit |
Un exemple de code HTML :
Les inputs peuvent être de types plus spécialisés comme tel, search, url, email, number, range, color ou list.
3 Interaction sur la base d’un Un autre élément important d’interaction est la liste déroulante ou . Exemple de code :
Les valeurs affichées sont les textes entre les balises ouvrantes et fermantes de l’élément option. Les attributs value sont utilisés en JavaScript ou côté serveur pour connaître le choix de l’utilisateur. Il est préférable qu’ils ne comportent ni espaces, ni caractères spéciaux. Le select autorise un seul choix par défaut mais peut être précisé multiple pour permettre de valider plusieurs choix simultanés. Dans ce cas les valeurs sélectionnées sont traitées comme un tableau, noté par [], exemple :
