LES FORMULAIRES

LES FORMULAIRES
 Les pages HTML peuvent être enrichie par des
formulaires interactifs, qui invitent vos visiteurs à
renseigner des informations : saisir du texte,
sélectionner des options, valider avec un bouton…
tout est possible !
 Nous arrivons cependant aux limites du langage
HTML car il faut ensuite pouvoir analyser les
informations saisies par le visiteur… et cela ne
peut se faire en langage HTML. Comme nous allons
le voir, le traitement des résultats doit s'effectuer
dans un autre langage, tel que le PHP.
 En attendant, nous avons un grand nombre de
nouvelles balises HTML à découvrir.
CRÉER UN FORMULAIRE
 Pour insérer un formulaire dans une page
HTML, il faut commencer par écrire une
balise <form> </form>.
 C'est la balise principale du formulaire, elle
permet d'en indiquer le début et la fin.
CRÉER UN FORMULAIRE
CRÉER UN FORMULAIRE
 Notez qu'il faut obligatoirement mettre des
balises de type block (comme <p> </p>) à
l'intérieur de votre formulaire si vous
souhaitez y faire figurer du texte.
CRÉER UN FORMULAIRE
 Voilà pour la structure de base. Maintenant,
soyez attentifs : ce que j'ai à vous dire n'est
pas évident parce qu'on est à la limite du
HTML.
 On va prendre un exemple pour que les
choses soient claires. Supposons que votre
visiteur vienne de taper un commentaire dans
votre formulaire, par exemple un message
qu'il aimerait publier sur vos forums. Ce
message doit être envoyé pour que vous
puissiez le recevoir et l'afficher pour vos
autres visiteurs.
CRÉER UN FORMULAIRE
 Voila les problèmes à va se poser :
 Problème n°1 : comment envoyer le texte saisi
par le visiteur ? Par quel moyen ?
 Problème n°2 : une fois que les données ont été
envoyées, comment les traiter ? Souhaitez-vous
recevoir le message automatiquement par mail
ou préférez-vous qu'un programme se charge de
l'enregistrer quelque part, puis de l'afficher sur
une page visible par tout le monde ?
 Pour fournir les réponses à ces deux problèmes,
vous devez ajouter deux attributs à la balise
<form> :
CRÉER UN FORMULAIRE
 method : cet attribut indique par quel moyen
les données vont être envoyées (réponse au
problème n°1). Il existe deux solutions pour
envoyer des données sur le Web :
 method="get" : c'est une méthode en général
