Cours HTML

Les formulaires 3/3

Il existe plusieurs moyens lorsque l'on rempli un formulaire pour proposer des options :

• les cases à cocher
• les zones d'options
• les listes déroulantes

Les éléments d'options

La case à cocher

Pour rédiger une case à cocher, on emploie la balise input avec l'attribt type="checkbox". La case à cocher admet deux états: checked (coché) et unchecked (non coché). On peut précocher une case avec l'attribut checked="checked". Voici la manière de rédiger :

 
<form>
<p>Cocher vos destinations de rêve:<br>
<label for="plage"> La plage n'importe où</label>
           <input type="checkbox" name="plage">
            <br><label for="bretagne"> La Bretagne</label>
           <input type="checkbox" name="bretagne">
            <br><label for="USA"> Les États-Unis</label>
           <input type="checkbox" name="USA">
           <br><label for="Asia"> L'Asie</label>
           <input type="checkbox" name="Asia"></p>
</form>

Et le résultat :

Les zones d'options

Dans les zones d'options le visteur ne pourra faire qu'un seul choix parmi plusieurs proposés. Attention, l'ensemble des boutons radios devant porter le même attribut name.La paire nom/valeur du bouton radio sélectionné sera envoyé au CGI. Un attribut checked placé sur un des boutons permet de préciser le bouton sélectionné par défaut. Pour rédiger

 
<form>
<p>Quelle est votre tranche d'âge:<br>
           <input type="radio" name="age" value="18-30">
            <label for="18"> 18 - 30 ans</label><br>
           <input type="radio" name="age" value="30-45">
            <label for="30"> 30 - 45 ans</label><br>
           <input type="radio" name="age" value="46-60">
           <label for="50"> 46 - 60 ans</label><br>
           <input type="radio" name="age" value="+ 60">
           <label for="70"> Plus de 60 ans</label>
           </p>
</form>

Et le résultat :

Les listes déroulantes

La balise <select><option>...</option></select> permet de créer une liste déroulante présentant plusieurs choix. Les options sont caractérisées par un texte et une valeur (attribut value). Les attributs de cette balise sont :

• name : c'est le nom associé au champ qui permettra d'identifier le champ dans la paire nom/valeur
• size : représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le nombre d'éléments effectifs dans la liste)
• multiple : marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste

Voici un exemple de liste déroulante :

<form>
  <select name="D2" size="1">
  <option selected="selected">Choix 1</option>
  <option>Choix 2</option>
  <option>Choix 3</option>
  <option>Choix 4</option>
  </select>
  </form>

Voici un autre exmple avec l'attribut multiple :

<form>
  <select name="select" multiple="multiple" size="4">
  <option>Choix 1</option>
  <option>Choix 2</option>
  <option>Choix 3</option>
  <option>Choix 4</option>
  </select>
  </form>

Pour présélectionner une option, on emploie l'attribut : selected="seleceted" :

<form>
  <select name="D3" multiple="multiple" size="3">
  <option selected="selected">Choix 1</option>
  <option>Choix 2</option>
  <option>Choix 3</option>
  <option selected="selected">Choix 4</option>
  </select>
  </form>

Finaliser son formulaire

Une fois le formulaire rédigé , voici les derniers éléments à ajouter :

Rendre un champ obligatoire

Pour que le visiteur remplisse un champ obligatoirement, on emploie un même attribut :

• required : sans ajouter de valeur

 <form> <label for="nom">Votre nom :</label><input type="text" name="nom" required /></form>

Pour rendre cette obligation visible, on emploie les feuilles de style :

    :required {
     border: 1px solid red;
}

Les boutons d'envoi

• Le premier bouton input type="submit": doit être inséré en fin de formulaire, et ce une seule fois. C'est le bouton de soumission qui permet l'envoi du formulaire. Le texte du bouton peut être précisé grâce à l'attribut value.

<form><input type="reset" value="Envoyer" /></form>

Comme la valeur de l'attribut value est envoyer, c'est ce mot qui apparaît dans le bouton :

• Le deuxième bouton input type="reset": doit être inséré en fin de formulaire, ce bouton permet remise à zéro; il rétablit l'ensemble des éléments du formulaire à leurs valeurs par défaut. Le texte du bouton peut être précisé grâce à l'attribut value.

<form><input type="submit" value="Rétablir" /></form>

Comme la valeur de l'attribut value est rétablir, c'est ce mot qui apparaît dans le bouton :

• Le troisième bouton input type="hidden": est un champ caché. Ce champ non visible sur le formulaire permet de préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur.
• Le quatrième bouton est le input type="image": il s'agit d'un bouton de soumission personnalisé, dont l'apparence est l'image situé à l'emplacement précisé par son attribut src

Envoi des données

Lorsqu'un formulaire est soumis, les données présentes dans le formulaire sont envoyées au script CGI sous forme de paires nom/valeur, c'est-à-dire un ensemble de données représentées par le nom de l'élément de formulaire, le caractère "=", puis la valeur associée. L'ensemble de ces paires nom/valeur étant séparées entre elles par des esperluettes (caractère &). Les données envoyées ressembleront donc à ceci :

champ1=valeur1&champ2=valeur2&champ3=valeur3

Dans le cas de la méthode GET (envoi des données à travers l'URL), l'URL ressemblera à une chaîne du genre :

http://url/cgi-bin/script.cgi?champ1=val1&champ2=val2