Formation HTML

Les formulaires HTML

Les formulaires

Le nom de la balise est form.
Ils permettent de saisir des informations à envoyer au serveur.
Ces informations sont interprétées par un script précisé par action.
2 méthodes d'envoi sont possibles, précisées par l'attribut method :
- get informations transmises dans l'URL,
- post informations transmises dans l'entête HTTP.
Plusieurs zones form peuvent cohabiter sur une même page.
Les éléments de saisie seront situés à l'intérieur du formulaire,
on y trouve en général un ou plusieurs éléments de type submit.

Les formulaires

Exemple :

<form id="reservation"
    action="treat_reserv.pl" method="get">
...
...
</form>
<form id="identite"
    action="treat_in.pl" method="post">
...
...
</form>

Les formulaires : les zones de texte

la balise textarea permet de déclarer une zone de saisie de texte libre.
l'attribut col est obligatoire, il indique la largeur en caractères de la zone de saisie,
l'attribut row est obligatoire, il indique la hauteur en lignes de la zone de saisie,
l'attribut name sera utilisé pour indiquer le nom de l'information transmise,
le contenu de la balise servira de texte initial.

Exemple :

<textarea rows="10" cols="100"
    name="mon_texte">Entrez le texte</textarea>

le résultat de l'envoi du contenu ci-dessus serait :
?mon_texte=Entrez+le+texte

Les formulaires : les entrées

La balise input permet de déclarer une zone de saisie.
L'attribut type précise le type de saisie.
Saisie de type text :
- la saisie sera un champ textuel d'une seule ligne,
- l'attribut name indique le nom de l'information transmise.
exemple :
```
<input name="Nom" type="text"/>
```

Les formulaires : les entrées

Saisie de type submit :
- un bouton d'envoi sera présenté,
- l'attribut name indique le nom de l'information transmise,
- l'attribut value indique le contenu de l'information transmise.

exemple :

<input type="submit"
  name="envoyer" value="Valider"/>

Les formulaires : les entrées

Saisie de type radio :
- plusieurs champs sont présents dans le même formulaire
- ils sont liés par l'attribut name,
- ils ont des attributs value différents,
- un seul est sélectionné dans le groupe.

exemple :

<input name="chambre" type="radio" value="1"/>
<input name="chambre" type="radio" value="2"/>
<input name="chambre" type="radio" value="3"/>

Les formulaires : les entrées

Saisie de type checkbox :
- plusieurs champs sont souvent présents dans le même formulaire
- ils sont liés par l'attribut name,
- ils ont des attributs value différents,
- toutes les valeurs sélectionnées sont transmises.

exemple :

<input name="services" type="checkbox" value="A"/>
<input name="services" type="checkbox" value="B"/>
<input name="services" type="checkbox" value="C"/>

Les formulaires : les entrées

Envoi de paramètre caché type hidden :
- pour transmettre des valeurs qui seront renvoyées sans être modifiées,
- permet de transférer des informations de page en page.
Envoi de fichier au serveur type file :
- le navigateur propose une boite de dialogue pour choisir un fichier
- La longueur maximale du fichier peut être limité par le paramètre MAX_FILE_SIZE.

Exemple :

<input name="mon_fichier" type="file"/>
<input name="MAX_FILE_SIZE"
        type="hidden" value="1000000"/>

Les formulaires : les listes de sélection

La balise select permet de déclarer un menu à liste de sélection.
L'attribut multiple permet de sélectionner plusieurs éléments.
Une liste devra contenir des champs option,
l'attribut value des options indique la valeur à transmettre.

Exemple :

<select name="caracteristiques" multiple="multiple">
  <option value="1">chambre avec
        vue sur parking</option>
  <option value="2">chambre avec
        vue sur la mer</option>
  <option value="3">Sans préférence</option>
</select>

Les formulaires : structuration

fieldset permet de grouper des zones de saisie au sein d'un même formulaire
legend permet de donner un titre à un groupe de zones de saisie.
label permet de donner un titre attaché à une zone de saisie :
- des facilités de saisie seront apportées par son utilisation,
- l'attribut for indique l'identifiant de l'entrée visée.

Exemple :

<fieldset>
 <legend>vos informations personnelles</legend>
  <label for="nom">votre nom</label> <!-- lien par for --> 
  <input id="nom" name="Nom" type="text"/>
  <label>votre prénom   <!-- lien par la structure --> 
   <input name="Adresse" type="text"/>
  </label>
</fieldset>

Les formulaires : Exemple

<form id="reservation"
           action="treat_reserv.pl" method="get">
  <label>votre nom
    <input name="nom" type="text"/></label>
  <label>votre prénom
    <input name="prenom" type="text"/></label>
  <fieldset>
    <legend>type de chambre</legend>
    <label>1 place<input name="chambre"
           type="radio" value="1"/></label>
    <label>2 places<input name="chambre"
           type="radio" value="2"/></label>
    <input name="services" type="checkbox" value="A"/>
    <input name="services" type="checkbox" value="B"/>
    <select name="caracteristiques" multiple="multiple">
      <option value="1">chambre avec
    vue sur parking</option>
      <option value="2">chambre avec
    vue sur la mer</option>
      <option value="3">Sans préférence</option>
    </select>
  </fieldset>
  <textarea rows="10" cols="100" name="remarques">vos
                         remarques</textarea>
  <input type="submit" name="envoyer" value="Valider"/>
</form>