Les Formulaire en HTML

Les Formulaire en HTML

1. Pourquoi les formulaires ?
2. La balise principale
3. Champ de saisie simple
4. Champ de saisie multi-lignes
5. Champ caché
6. Bouton radio
7. Bouton checkbox
8. Listes
9. Pièces jointes
10. Boutons de fonction
11. Encore plus…

Pourquoi les formulaires ?

Un site qui vit est en dynamique avec l’internaute. Pour qu’un site vive dans la durée, il faut que les visiteurs communiquent avec le webmaster. D’où l’intérêt des formulaires qui permettent aux internautes d’envoyer des données au webmaster. Ainsi le visiteur n’est plus passif, il génère lui aussi de l’information qui servira au propriétaire du site qui pourra alors connaître les goûts et les attentes de ces cybervisiteurs.

Un formulaire peut servir à receuillir les avis des visiteurs, leur e-mail en vue d’une newsletter. Mais ça peut être aussi un bon de commande, un sondage, un jeu… Un formulaire peu aussi être une passerelle entre le visiteur et des applications écrites en Java ou JavaScript.

La balise principale

Le formulaire est délimité dans le code HTML par le conteneur : <FORM> </FORM>, c’est-à-dire que toutes les balises de base propres aux formulaires devront être contenues entre ce couple de balises. A l’intérieur de ce conteneur pourra aussi figurer les autres balises HTML pour la mise en forme (fontes, couleurs, tableaux, images…).

La balise <FORM> possède des attributs permettant de choisir le nom du formulaire nécessaire en cas d’utilisation de JavaScript pour la vérification des champs de saisies avec NAME, de spécifier l’adresse (URL ou e-mail) vers laquelle les données seront envoyées grace à ACTION, de sélectionner une méthode d’envoit des données avec METHOD, de choisir le format dans lequel les données sont envoyées avec ENCTYPE, de choisir un cadre vers lequel envoyer les données dans le cas de l’utilisation de JavaScript avec TARGET (facultatif).

Ici, nous considérerons seulement le cas (le plus largement utilisé) où les données sont envoyées au format texte vers la boite aux lettres du webmaster. Ainsi la balise <FORM> devient :

<FORMNAME= »nom_du_formulaire »ACTION= »mailto:votre_e-mail » METHOD= »post » ENCTYPE= »text/plain »>

Exemples :

<FORM NAME= »cyberformulaire »ACTION= »mailto:cyberzoide@chezmoi.com » METHOD= »post » ENCTYPE= »text/plain »> le contenu du formulaire à envoyer par email à votre adresse mail
</FORM>

ou encore:

<FORM NAME= »cyberformulaire » ACTION= »cgi-bin/mailer » METHOD= »get » ENCTYPE= »text/plain »> le contenu du formulaire à envoyer par un script CGI </FORM>

A l’intérieur du message adressé à l’adresse spécifiée, se trouve la liste ordonnée des nom et valeurs des différents champs, listes et boutons…

Champ de saisie simple

Champ de texte simple
Il est incontournable car présent dans chaque formulaire, c’est la balise de base du fromulaire car il permet d’entrer un texte très court comme le nom, l’âge, l’e-mail, etc. Il a pour syntaxe : <INPUT TYPE= »text »> et pour attributs NAME : le nom du champ, SIZE : la taille du champ en nombre de caractères, MAXLENGTH : la taille maximale de la chaîne de caractère qu’il peut contenir, VALUE : le texte à mettre par défaut à l’intérieur du champ.