Conception & Réalisation de sites Web

Les formulaires

Permettre au visiteur de saisir des informations

Un formulaire HTML ou XHTML permet de saisir et de transmettre des informations. Un formulaire est déclaré grâce à la balise <form> dont on précisera généralement 3 attributs :

  • name, le nom que l'on souhaite donner au formulaire
  • action, le chemin vers la page ou les données du formulaire seront envoyées. Généralement, il s'agira d'une page dite "dynamique" (en .php ou .asp par exemple), c'est à dire une page qui peut interagir avec le serveur pour sauvegarder les données dans une base, les envoyer par mail, ou réaliser tout autre traitement.
  • method, la méthode d'envoi des données qui est soit "POST", soit "GET" (voir plus bas)

Exemple d'ouverture et fermeture d'un formulaire

<form name="mon-formulaire1" action="page-envoi.html" method="get">
...
</form>

Méthode GET ou POST ?

Un formulaire peut envoyer les informations d'une page à une autre de deux manières différentes :

  • En GET, les données du formulaire seront transmises via l'URL de la page. On verra alors des variables s'ajouter à la fin de l'URL dans la barre d'adresse.
  • En POST, les données du formulaire seront transmises via l'entête de la page WEB. Les variables seront alors invisibles pour l'utilisateur.

Si j'envoie avec mon formulaire une variable nom qui serait égale à Gandhi sur la page page-envoi.html avec la méthode GET :

http://www.example.com/page-envoi.html?nom=Gandhi

Si j'envoie avec mon formulaire une variable nom qui serait égale à Gandhi sur la page page-envoi.html avec la méthode POST, l'URL n'est pas modifiée :

http://www.example.com/page-envoi.html

Les différents champs de saisie avec <input />

On va ensuite insérer différents types de champs de saisies entre les balises <form> et </form>.

Pour un champs texte simple

Nous allons utiliser la balise <input /> en précisant l'attribut type="text".
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut value permet de spécifier une valeur par défaut, c'est à dire que le champs sera affiché pré-rempli.

Exemple :

Veuillez saisir votre prénom :<br />
<input type="text" name="prenom" value="" />

Ce qui donne dans le navigateur :

Veuillez saisir votre prénom :

Pour un champs de mot de passe

Un champs de mot de passe se comporte comme un champs texte simple à la différence que les caractères qu'on y saisi sont masqués.

Nous allons utiliser la balise <input /> en précisant l'attribut type="password".
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut value permet de spécifier une valeur par défaut, c'est à dire que le champs sera affiché prérempli.

Exemple :

Votre mot de passe :<br />
<input type="password" name="motdepasse" value="blabla" />

Votre mot de passe :

Veuillez saisir votre prénom :

Pour une case à cocher

Nous allons utiliser la balise <input /> en précisant l'attribut type="checkbox".
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut value permet de spécifier la valeur qui sera envoyée si la case est cochée

Exemple :

Quel type de prestation recherchez vous ?<br />
<input type="checkbox" name="interet" value="loc" /> Location de mobilier
<input type="checkbox" name="interet" value="achat" /> Achat de mobilier

Ce qui donne dans le navigateur :

Quel type de prestation recherchez vous ?
Location de mobilier Achat de mobilier

Nous pouvons afficher une case pré-cochée en précisant l'attribut checked="checked" :

<input type="checkbox" name="conditions" value="ok" checked="checked" /> J'accepte les conditions.

Ce qui donne dans le navigateur :

J'accepte les conditions.

Pour un bouton d'option ou «bouton radio»

Nous allons utiliser la balise <input /> en précisant l'attribut type="radio".
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut value permet de spécifier la valeur qui sera envoyée si l'option est sélectionnée

Les boutons radio se distingue des cases à cocher :

  • Visuellement, par leur forme ronde
  • Ergonomiquement, par une différence de comportement. Les boutons radios n'autorisent qu'un seul choix là ou les checkbox permettent de cocher plusieurs cases.

Exemple :

Civilité :<br />
<input type="radio" name="civi" value="Mme" /> Madame
<input type="radio" name="civi" value="Mlle" /> Mademoiselle
<input type="radio" name="civi" value="Mr" /> Monsieur

Ce qui donne dans le navigateur :

Civilité :
Madame Mademoiselle Monsieur

Nous pouvons afficher un bouton radio pré-coché en précisant l'attribut checked="checked" :

Civilité :<br />
<input type="radio" name="civi2" value="Mme" /> Madame
<input type="radio" name="civi2" value="Mlle" /> Mademoiselle
<input type="radio" name="civi2" value="Mr" checked="checked" /> Monsieur

Ce qui donne dans le navigateur :

Civilité :
Madame Mademoiselle Monsieur

Pour un bouton d'envoi

Nous allons utiliser la balise <input /> en précisant l'attribut type="submit".
L'attribut value permet de spécifier le texte qui sera affiché sur le boutton.