assez peu adaptée car elle est limitée à 255
caractères. La particularité vient du fait que
les informations seront envoyées dans l'adresse
de la page (http://…), mais ce détail ne nous
intéresse pas vraiment pour le moment. La
plupart du temps, je vous recommande
d'utiliser l'autre méthode : post.
CRÉER UN FORMULAIRE
 method="post" : c'est la méthode la plus utilisée pour
les formulaires car elle permet d'envoyer un grand
nombre d'informations. Les données saisies dans le
formulaire ne transitent pas par la barre d'adresse.
 action : c'est l'adresse de la page ou du programme
qui va traiter les informations (réponse au problème
n°2). Cette page se chargera de vous envoyer un e-
mail avec le message si c'est ce que vous voulez, ou
bien d'enregistrer le message avec tous les autres
dans une base de données.
 Cela ne peut pas se faire en HTML et CSS, on utilisera
en général un autre langage dont vous avez peut-être
entendu parler : PHP.
CRÉER UN FORMULAIRE
 On va donc maintenant compléter la balise
<form> avec les deux attributs qu'on vient
de voir.
 Pour method, vous l'aurez deviné, je vais
mettre la valeur post.
 Pour action, je vais taper le nom d'une page
fictive en PHP (traitement.php). C'est cette
page qui sera appelée lorsque le visiteur
cliquera sur le bouton d'envoi du formulaire.
CRÉER UN FORMULAIRE
CRÉER UN FORMULAIRE
 Pour le moment, on ne sait pas ce qu'il se
passe à l'intérieur de la page traitement.php.
 Notre priorité, pour le moment, est de
découvrir en HTML/CSS comment faire pour
insérer des zones de texte, des boutons et
des cases à cocher dans votre page web.
C'est ce que nous allons voir maintenant.
LES ZONES DE SAISIE BASIQUE
 Nous allons passer en revue les différentes balises HTML
permettant de saisir du texte dans un formulaire.
 Il faut savoir qu'il y a deux zones de texte différentes :
 La zone de texte monoligne : comme son nom
l'indique, on ne peut y écrire qu'une seule ligne. Elle
sert à saisir des textes courts, par exemple un pseudo.
 La zone de texte multiligne : cette zone de texte
permet d'écrire une quantité importante de texte sur
plusieurs lignes, par exemple une dissertation sur
l'utilité du HTML dans le développement des pays d'Asie
du Sud-Est.
ZONE DE TEXTE MONOLIGNE
 La figure suivante montre à quoi ressemble
une zone de texte monoligne.

 Pour insérer une zone de texte dans une

ligne, on va utiliser la balise <input />.
 On retrouvera cette balise plusieurs fois dans
la suite de ce chapitre. À chaque fois, c'est
la valeur de son attribut type qui va changer.
 Pour créer une zone de texte à une ligne, on
doit écrire :
ZONE DE TEXTE MONOLIGNE

Ce n'est pas encore suffisant : il faut donner un nom

à votre zone de texte.
Ce nom n'apparaît pas sur la page mais il vous sera
indispensable par la suite.
En effet, cela vous permettra (en PHP par exemple)
de reconnaître d'où viennent les informations :
vous saurez que tel texte est le pseudo du visiteur,
tel texte est le mot de passe qu'il a choisi, etc.
Pour donner un nom à un élément de formulaire, on
utilise l'attribut name.
Ici, on va supposer qu'on demande au visiteur de
rentrer son pseudo :
ZONE DE TEXTE MONOLIGNE

Essayons donc de créer un formulaire très basique

avec notre champ de texte :
ZONE DE TEXTE MONOLIGNE

Essayez ce code chez vous afin d'observer le résultat.

LES LIBELLÉS
 Cette zone de texte est bien jolie mais si
votre visiteur tombe dessus, il ne sait pas ce
qu'il doit écrire. C'est justement le rôle de la
balise <label> :
LES LIBELLÉS
 Ce code donne exactement le résultat que
vous avez pu observer à la figure
précédente.
 Mais cela ne suffit pas. Il faut lier le label à
la zone de texte.
 Pour ce faire, on doit donner un nom à la
zone de texte, non pas avec l'attribut name
mais avec l'attribut id (que l'on peut utiliser
sur toutes les balises).
LES LIBELLÉS
 Pour lier le label au champ, il faut lui donner
un attribut for qui a la même valeur que l'id
du champ… Le mieux est de le voir sur un
exemple :
LES LIBELLÉS
 Essayez de cliquer sur le texte « Votre
pseudo » : vous allez voir que le curseur se
place automatiquement dans la zone de
texte correspondante.
D’AUTRES ATTRIBUTS DE INPUT
 On peut ajouter un certain nombre d'autres
attributs à la balise <input /> pour
personnaliser son fonctionnement :
 On peut agrandir le champ avec size.
 On peut limiter le nombre de caractères que
l'on peut saisir avec maxlength.
 On peut pré-remplir le champ avec une
valeur par défaut à l'aide de value.
D’AUTRES ATTRIBUTS DE INPUT
 On peut donner une indication sur le contenu
du champ avec placeholder. Cette indication
disparaîtra dès que le visiteur aura cliqué à
l'intérieur du champ.
 Dans l'exemple suivant, la zone de texte
contient une indication permettant de
comprendre ce qu'il faut saisir ;
 le champ fait 30 caractères de long mais on
ne peut écrire que 10 caractères maximum à
l'intérieur :
D’AUTRES ATTRIBUTS DE INPUT

Testez vous-mêmes le résultat pour observer le

comportement du champ. En attendant, voici le rendu
du champ dans son état initial en figure suivante.
D’AUTRES ATTRIBUTS DE INPUT
D’AUTRES ATTRIBUTS DE INPUT
 Vous pouvez facilement faire en sorte que la
zone de texte se comporte comme une «
zone de mot de passe », c'est-à-dire une
zone où on ne voit pas à l'écran les
caractères saisis.
 Pour créer ce type de zone de saisie, utilisez
l'attribut type="password".
 Je complète mon formulaire. Il demande
maintenant au visiteur son pseudo et son
mot de passe :
 ZONES MOTS DE PASSE

Testez la zone de mot de passe : vous verrez que les

caractères ne s'affichent pas à l'écran, comme sur la
figure suivante.
RÉSULTAT À L’ECRAN
ZONES DE TEXTES MULTILIGNES
 Pour créer une zone de texte multiligne, on
