Les formulaires sont un élément clé du langage, introduit pour permettre au utilisateur de saisir des informations, de les valider et de les envoyer au serveur.

Le formulaire est contenu dans un élément form. On y retrouve les différents champs parfois regroupés entre eux ainsi que les éventuelles légendes.

Attributs de form

action

Adresse pour l'envoi des données du formulaire

method

Méthode pour l'envoi des données du formulaire

Les valeurs possibles sont get et post

name

Nom du formulaire.

enctype

Type MIME pour l'envoi des données.

Les valeurs possibles sont text/plain, application/x-www-form-urlencoded et multipart/form-data.

L'attributmethod contrôle la manière dont les données sont transmises. Les valeurs possibles sont :

get

Cette méthode ajoute le contenu du formulaire à l'URL sous forme clé/valeur

Méthode utile pour l'utilisation de formulaire compatibles avec les favoris

Limite du volume de données dans l'URL (en fonction du navigateur), donc risque de perte de données

Ne jamais utiliser pour les information sensibles

post

Données transférées en transaction HTTP

Favoris impossibles pour les formulaires

Plus sécurisé et robuste que get

Autres éléments

fieldset

Permet de regrouper plusieurs éléments du formulaire entre eux. Le navigateur peut avoir une représentation graphique spécifique.

legend

Titre ou légende pour un élément fieldset

label

Associe un texte à un élément du formulaire grâce à l'attibut id.

<label for="prenom">Saisissez votre prénom</label>
<input id="prenom" type="text" name="prenom">

Champs

Les types de champs utilisables sont nombreux. Nous allons avoir voi quelques uns.

input

L'élément input propose plusieurs apparence et plusieurs comportements en fcontion de la valeur de l'attribut type.

Associées à d'autres attributs, elles déterminent le fonctionnement du champs. Ainsi, l'attribut value contient la valeur du champs transmis à la validation du formulaire. L'attribut name représente le nom afin d'associer le champ à sa valeur lors des opérations côté serveur. On obtient ainsi un champ texte avec :

<input type="text" name="prenom">
			

On peut indiquer une valeur par défaut en spécifiant explicitement la valeur de l'attibut value :

<input type="text" name="prenom" value="Leto">
			

Voici quelques valeurs possibles pour l'attribut type.

text

Champ de texte

password

Champ de saise d'un mot de passe. Visuellement, le contenu est remplacé par un caractère générique.

tel

Numéro de téléphone

url

URL absolue

email

Adresse email

search

Champ de recherche

hidden

Champ caché. Attention, il est caché en présentation mais est présent dans le code source. Il peut être éditable par exemple par des extensions de développement web du navigateur.

radio

Bouton radio. Si plusieurs boutons radios portent le même attribut name, seul un peut être sélectionné.

Attribut spécifique checked qui permet d'indiquer un état coché par défaut.

checkbox

Cases à cocher. Plusieurs cases portant le même attribut name peuvent être sélectionnées.

Attribut spécifique checked qui permet d'indiquer un état coché par défaut.

reset

Bouton de réinitialisation du formulaire à son état inital

submit

Valide le formulaire et envoi le contenu à l'adresse précisée dans l'attribut action du formulaire

file

Sélection de fichier local.

Attribut spécifique accept qui permet d'indiquer les types MIME acceptés par le serveur

Attribut spécifique multiple qui permet d'indiquer si plusieurs fichiers peuvent être envoyés, spéarés par des virgules

date, time, datetime, month et week

Permet de saisir des données calendaires avec respectivement une date, une heure, une heure datée, un mois et une semaine dans une année. L'affichage dépend naturellement du navigateur.

Attribut spécifique min qui permet d'indiquer la valeur minimale acceptée

Attribut spécifique max qui permet d'indiquer la valeur maximale acceptée

Attribut spécifique step qui permet d'indiquer le pas de la sélection

number

Saisie de valeur numérique.

Attribut spécifique min qui permet d'indiquer la valeur minimale acceptée

Attribut spécifique max qui permet d'indiquer la valeur maximale acceptée

Attribut spécifique step qui permet d'indiquer le pas de la sélection

Autres éléments

textarea

Permet une saisie multiligne de données textuelles.

Attribut name nom de la paire clé/valeur

Attribut cols nombre de colonnes de texte affichées

Attribut step nombre de lignes de texte affichées

select

Liste de choix.

Chacun des éléments de la liste est une balise option

Attribut name nom de la paire clé/valeur

Attribut multiple qui indique si plusieurs valeurs sont possibles

Pour les éléments option, les attributs sont les suivants :

selected

Indique si l'option est pré selectionnée

label

Intitulé à présenter à l'utilisateur

value

Valeur de l'option

Exemple

Exemple de formulaire

Validation

Attention, il est nécessaire de vérifier le contenu de ces champs côté serveur. Il ne faut jamais faire confiance au client, son comportement pouvant être changé ou les requêtes forgées manuellement.

Exercice

Reproduisez le formulaire. La validation du formulaire doit envoyer un mail avec le contenu des champs du formulaire.
Par exemple :

full_name=John Doe
day=20
month=02
year=1967
genre=none
hobbies=water_poney
picture=toto.txt
qui=mot_de_passe!
description=Quand j'étais petit ...

			

Corrigé

Le corrigé est le code source même de la page à reproduire.