Programmation en HTML

Les formulaires

Jusqu'à présent nous avons vu les différents moyens de diffuser de l'information et de la présenter. Mais sur le Web, l'information ne circule pas qu'en sens unique.

Il est possible de faire circuler l'information dans les deux sens et de recolter diverses données et requêtes, en offrant la possibilité à l'utilisateur de renseigner des formulaires de saisie.

Les applications sont très variées : sondage, réserver une chambre ou un billet de train, louer une voiture, faire une recherche à partir d'une base de données, etc...

Tous les éléments d'un formulaire HTML doivent obligatoirement être encadrés par les marqueurs <form> et </form>.

Les zones de saisie

 Grâce à la commande <input>, il est possible de créer des formulaires. Deux attributs sont toujours associés à ce marqueur :

1. name :

   qui sert d'étiquette aux informations qui vont être saisies ou sélectionnées (par exemple, une zone de saisie pourra être reliée à un champ d'une base de données). C'est le nom du champ.

2. type :

   permet de définir la nature du champ de saisie. Il est suivi d'une valeur et d'un certain nombre d'options pour donner une forme de saisie ou de sélection.

type=text

Cette valeur permet de recevoir du texte. Il est possible de définir le nombre de caractères grâce à l'attribut size :

Le code suivant :
 

<form>
Nom : <input type="text" name="nom" size=30>
Prénom : <input type="text" name="prenom" size=15>
</form>

donnera à l'écran

Nom :  Prénom : 

 
 

type=password

Similaire à la valeur précédente, excepté que les données saisies n'apparaissent pas "en clair" à l'écran. Il est possible de définir le nombre de caractéres grâce à l'attribut size :

Le code suivant :

<form>
Votre mot de passe : <input type="password" name="mot_de_passe" size=10>
</form>

donnera à l'écran

Votre mot de passe : 

 
 

type=checkbox

Fait apparaître une zone de sélection qui prend la forme d'une case cochable. La variable value permet d'attribuer une étiquette à la variable name la valeur de la case sélectionnée. L'option checked fait apparaître une case cochée par défaut :

Le code suivant :
 

<form>
<input type="checkbox" name="viennoiserie" value="croissant" checked>Croissant
<input type="checkbox" name="boisson" value="cafe">Café
<input type="checkbox" name="boisson" value="jus_de_fruit" checked>Jus de fruit
</form>

donnera à l'écran

Croissant  Café  Jus de fruit 

 
 
 

type=radio

Identique à l'option précédente. Seul point différent, une seule sélection pourra être validée (avec checkbox, on peut sélectionner plusieurs choix en même temps) :

Le code suivant :
 

<form>
<input type="radio" name="civil" value="Mr">Monsieur
<input type="radio" name="civil" value="Mme" checked>Madame
<input type="radio" name="civil" value="Mlle">Mademoiselle
</form>

donnera à l'écran 

Monsieur  Madame  Mademoiselle 

 
 

type=range

range permet à l'utilisateur d'entrer un nombre dont les limites sont fixées par 2 variables : min et max.

Le code suivant :

<form>

Donnez maintenant une note entre 0 et 20 :
<input type="range" name="note" min=0 max=20 size=2>

</form>

donnera à l'écran :

Donnez maintenant une note entre 0 et 20 : 

 
 
 

type=submit

Submit est un des deux boutons se trouvant au bas de tout formulaire de saisie. Il permet d'envoyer les informations saisies vers le serveur (donc de valider la saisie). L'attribut value permet de spécifier les mots figurant sur le bouton :

Le code suivant :
 

<form>
<input type="submit" value="Valider la saisie">
</form>

donnera à l'écran 

 
 

type=reset

Idem au bouton précédent mais réinitialise tous les champs de saisie (annule la saisie) :

Le code suivant :
 

<form>
<input type="reset" value="Effacer et recommencer">
</form>

donnera à l'écran 

Les champs mémos

Pour créer une zone de saisie comportant plusieurs lignes, on utilise les marqueurs <textarea></textarea>.
Deux attributs permettent de définir la taille de la zone de saisie en nombre de lignes rows et en nombre de colonnes cols.

Le code suivant : 


<form>
Vos commentaires :
<textarea name="comments" rows=10 cols=20>
</textarea>
</form>

donnera à l'écran

Vos commentaires : 

<select>  </select> permettent de créer des menus déroulants comportant deux ou plusieurs options.

Le code suivant :
<form>
<p>Sélectionnez un jour de la semaine :
<select name="jour_semaine">
<option>Lundi
<option>Mardi
<option>Mercredi
<option>Jeudi
<option>Vendredi
<option>Samedi
<option>Dimanche
</select>
</form>

donnera à l'écran : 

Sélectionnez un jour de la semaine :  Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche 

On peut aussi spécifier la taille de la fenêtre de sélection en ajoutant la variable size. Dans le cas où size=6, la fenêtre de sélection fera apparaître les six premières options du menu. 

Sélectionnez un jour de la semaine :  Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche 

Lorsque l'on désire réaliser un menu à choix multiple, il suffit d'ajouter l'attribut multiple. 

Sélectionnez un ou des jours de la semaine :  Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche 

En rajoutant, l'option selected au marqueur <option>, l'information qui suit sera sélectionnée par défaut. 

Sélectionnez un jour de la semaine :  Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche 

Les données bien évidemment, à un moment ou à un autre devront être récupérées et enregistrées par le serveur en vue de leur traitement. Les possibilités qui sont offertes dans ce domaine sont très nombreuses. Elles n'entrent pas dans les spécifications du langage HTML puisque ce dernier se borne uniquement à définir l'aspect des pages Web. Un programme informatique traîtant les données transmises par un formulaire doit être, à cet effet, mis en place sur le serveur qui abrite ledit formulaire.