change de balise : nous allons utiliser
<textarea> </textarea>.
 Comme pour tout autre élément du
formulaire, il faut lui donner un nom avec
name et utiliser un label qui explique de quoi
il s'agit.
ZONES DE TEXTES MULTILIGNES
RESULTAT À L’ECRAN
ZONE DE TEXTE MULTILIGNE
 Il est possible de modifier la taille du
<textarea> de deux façons différentes.
 En CSS : il suffit d'appliquer les propriétés CSS
width et height au <textarea>.
 Avec des attributs : on peut ajouter les
attributs rows et cols à la balise <textarea>. Le
premier indique le nombre de lignes de texte
qui peuvent être affichées simultanément, et le
second le nombre de colonnes.
 Pourquoi ouvre-t-on la balise <textarea> pour
la fermer juste après ?
VALEURS PAR DEFAUT POUR
LES TEXTAREA
 Vous pouvez pré-remplir le <textarea> avec
une valeur par défaut.
 Dans ce cas, on n'utilise pas l'attribut value
: on écrit tout simplement le texte par
défaut entre la balise ouvrante et la balise
fermante !
CODE HTML
RESULTAT À L’ECRAN
LES ZONES DE SAISIE ENRICHIES
 HTML5 apporte de nombreuses fonctionnalités
nouvelles relatives aux formulaires. De
nouveaux types de champs sont en effet
apparus avec cette version. Il suffit de donner à
l'attribut type de la balise <input /> l'une des
nouvelles valeurs disponibles.
 Tous les navigateurs ne connaissent pas encore
ces zones de saisie enrichies. À leur place, les
anciennes versions des navigateurs afficheront
une simple zone de saisie monoligne (comme si
on avait écrit type="text").
LES ZONES DE SAISIE ENRICHIES
 Les nouveaux navigateurs peuvent profiter
des dernières fonctionnalités, tandis que les
anciens affichent une zone de texte de
remplacement qui convient tout aussi bien.
E-MAIL
 On peut demander à saisir une adresse e-
mail :

 Le champ vous semblera a priori identique mais

votre navigateur sait désormais que l'utilisateur
doit saisir une adresse e-mail.
 Il peut afficher une indication si l'adresse n'est
pas un e-mail, c'est ce que fait Firefox par exemple
(figure suivante).
CHAMP EMAIL MAL RENSEIGNÉ

Sachez que certains navigateurs, comme les

navigateurs mobiles sur iPhone et Android, affichent
un clavier adapté à la saisie d'e-mail (figure suivante).
AFFICHAGE SUR LES NAVIGATEURS MOBILES
AVEC LE TYPE URL
 Avec le type url, on peut demander à saisir
une adresse absolue (commençant
généralement par http://) :

Même principe : si le champ ne vous semble pas

différent sur votre ordinateur, sachez que celui-ci
comprend bel et bien que le visiteur est censé saisir
une adresse. Les navigateurs mobiles affichent par
exemple un clavier adapté à la saisie d'URL (figure
suivante).
URL SUR MOBILE
NUMÉRO DE TÉLÉPHONE
 Ce champ est dédié à la saisie de numéros de
téléphone :
AFFICHAGE SUR IPHONE
 Sur iPhone, par exemple, un clavier adapté
s'affiche lorsqu'on doit remplir le champ
(figure suivante).
NOMBRE
 Ce champ permet de saisir un nombre
entier :
NOMBRE
 Le champ s'affichera en général avec des
petites flèches pour changer la valeur (figure
suivante).
NOMBRE
 Vous pouvez personnaliser le fonctionnement
du champ avec les attributs suivants :
 min : valeur minimale autorisée.
 max : valeur maximale autorisée.
 step : c'est le « pas » de déplacement. Si vous
indiquez un pas de 2, le champ n'acceptera que
des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).
UN CURSEUR
 Le type range permet de sélectionner un
nombre avec un curseur (aussi appelé slider),
comme à la figure suivante :
UN CURSEUR
 Vous pouvez utiliser là aussi les attributs
min, max et step pour restreindre les valeurs
disponibles.
COULEUR
 Ce champ permet de saisir une couleur :

En pratique, il reste assez peu mis en œuvre par les

navigateurs à l'heure actuelle. Ne vous étonnez pas
si vous voyez seulement un champ de texte
classique.
DATE
 Différents types de champs de sélection de