Lors du clique sur ce bouton, les données du formulaires seront envoyées à la page précisée par l'attribut action du formulaire.

Exemple :

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

Ce qui donne dans le navigateur :

Pour un bouton d'annulation ou «reset»

Nous allons utiliser la balise <input /> en précisant l'attribut type="reset".
L'attribut value permet de spécifier le texte qui sera affiché sur le boutton.

Lors du clique sur ce bouton, les données saisies par l'utilisateur seront effacées.

Exemple :

<input type="reset" value="Annuler" />

Ce qui donne dans le navigateur :

Pour un bouton simple

Nous allons utiliser la balise <input /> en précisant l'attribut type="button".
L'attribut value permet de spécifier le texte qui sera affiché sur le boutton.

Lors du clique sur ce bouton, aucune action ne sera effectuée. On verra ultérieurement que l'on pourra lui attribuer une action avec une commande javascript.

Exemple :

<input type="button" value="Mon bouton" />

Ce qui donne dans le navigateur :

D'autres champs de saisie

Nous avons vu ci dessus que la plupart de champs de formulaire s'écrivent avec la balise <input />.
Cependant, certains champs de saisie utilisent des balises spécifiques.

Pour un champs texte sur plusieurs lignes ou «zone de texte»

Nous allons utiliser les balises <textarea> et </textarea> .
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
L'attribut rows permet de préciser le nombre de lignes de la zone de texte. Plus le chiffre sera grand, plus notre textarea sera long.
L'attribut cols permet de préciser le nombre de caractère par ligne de la zone de texte. Plus le chiffre sera grand, plus notre textarea sera large.
Le texte placé entre les balises <textarea> et </textarea> permet de spécifier une valeur par défaut, c'est à dire que le champs sera affiché prérempli.

Exemple :

Votre message :<br />
<textarea name="le-message" rows="6" cols="40">Vous pouvez saisir ici un message.</textarea>

Ce qui donne dans le navigateur une zone de texte de 6 lignes de 40 caractères :

Votre message :

Pour un champs de sélection

Les champs select permettent de proposer une liste déroulante de choix.

Nous allons utiliser les balises <select> et </select> .
L'attribut name permet de spécifier le nom de la variable qui sera envoyé.

Exemple :

Vous êtes :<br />
<select name="profil">
...
</select>

Entre ces balises <select> et </select>, nous allons placer autant de couple <option> et </option> que nous avons de choix.

Pour chaque balise <option>, nous précisons le nom de la variable qui sera envoyé avec l'attribut value. Nous précisons également le texte qui sera affiché pour l'utilisateur en le plaçant entre les balises <option> et </option>.

Exemple :

Vous êtes :<br />
<select name="profil">
   <option value="parti">Un particulier</option>
   <option value="profe">Un professionnel</option>
   <option value="insti">Un institutionnel</option>
</select>

Ce qui donne dans le navigateur une champs de sélection avec 3 choix :

Vous êtes :

Nous pouvons afficher le champs select avec une option pré-sélectionnée selected="selected" :

<select name="profil">
   <option value="parti">Un particulier</option>
   <option value="profe" selected="selected">Un professionnel</option>
   <option value="insti">Un institutionnel</option>
</select>

Ce qui donne dans le navigateur :

Un exemple complet

<form name="mon-formulaire1" action="page-envoi.html" method="get">
<p>
   <input type="radio" name="civi" value="Mme" /> Madame
   <input type="radio" name="civi" value="Mlle" /> Mademoiselle
   <input type="radio" name="civi" value="Mr" /> Monsieur
</p>
<p>
   Votre prénom :<br />
   <input type="text" name="prenom" value="" />
</p>
<p>
   Votre nom :<br />
   <input type="text" name="nom" value="" />
</p>
<p>
   Votre mot de passe :<br />
   <input type="password" name="passe" value="" />
</p>
<p>
   Vous êtes<br />
   <select name="profil">
      <option value="parti">Un particulier</option>
      <option value="profe" selected="selected">Un professionnel</option>
      <option value="insti">Un institutionnel</option>
   </select>
</p>
<p>
   Quel type de prestation recherchez vous ?<br />
   <input type="checkbox" name="interet" value="loc" /> Location de mobilier
   <input type="checkbox" name="interet" value="achat" /> Achat de mobilier
</p>
<p>
   Votre message :<br />
   <textarea name="le-message" rows="6" cols="40">Vous pouvez saisir ici un message.</textarea>
</p>
<p>
   <input type="submit" value="Envoyer" />
   <input type="reset" value="Annuler" />
</p>
</form>

Ce qui donne dans le navigateur :

Madame Mademoiselle Monsieur

Votre prénom :

Votre nom :

Votre mot de passe :

Vous êtes

Quel type de prestation recherchez vous ?
Location de mobilier Achat de mobilier

Votre message :

Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!