Pour avoir déjà utilisé un moteur de recherche, vous avez saisi des mots clés ou une expression afin d'accéder à de plus amples renseignements. La zone de texte permettant de saisir vos critères fait partie d'un formulaire de saisie dont la balise est <form...>
<body>
<form name="monFormulaire"
action="mailto:internet@carmineo.fr">
ou action="http://www.altavista.digital.com/cgi-bin/query" method="get">
...
</form>
</body>
Un formulaire est généralement suivi d'une (ou des) action(s) :
La méthode utilisée sera post dans le cas d'un envoi seul et get dans l'attente d'une réponse.
Un formulaire peut posséder plusieurs types d'entités :
Les attributs de ces entités sont :
Un des premiers champs de saisie bien connu pour les internautes surfant sur la toile est celui de votre moteur de recherche. Une deuxième application bien connue aussi est le login et le mot de passe que vous rentrez sur toute partie de site sécurisé comme par exemple celui de votre fournisseur de messagerie ou celui de votre banque.
<form...>
...
<input type="text" name="nom_champ" size="30" value="valeur_par_defaut">
...
</form>
Il s'agit d'une liste à choix simple comme par exemple le choix entre "Monsieur" ou "Madame". Pour cela, les différentes entités auront un nom (name) identique mais une valeur (value) différente.
<form...>
...
<input type="radio" name="civilite" value="Mr">Monsieur
<input type="radio" name="civilite" value="Mme">Madame
...
</form>
Elles sont utilisées dans le cas de choix multiples
<form...>
...vous aimez
<input type="checkbox" name="hobbie" value="sport">le sport
<input type="checkbox" name="hobbie" value="musique">la musique
<input type="checkbox" name="hobbie" value="info">l'informatique
...
</form>
Au lieu de présenter les différents choix sous la forme de boutons radio, une solution possible est un menu déroulant.
<form...>
...
<select name="mois">
<option selected value="0">choix du mois</option>
<option value="janvier">janvier</option>
<option value="fevrier">février</option>
...
<option value="decembre">décembre</option>
</select>
...
</form>
Pour autoriser l'internaute à laisser un commentaire dans le formulaire, une zone de texte est créée. Dans les attributs sera précisé la largeur en colonne et en ligne de cette zone de texte.
<form...>
...
<textarea name="zone_texte" cols="30" rows="4"></textarea>
...
</form>
Lorsque le formulaire est rempli, une étape suivante consiste à l'envoyer (voire de réinitialiser tous les champs) et pour cela l'utilisation de bouton d'action est obligatoire.
<form...>
...
<input type="button" name="validation" value="valider">
<input type="submit" name="validation" value="valider">
<input type="reset" name="remise_a_zero" value="annuler">
...
</form>
Avant l'envoi des données du formulaire saisies par l'internaute, il est souvent nécessaire de faire un contrôle de celles-ci. Pour cela, une possibilité est d'utiliser une fonction javascript qui est lancé lors du clic sur le bouton de validation.
<input type="button" name="validation" value="Valider" onCLick="javascript:verifForm()">
Cette fonction personnalisée verifForm() sera déclarée dans l'entête du document.