Formulaires

Les balises

FORM | INPUT | SELECT et OPTION | TEXTAREA

Les composants

Formulaire | Bouton de commande | Boutons submit et reset | Boutons radio
Cases à cocher | Ligne d'édition | Liste de choix | Texte libre

FORM

Les balises FORM et /FORM entourent un formulaire. La balise FORM peut contenir des attributs :

NAME=nom qui permet de différencier plusieurs formulaires sur une même page.

ACTION="adresse_url" METHOD="méthode" pour utiliser un script CGI situé à adresse_url avec la méthode qui est post ou get. Avec certains navigateurs on peut choisir comme adresse_url "mailto:p.nom@adresse.fr" et comme méthode post pour envoyer le résultat par courrier électronique à l'adresse indiquée.

Entre les balises FORM et /FORM on met du texte et des objets destinés à recueillir les actions des utilisateurs : ligne de saisie, boutons, listes de sélection, ...
Exemple :
<FORM NAME="form1">
</FORM>

INPUT

Les balises INPUT et /INPUT permettent d'inclure dans un formulaire des objets destinés à réagir aux actions de l'utilisateur. Les attributs de la balise INPUT permettent de préciser le nom de l'objet et le type d'objet désiré.

Ligne de saisie
Exemple :

Texte source	Résultat obtenu
<FORM NAME="form1"> Entrer votre code (8 lettres maxi) : <INPUT NAME="zone1" TYPE=text SIZE=10 MAXLENGTH=8> </FORM>	Entrer votre code (8 lettres maxi) :

Boutons radio
Exemple :

Texte source	Résultat obtenu
<FORM NAME="form2"> Cocher la case correspondante : <br> <INPUT NAME="sexe" TYPE=radio VALUE="masculin">Monsieur <INPUT NAME="sexe" TYPE=radio VALUE="féminin">Madame </FORM>	Cocher la case correspondante : Monsieur Madame

Cases à cocher
Exemple :

Texte source	Résultat obtenu
<FORM NAME="form3"> Indiquer vos couleurs préférées : <br> <INPUT NAME="couleurs" TYPE=checkbox VALUE="rouge">Rouge<BR> <INPUT NAME="couleurs" TYPE=checkbox VALUE="vert">Vert<BR> <INPUT NAME="couleurs" TYPE=checkbox VALUE="bleu">Bleu<BR> </FORM>	Indiquer vos couleurs préférées : Rouge Vert Bleu

Boutons d'envoi et d'annulation
Pour effectuer l'envoi des données inscrites dans le formulaire à l'aide du script indiqué dans l'attribut ACTION de la balise FORM ou pour annuler les entrées effectuées, on peut utilise les types SUBMIT et RESET de l'objet INPUT.
Exemple :

Texte source	Résultat obtenu
<FORM NAME="form4" ACTION="mailto:nom@domaine.fr" METHOD="post"> Code : <INPUT NAME="code" TYPE=text SIZE=10> <BR><BR> <INPUT TYPE=submit VALUE="Envoyer"> <INPUT TYPE=reset VALUE="Annuler"> </FORM>	Code :

Autres boutons de commande
Il est aussi possible de définir des boutons déclenchant une fonction JAVASCRIPT.
Exemple :

Texte source	Résultat obtenu
<FORM NAME="form5"> <INPUT TYPE=button VALUE="Cliquer ici" ONCLICK="alert('Vous avez cliqué !')"> </FORM>

SELECT et OPTION

Les balises SELECT et /SELECT permettent d'inclure une liste déroulante dans laquelle l'utilisateur pourra effectuer un choix. Les balises OPTION et /OPTION permettent de définir les choix possibles.
Exemple :

Texte source	Résultat obtenu
<FORM NAME="form6"> <SELECT NAME="listechoix" SIZE=3> <OPTION>Ligne de choix 1</OPTION> <OPTION>Ligne de choix 2</OPTION> <OPTION>Ligne de choix 3</OPTION> <OPTION>Ligne de choix 4</OPTION> <OPTION>Ligne de choix 5</OPTION> </SELECT> </FORM>	Ligne de choix 1 Ligne de choix 2 Ligne de choix 3 Ligne de choix 4 Ligne de choix 5

TEXTAREA

Les balises TEXTAREA et /TEXTAREA permettent de définir une zone de saisie à plusieurs lignes.
Exemple :

Texte source	Résultat obtenu
<FORM NAME="form7"> <TEXTAREA NAME="saisie" ROWS=4 COLS=15>