Les formulaires en HTML

Dans le premier cours, dans le passage sur les bases du langage HTML (http://pagesperso.laposte.net/docdynn/cours/(1)/html-form/index.html), sont résumées les différentes balises utiles pour définir des formulaires en HTML.

Un même document peut contenir plusieurs formulaires, et donc plusieurs balises <form>.

L'objectif de ce cours est de vous faire manipuler la notion de formulaire et ressentir la transmission des paramètres.

Les variables d'environnement concernées par les transferts des paramètres des formulaires sont des tableaux de valeurs, associant des noms de champs avec des valeurs.

Pour la méthode POST, ce tableau est appelé : HTTP_POST_VARS, et pour la méthode GET : HTTP_GET_VARS.

De plus la méthode GET remplit ce tableau avec les valeurs attachées à l'URL, en ajoutant à la fin du texte décrivant le chemin un "?" suivi d'autant d'identifiants de variables, du caractère "=", et de valeur à affecter aux variables que nécessaire. Pour séparer deux variables, on utilise le caractère "&".

Exemple de passage des variables "GET" dans une URL:

http://www.google.fr/search?hl=fr&ie=UTF-8&q=php+tutorial&meta=cr%3DcountryFR

A l'intérieur du formulaire, les balises utilisées pour définir les différents contrôles sont <input>, <select>, ... Ils portent tous l'attribut "name" qui est en fait le nom de la variable associée au champ, de façon à identifier la variable
exemple  
<form NAME="monformulaire"
	ACTION="reponse.html" METHOD="post">
déclaration de début du formulaire
<input TYPE="texte" NAME="identifiant" SIZE="8">
des champs de saisie textuels
<input TYPE="password" NAME="secret" SIZE="8">
des champs de saisie pour un mot de passe : la valeur sera transmise cryptée
<input NAME="lance" TYPE="button" VALUE="OK">
bouton de soumission du formulaire (envoi)
<input TYPE="reset" VALUE="effacer">
reprend les valeurs par défaut de différents champs du formulaire
<select NAME="plats">
<option VALUE="entrée" SELECTED>
	choisissez une entrée
<option VALUE="soupe">soupe
<option VALUE="quiche">quiche
<option VALUE="crudités">crudités
</select>
choix d'un item dans un menu surgissant
<input TYPE="chechbox"
       NAME="option1" VALUE="clim"> clim
<br /><input TYPE="chechbox"
       NAME="option2" VALUE="abs"> ABS
<br /><input TYPE="chechbox"
       NAME="option3" VALUE="toit"> toit ouvrant
clim
ABS
toit ouvrant
choix d'un ou plusieurs items en cochant des cases
<table>
 <tr>
  <th>essence </th>
  <th>diesel </th>
  <th>gpl </th>
 </tr><tr>
  <td ALIGN="center" VALIGN="middle">
   <input TYPE="radio" CHECKED NAME="carburation"
       VALUE="essence" ONCLICK="carbu.value='essence'">
  </td><td ALIGN="center" VALIGN="middle">
   <input TYPE="radio" NAME="carburation"
       VALUE="diesel" ONCLICK="carbu.value='diesel'">
  </td><td ALIGN="center" VALIGN="middle">
   <input TYPE="radio" NAME="carburation"
       VALUE="gpl" ONCLICK="carbu.value='gpl'">
  </td>
 </tr>
</table>
<br><input TYPE="text" 
	NAME="carbu" SIZE="10">
essence diesel gpl

choix d'un items parmi plusieurs en sélectionnant un bouton ou en saisissant un texte
<textarea COLS="20" ROWS="6" NAME="plat">
des champs de saisie textuels sur plusieurs lignes (la touche d'entrée ne provoque pas de chamgement de champ de saisie courant)
</form>
déclaration de fin du formulaire

Un exemple incluant une grande diversité de contrôles :

Pour voir cet exemple : cliquer sur ce lien et demander à voir le code source par votre navigateur

Liste des balises

balises
http://www.laurent-bernat.com