Éléments d’interaction dans une page web

Merci !

Fiches
Classe(s) : 1re Générale | Thème(s) : Interface homme-machine et Web
 

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 <input>

Un formulaire HTML est indiqué par la balise <form> et contient notamment des champs de saisie appelés <input> de différents types.

Voici des types courants de champs <input> :

Description

Type

Exemple d’affichage

Champ texte d’une ligne

text

05230_chap05_i01

Champ mot de passe

password

05230_chap05_i02

Choix exclusif

radio

05230_chap05_i03

Cases à cocher

checkbox

05230_chap05_i04

Sélection de fichier

file

05230_chap05_i05

Bouton de soumission

submit

05230_chap05_i07

Un exemple de code HTML :

PB_Bac_05230_numerique1_TT_p137-170_C05_Groupe_Schema_0

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 <select>

Un autre élément important d’interaction est la liste déroulante ou <select>. Exemple de code :

PB_Bac_05230_numerique1_TT_p137-170_C05_Groupe_Schema_1

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 :

PB_Bac_05230_numerique1_TT_p137-170_C05_Groupe_Schema_2

Annabac est gratuit en septembre !

Inscris-toi pour en profiter.