|

Formulaires (page3) : Exercice HTML

Donnée de l'exercice

Réaliser le formulaire ci-dessous :

• Pour mettre en page les différents éléments du formulaire (alignement des champs...), on utilise en général l'une des deux techniques suivantes :
  • définition de tous les champs dans bloc <PRE> ... </PRE> (où les <espace>, <cr>... sont significatifs)
  • définition de tous les champs dans un tableau (dont on peut rendre les bordures invisibles)
  La seconde technique, utilisée ci-dessous, permet une mise en page plus sophistiquée
• Le texte en petits caractères rouges est indicatif
• Test : si vous désirez voir la forme que prend la chaîne de caractère "URL-encodée" (contenant les variables du formulaire) que le script envoie au serveur lorsque l'on presse le bouton d'envoi, vous pouvez commencer votre formulaire par la balise <FORM METHOD="GET" ACTION="nom_de_votre_page.html">

Corrigé de l'exercice

<form method="get" action="nom_de_votre_page.html">
<fieldset style="background-color: white">
<legend>Exercice sur les Formulaires</legend>
<table width="100%" align="center" border="1">
<tr>
  <td style="width: 20%"><strong>Civilité</strong></td>
  <td>
   <input type="radio" name="civilite" value="Monsieur" checked="checked"/>Monsieur
   <input type="radio" name="civilite" value="Madame"/>Madame
   <input type="radio" name="civilite" value="Mademoiselle"/>Mademoiselle</td>
</tr>
<tr>
  <td><strong>Nom / Prénom</strong></td>
  <td><input type="text" name="nom" size="50" maxlength="80"/></td>
</tr>
<tr>
  <td><strong>Adresse</strong></td>
  <td>
   <textarea name="adresse" cols="50" rows="2">
   Rue No Boîte postale
   </textarea></td> 
</tr>
<tr>
  <td><strong>No postal / Localité</strong></td>
  <td>
   <input type="text" name="no_postal" size="5" maxlength="4"/>
   <input type="text" name="localite" size="20" maxlength="80" value="Paris"/></td>
</tr>
<tr>
  <td><strong>Pays</strong></td>
  <td>
   <select name="pays">
     <option selected="selected">France</option>
     <option>Italie</option>
     <option>Suisse</option>
   </select></td>
</tr>
<tr>
  <td><strong>Plateforme(s)</strong></td>
  <td>
   <input type="checkbox" name="materiel" value="Windows" checked="checked"/>Windows
   <input type="checkbox" name="materiel" value="Mac" checked="checked"/>Macintosh
   <input type="checkbox" name="materiel" value="Unix"/>Unix</td>
</tr>
<tr>
  <td><strong>Applications(s)</strong></td>
  <td>
   <select name="applications" size="5" multiple="multiple">
     <option selected="selected">Bureautique</option>
     <option>DAO</option>
     <option>Statistiques</option>
     <option>SGBD</option>
     <option selected="selected">Internet</option>
   </select></td>
</tr>
<tr>
  <td style="text-align: right">
  <input type="reset" value="Effacer"/>
  <input type="submit" value="Soumettre formulaire"/></td>
</tr>
</table>
</fieldset>
</form>

|