date existent :
 date : pour la date (05/08/1985 par exemple) ;
 time : pour l'heure (13:37 par exemple) ;
 week : pour la semaine ;
 month : pour le mois ;
 datetime : pour la date et l'heure (avec gestion
du décalage horaire) ;
 datetime-local pour la date et l'heure (sans
gestion du décalage horaire).
DATE

Comme vous le voyez, il y a le choix !

À l'heure actuelle, peu de navigateurs
gèrent ce type de champ à part Opera.
RECHERCHE
 On peut créer un champ de recherche
comme ceci :

Le navigateur décide ensuite comment afficher le

champ de recherche. Ainsi, il peut ajouter une petite
loupe au champ pour signifier que c'est un champ de
recherche et éventuellement mémoriser les dernières
recherches effectuées par le visiteur.
LES ÉLÉMENTS D’OPTIONS
 HTML vous offre une grande quantité
d'éléments d'options à utiliser dans votre
formulaire. Ce sont des éléments qui
demandent au visiteur de faire un choix
parmi une liste de possibilités.
 Nous allons passer en revue :
 les cases à cocher ;
 les zones d'options ;
 les listes déroulantes.
 LES CASES À COCHER
 Créer une case à cocher ? Rien de plus simple
! Nous allons réutiliser la balise <input />,
en spécifiant cette fois le type checkbox :

Rajoutez un <label> bien placé, et le tour est joué !

LES CASES À COCHER
RÉSULTAT
CASES À COCHER
 N'oubliez pas de donner un nom différent à
chaque case à cocher, cela vous permettra
d'identifier plus tard lesquelles ont été
cochées par le visiteur.
 Enfin, sachez que vous pouvez faire en sorte
qu'une case soit cochée par défaut avec
l'attribut checked :
LES ZONES D’OPTIONS
 Les zones d'options vous permettent de faire un
choix (et un seul) parmi une liste de possibilités.
Elles ressemblent un peu aux
 cases à cocher mais il y a une petite difficulté
supplémentaire : elles doivent être organisées en
groupes. Les options d'un même groupe possèdent
le même nom (name), mais chaque option doit
avoir une valeur (value) différente.
 La balise à utiliser est toujours un <input />, avec
cette fois la valeur radio pour l'attribut type.
 Les choses seront plus claires sur l'exemple ci-
dessous :
LES ZONES D’OPTIONS
RÉSULTAT
LES ZONES D’OPTIONS
 Pourquoi avoir mis le même nom pour
chaque option ? Tout simplement pour que le
navigateur sache de quel « groupe » le
bouton fait partie.
 Essayez d'enlever les attributs name, vous
verrez qu'il devient possible de sélectionner
tous les éléments d'options.
 Or, ce n'est pas ce que l'on veut, c'est pour
cela qu'on les « lie » entre eux en leur
donnant un nom identique.
LES ZONES D’OPTIONS
 Vous noterez que cette fois on a choisi un id
différent de name.
 En effet, les valeurs de name étant
identiques, on n'aurait pas pu différencier les
id (et vous savez bien qu'un id doit être
unique !).
 Voilà donc pourquoi on a choisi de donner à
l'id la même valeur que value.
LES ZONES D’OPTIONS
 Si vous avez deux zones d'options
différentes, il faut donner un name unique à
chaque groupe, comme ceci :
LES ZONES D’OPTIONS
LES ZONES D’OPTIONS
 L'attribut checked est, là aussi, disponible
pour sélectionner une valeur par défaut.
LES LISTES DÉROULANTES
 Les listes déroulantes sont un autre moyen
élégant de faire un choix parmi plusieurs
possibilités. Le fonctionnement est un peu
différent. On va utiliser la balise <select>
</select> qui indique le début et la fin de
la liste déroulante. On ajoute l'attribut
name à la balise pour donner un nom à la
liste.
LES LISTES DEROULANTES
 Puis, à l'intérieur du <select> </select>,
nous allons placer plusieurs balises
<option> </option> (une par choix
possible).
 On ajoute à chacune d'elles un attribut value
pour pouvoir identifier ce que le visiteur a
choisi.
 Voici un exemple d'utilisation :
LES LISTES DEROULANTES
RÉSULTAT
RÉSULTAT
 Si vous voulez qu'une option soit sélectionnée
par défaut, utilisez cette fois l'attribut
selected :
LISTES DEROULANTES
 Vous pouvez aussi grouper vos options avec la
