Les formulaires

Les formulaires

Les formulaires sont des éléments utilisés principalement pour des sites conçus avec
des technologies dynamiques (tel que le PHP).

La première balise est la balise <form> </form>. C'est une balise de
type block qui admet plusieurs attributs obligatoires (ou presque).

• id : nous verrons plus en détail cet attribut prochainement. On donne un identifiant unique à un élément HTML, il ne doit pas contenir d'espaces et doit commencer par une
  lettre ou un "_" (underscore).


• action : définit l'adresse du fichier (ou script) auquel le formulaire envoie les données.
  


• method : cet attribut admet uniquement deux valeurs post et get. Ce sont les deux méthodes d'envoi des données. La méthode get enverra les valeurs par l'url (exemple : action.php?nom=martin&prenom=simon), cette métode est la moins sécurisée.
  
  La métode post, est beaucoup plus sécurisée puisqu'elle envoie
  les variables de manière transparente et invisible.


• enctype : cet attribut n'est pas obligatoire, et il fonctionne uniquement quand la méthode est post, il admet trois valeurs text/plain, application/x-www-form-urlencoded et multipart/form-data.
  Par défaut, le type est text/plain. Cet attribut n'est pas à préciser si vous n'utilisez pas de format particulier.
  La seconde balise à connaître est la balise <fieldset> </fieldset>.
  
  Cette balise contient un ou plusieurs champs du formulaire. On lui associe la balise <legend> </lengend>, qui contiendra la légende des champs contenus dans fieldset.
  Note : vous pouvez simplement utiliser une balise <div> à la place du fieldset, mais le résultat sera différent, et l'utilisation de la balise legend sera interdite.
  
  Retenez également qu'il est interdit par la norme XHTML de mettre directement les champs après la balise form, puisque ce n'est pas son but.

Préparons un formulaire servant à répondre à un sondage :

    1  <form id="sondage" action="sondage.php" method="post">
    2    <fieldset><legend>Votre nom :</legend>
    3      <!-- champ nom -->
    4    </fieldset>
    5    <fieldset><legend>Votre pr&eacute;nom :</legend>
    6      <!-- champ prenom -->
    7    </fieldset>
    8    <fieldset><legend>Votre adresse email :</legend>
    9      <!-- champ email -->
   10    </fieldset>
   11    <fieldset><legend>Question :</legend>
   12      Intitul&eacute; question :<br />
   13      <!-- champs reponse -->
   14    </fieldset>
   15  </form>

Ce premier essai est volontairement incomplet, nous allons le compléter au fur et à mesure.

La balise suivante est la plus importante du formulaire : c'est la balise qui correspond au champ : <input />.

Elle admet plusieurs attributs aussi, dont l'un est essentiel : l'attribut type.

Vous pouvez voir la liste des champs sur la page d'exemple.

En regardant cet exemple, vous avez remarqué que le champ de type hidden
(qui signifie caché) ne se voyait pas.
Il sert é transmettre des valeurs que l'utilisateur ne voit pas et donc, par conséquent, ne peut pas modifier.

Note : evitez de mettre des informations à risque comme un mot de passe dans ce champ,
car sa valeur sera visible en affichant la source de la page.

Tous ces champs doivent avoir une autre série d'attributs essentiels pour faire
fonctionner le formulaire :

• name : il sert à indiquer le nom du champ. Généralement, dans le script qui traitera le
  formulaire, c'est ce nom qui servira à appeller le contenu du champ.
  


• id : cet attribut n'est pas obligatoire, mais est bien utile, non seulement pour la mise en forme (voir chapitre n°3) mais aussi pour effectuer des tests sur ce champ en javascript. Par commodité name et id : ont souvent une valeur assez semblable.


• value : Cet attribut peut rester vide, mais est indispensable. Il sert à indiquer la valeur par défaut du champ. (Sur notre page d'exemple, la valeur par déefaut du premier champ texte est "Champ de type text")


• maxlength : cet attribut n'est pas obligatoire, mais il permet de définir la limite de caractères qui peuvent être saisis (pour un champ de type text ou password).
  


• disabled="disabled" :
  Cet attribut n'admet aucune autre valeur que "disabled", en raison de la norme
  de syntaxe XML. Il permet de griser le champ et d'en interdire sa modification.


• readonly="readonly" :
  Cet attribut est assez semblable à disabled. à l'exception qu'il
  ne grise que la case (pas le texte).


• checked="checked" : même restriction de sa valeur que pour disabled. Utilisable uniquement pour les champs de type checkbox et radio, quand cet attribut est précisé, la case est déjà cochée au chargement de la page.
  

Il existe encore deux types de champs, mais qui ne fonctionnent pas avec la balise input.

Le premier est <textarea><textarea>, cette balise admet aussi l'attribut
name, mais pas value. Le contenu par défaut de la case est placé entre les deux balises.

Cette dernière fonctionne de la même manière qu'un champ de type text, mais il fonctionne sur plusieures lignes de texte.

Il admet encore deux attributs obligatoires :

• cols : qui correspond au nombre de lettres par lignes


• rows : qui correspond au nombre de lignes du champ

Le dernier attribut que nous allons voir est plus complexe, mais pas plus difficile
à utiliser, c'est l'attribut <select> </select> qui permet de créer des listes déroulantes.

Un simple attribut modifie le comportement de cette balise. c'est l'attribut multiple="multiple".
En l'activant la liste permet de selectionner plusieurs options en même temps. Et l'affichage est
aussi différent (voir la page d'exemple).

Pour indiquer les valeurs que ce champ admet, on utilise la balise enfant <option> </option>. On indique sa valeur avec l'attribut value et on peu le sélectionner par défaut
avec selected="selected".

    1  <select name="equipement" [multiple="multiple"]>
    2    <option value="television">
    3      T&eacute;l&eacute;vision
    4    </option>
    5    <option value="telephone">
    6      T&eacute;l&eacute;phone
    7    </option>
    8    <option value="ordinateur">
    9      Ordinateur
   10    </option>
   11  </select>

> retour au sommaire

> voir la suite