Les formulaires

Les formulaires permettent de récolter des informations sur un utilisateur, d'effectuer une recherche dans une base de données ou encore de passer une commande sur Internet. Il s'agit donc d'un moyen pour interagir avec les internautes.

Les balises <form>

Un formulaire XHTML est placé à l'intérieur de balises <form>. La balise d'ouverture prend les attributs suivants :

  • action : nom du script auquel sera soumis le formulaire.
  • method : méthode HTTP, valant soit get soit post.

Exemple :

<form method="GET" action="cible.php"> (éléments du formulaire) </form>

En XHTML, il est interdit de mettre des champs de formulaire directement à l'intérieur de balises <form>.
Il faut d'abord les regrouper :

  • dans des paragraphes <p> si les champs de formulaires sont à l'intérieur de paragraphes de textes (rare).
  • dans des ensembles de champ <fieldset> pour regrouper des champs de formulaire de sémantique proche.
  • dans des divisions <div> sans contenu sémantique sinon.

On pourra alors donner une légende à l'ensemble de champs avec la balise <legend>.
Exemple :

<fieldset>
     <legend>Voyages</legend>
     <label for="lieu">Lieu</label>
     <input id="lieu" type="text" name="lieu" />
     <label for="date">Date</label>
     <input id="date" type="text" name="date" />
</fieldset>

 

Rôle de l'attribut name

 

Il s'agit du nom à l'aide duquel vous pourrez faire référence aux champs de votre formulaire avec PHP. Attention à donner des noms qui ont du sens, et à respecter leur unicité.

 

Les labels

 

Ces balises permettent d'indiquer un texte pour préciser le contenu à insérer dans votre élément de formulaire.

Afin de relier votre label et votre élément de formulaire, il faut utiliser les attributs for et id.

Exemple :

<label for="nom">Nom</label> <input id="nom" name="nom" type="text" />

 

Les zones de saisie

saisie

 

La balise <input> représente un champ de saisie. L'attribut type détermine le type (texte, mot de passe, liste, etc.) du champ. L'attribut name (nom du paramètre de la requête PHP) est obligatoire (sauf pour reset et submit) ; il permet de préciser au serveur à quel type de saisie on fait référence. Exemple :

<input type="text" name="Commentaire" />

! Afin d'indiquer à quoi correspond cette zone, vous utiliserez la balise <label> qui permet d'indiquer à l'utilisateur ce qu'il doit insérer dans la case. Attention à bien renseigner l'attribut for qui s'appliquera sur la balise contenant un attribut id identique. Exemple :

<label for="Nom_utilisateur">Nom :</label>
<input type="text" name="nom" id="nom_utilisateur" />

La valeur type="text" est utilisé pour la saisie d'un texte dont la taille est inférieure à une ligne.
L'attribut value permet de préciser la valeur par défaut qui sera apparente dans le formulaire. La taille maximale de la chaîne de caractères à saisir peut être spécifiée à l'aide de l'attribut maxlength. Exemple :

<input type="text" name="prenom" value="Sarra" maxlength="50" />

 

 

Taille de la zone de saisie

 

Si vous voulez préciser la largeur des éléments ainsi que le nombre maximal de caractères que l'on peut mettre dedans : utiliser les attributs size et maxlength.

Textarea

Si l'on veut permettre à l'utilisateur une saisie sur plusieurs lignes, on utilisera la balise <textarea>. texte

Le texte délimité par cette balise permet d'initialiser la valeur par défaut du champ. La balise fermante est obligatoire même si le champ est vide. Les attributs rows et cols permettent de spécifier la taille en lignes et colonnes de la fenêtre de saisie. Exemple :

<textarea name="php" cols="40" rows="5"> PHP (venant de l'acronyme récursif PHP: Hypertext Preprocessor), est un langage de scripts libre principalement utilisé pour être exécuté par un serveur HTTP, mais il peut fonctionner comme n'importe quel langage interprété de façon locale, en exécutant les programmes en ligne de commande. [source : Wikipedia]
</textarea>

 

 

Boutons de type radio

 

radio Les boutons de type radio permettent de choisir un élément parmi une liste de possibilités. La valeur retournée est obligatoirement précisée à l'aide de l'attribut value. L'attribut checked="checked" permet de fixer une valeur par défaut. Exemple :

<input type="radio" name="civilite" value="Madame" checked /> <input type="radio" name="civilite" value="Monsieur" />

 

 

Liste à cocher

 

cocher Les listes à cocher sont de type checkbox, et permettent de choisir plusieurs éléments parmi une liste de possibilités. Afin de gérer les choix multiples (possibilité de cocher plusieurs cases simultanément), la valeur de l'attribut name se termine obligatoirement par des crochets []. Exemple :

<label for="sport">Sport</label> <input type="checkbox" name="activites[]" value="sport" id="sport" /> <label for="musique">Musique</label> <input type="checkbox" name="activites[]" value="musique" id="musique" />

 

 

Menu déroulant

 

deroulant Un menu déroulant est obtenu en utilisant la balise <select>. L'attribut facultatif size permet de préciser le nombre de choix apparaissant sur la page Web. Par défaut, ce nombre est initialisé à 1. Les choix du menu sont indiqués à l'aide de la balise option :

  • L'attribut selected="selected" permet de spécifier le(s) choix par défaut.
  • L'attribut value permet de spécifier la valeur associée à chacun des choix.

Exemple :

<select name="age"> <option value="20">Moins de 20 ans</option> <option value="35" selected="selected">21 à 35 ans</option> <option value="50">36 à 50 ans</option> <option value="51">Plus de 51 ans</option> </select>

 

Réinitialiser le formulaire

 

reprise Pour placer un bouton qui permet de réinitialiser le formulaire, la balise <input> prend l'attribut type avec comme valeur reset. L'attribut value permet de spécifier le nom du bouton (apparaît sur la page XHTML). Exemple :

<input type="reset" value="Tout effacer" />

 

Soumettre le formulaire

 

valide De la même façon, pour obtenir un bouton qui permette de valider le formulaire, l'attribut type prend comme valeur "submit". Le formulaire va être traité par le script PHP spécifié dans la balise <form> (nous verrons en quoi consiste ce script dans le prochain cours). Exemple :

<input type="submit" value="Envoyer" />

 


 

Exercices

 

1. Créer une page XHTML :

  1. Insérer les balises indispensables à sa bonne formation.
  2. Insérer les balises des métadonnées correspondantes (vous pouvez reprendre les fichiers créés lors des cours précédents).
  3. Créer un formulaire qui permet de recueillir des informations pour constituer un CV : informations personnelles, compétences, attentes, langages maîtrisés, expérience professionnelle,...
  4. Valider sur le code sur le site du W3C

2. En parallèle, réfléchir à une structuration des données qui permettrait de les stocker.

3. Développer une feuille de style CSS pour mettre en forme votre formulaire :

  1. Définir un style pour le formulaire;
  2. Définir un style pour les éléments de type input
  3. Définir un style pour les boutons de validation
  4. Intégrer votre formulaire dans l'architecture de site conçue lors du cours précédent (bandeau, menu horizontal, corps, pied de page) sous l'onglet Formulaire.

 

Pour aller plus loin