balise <optgroup> </optgroup>. Dans notre
exemple, pourquoi ne pas séparer les pays
en fonction de leur continent ?
LISTES DEROULANTES
RÉSULTAT
 Il ne nous reste plus qu'à agrémenter notre
formulaire de quelques dernières
fonctionnalités (comme la validation), puis
nous pourrons ajouter le bouton d'envoi du
formulaire.
REGROUPER VOS CHAMPS
 Si votre formulaire grossit et comporte
beaucoup de champs, il peut être utile de les
regrouper au sein de plusieurs balises
<fieldset>. Chaque <fieldset> peut
contenir une légende avec la balise
<legend>. Regardez cet exemple :
REGROUPER VOS CHAMPS
REGROUPER VOS CHAMPS
RÉSULTAT À L’ECRAN
SÉLECTIONNER
AUTOMATIQUEMENT UN CHAMP
 Vous pouvez placer automatiquement le
curseur dans l'un des champs de votre
formulaire avec l'attribut autofocus.
 Dès que le visiteur chargera la page, le
curseur se placera dans ce champ.
 Par exemple, pour que le curseur soit par
défaut dans le champ prenom :
SÉLECTIONNER
AUTOMATIQUEMENT UN CHAMP
RENDRE UN CHAMP
OBLIGATOIRE
 Vous pouvez faire en sorte qu'un champ soit
obligatoire en lui donnant l'attribut
required.
RENDRE UN CHAMP
OBLIGATOIRE
 Le navigateur indiquera alors au visiteur, si
le champ est vide au moment de l'envoi, qu'il
doit impérativement être rempli.
 Les anciens navigateurs, qui ne reconnaissent
pas cet attribut, enverront le contenu du
formulaire sans vérification.
 Pour ces navigateurs, il sera nécessaire de
compléter les tests avec, par exemple, des
scripts JavaScript.
RENDRE UN CHAMP
OBLIGATOIRE
 On dispose de pseudo-formats en CSS pour
changer le style des éléments requis
(:required) et invalides (:invalid).
 N'oubliez pas non plus que vous disposez du
pseudo-format :focus pour changer
l'apparence d'un champ lorsque le curseur se
trouve à l'intérieur.
RENDRE UN CHAMP
OBLIGATOIRE
LE BOUTON D’ENVOI
 Il ne nous reste plus qu'à créer le bouton
d'envoi. Là encore, la balise <input /> vient
à notre secours. Elle existe en quatre
versions :
 type="submit" : le principal bouton d'envoi de
formulaire. C'est celui que vous utiliserez le
plus souvent. Le visiteur sera conduit à la
page indiquée dans l'attribut action du
formulaire.
 type="reset" : remise à zéro du formulaire.
LE BOUTON D’ENVOI
 type="image" : équivalent du bouton submit,
présenté cette fois sous forme d'image.
Rajoutez l'attribut src pour indiquer l'URL de
l'image.
 type="button" : bouton générique, qui n'aura
(par défaut) aucun effet. En général, ce
bouton est géré en JavaScript pour exécuter
des actions sur la page. Nous ne l'utiliserons
pas ici.
 On peut changer le texte affiché à l'intérieur
des boutons avec l'attribut value.
LE BOUTON D’ENVOI
 Pour créer un bouton d'envoi on écrira donc
par exemple :
LE BOUTON D’ENVOI
 Ce qui nous donne la figure suivante.
LE BOUTON D’ENVOI
 Lorsque vous cliquez sur le bouton « Envoyer
», le formulaire vous amène alors à la page
indiquée dans l'attribut action.
 Souvenez-vous, nous avions imaginé une page
fictive : traitement.php.
 Le problème, c'est que vous ne pouvez pas
créer cette page seulement en HTML. Il est
nécessaire d'apprendre un nouveau langage,
comme le PHP, pour pouvoir « récupérer »
les informations saisies et décider quoi en
faire.
LE BOUTON D’ENVOI
 Certains sites comme swisstools.net
proposent des services appelés « MailForm »
qui se chargent de vous envoyer un e-mail
lorsqu'un de vos visiteurs a rempli le
formulaire.
 Cela vous dispense d'apprendre un nouveau
langage mais ce n'est pas très pratique : vous
devrez soit payer, soit voir de la publicité…
et vous n'avez pas beaucoup de possibilités
de personnaliser le traitement des données.