Les formulaires en HTML

1. Introduction

Un formulaire HTML est une partie d'une page web permettant à l'utilisateur de saisir des informations dans 2 cas :

• Envoyer ces informations au serveur pour obtenir un résultat particulier (exemple : saisie d'une chaîne de caractères dans un moteur de recherche) ;
• Saisir des informations exploitées par un programme javacript s'exécutant côté client.

Voici un exemple de formulaire correspondant au deuxième cas :

Voici un exemple plus complexe de formulaire html (sans code javascript associé):

2. Définir un formulaire

a. La balise form

Les formulaires sont définis grâce à une balise form. On associe à cette balise en général les attributs suivants :

• id : facultatif, permet d'associer un identifiant au formulaire afin de pouvoir y accéder plus facilement depuis javascript
• action : permet de préciser vers quelle page web envoyer les informations du formulaire lorsque l'utilisateur clique sur le bouton de validation du formulaire
• method : permet de préciser comment les paramètres saisis dans le formulaire vont être envoyés vers le serveur. Cet attribut peut prendre 2 valeurs : GET (les paramètres sont transmis dans l'URL) et POST (les paramètres sont transmis dans le corps de la requête HTTP)

b. Les boutons de soumission du formulaire et de remise à zéro des différentes zones de saisie

Dans un formulaire, on trouve en général un bouton pour soumettre le formulaire. Ce bouton est généré par le code suivant:

<input type="submit" value="texteDuBouton" id="identifiant"/>

On peut aussi rajouter un bouton permettant de vider tous les champs du formulaire grâce au code suivant :

<input type="reset" value="texteDuBouton" id="identifiant"/>

c. Quelques types de composants d'un formulaire

Sauf cas contraires :

• On utilise la balise <input> pour définir un composant
• Le type de composant est indiqué grâce à l'attribut type
• Un identifiant est associé au composant pour pouvoir l'exploiter depuis javascript ou css
• Un nom est associé au composant pour pouvoir récupérer les données saisies côté serveur
• Un attribut placeholder permet d'affiche en grisé un texte informatif sur l'information à saisir

Zone de saisie de texte

<input type="text" size="nbCaractères" id="identifiant" name="nom" placeholder="texteDAide"/>

Zone de saisie de mot de passe

<input type="password" size="nbCaractères" id="identifiant" name="nom" placeholder="texteDAide"/>

Zone de saisie de nombre

<input type="number" id="identifiant" name="nom" placeholder="texteDAide"/>

Zone de saisie de date

<input type="date" id="identifiant" name="nom" />

Case à cocher

<input type="checkbox" id="identifiant" name="nom" />

Bouton radio

<input type="radio" id="identifiant" name="nom" />

Attention : veillez à mettre le même nom aux boutons radio fonctionnant ensemble

Liste d'options

<select" id="identifiant">
    <option value="valeurRenvoyée1">Texte affiché1</option>
    <option value="valeurRenvoyée2" selected="true">Texte affiché2</option>
    <option value="valeurRenvoyée3">Texte affiché3</option>
</select">