Cours HTML en pdf 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 pemettent 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 :
<FORM NAME= »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.

Il est également possible de choisir une mise en forme pour le contenu textuel des champs grace à la balise <FONT> et d’une manière générale toutes les autres qui changent l’aspect des caractères (sauf la couleur).
Syntaxe :
<INPUT TYPE= »text » NAME= »nom_du_champ » SIZE= »taille » MAXLENGTH= »taille_maximum » VALUE= »texte_par_défaut« >
Exemples :
Haut du formulaire
Votre nom :
Bas du formulaire
Votre nom : <INPUT TYPE= »text » NAME= »nom » SIZE= »20 » MAXLENGTH= »30 » VALUE= »Isidor« >
Haut du formulaire
Votre e-mail :
Bas du formulaire
Votre e-mail : <FONT SIZE=3 FACE= »arial« ><B><INPUT TYPE= »text » NAME= »nom » SIZE= »20 » MAXLENGTH= »30 » VALUE= »isidor@labas.com« ></B></FONT>
Mot de passe
Il vous est aussi donné d’utiliser ce champ afin de contrôler des mots de passe qui apparaitront en astérix grace à la balise <INPUT TYPE= »password« >.
Syntaxe :
<INPUT TYPE= »password » NAME= »nom_du_champ » SIZE= »taille » MAXLENGTH= »taille_maximum« >
Exemple :
Haut du formulaire
Votre code secret :
Bas du formulaire
Votre code secret : <INPUT TYPE= »password » NAME= »secret » SIZE= »8 » MAXLENGTH= »8« >

Champ de saisie multi-ligne

Il est souvent nécessaire à l’internautre d’écrire un commentaire assez long, la balise précédente ne convient pas. On utilise le conteneur <TEXTAREA> pour offrir au visiteur un espace multi-lignes qui lui permettra d’écrire un roman. Il a pour attributs NAME : le nom du champ, ROWS : le nombres de lignes, COLS : le nombres de colonnes, READONLY : le champs se trouve alors en mode lecture seule c’est-à-dire que le texte par défaut qui s’y trouve ne peut en être effacé. Si dans votre code vous insérez du texte entre les balises <TEXTAREA> et </TEXTAREA>, alors il se trouvera par défaut dans le champ. Sitôt que le texte est plus grand que la zone de texte, des barres de défilement apparaissent. Enfin, <TEXTAREA> ce comporte comme la balise <PRE> à l’égard du texte par défaut, c’est-à-dire que si dans le code vous sautez des lignes, alors ces sauts de lignes se répercuterons lors de l’affichage dans le champ multi-ligne.
Syntaxe :
<TEXTAREA NAME= »nom_du_champ » ROWS= »nombre_de_lignes » COLS= »nombre_de_colonnes« >
</TEXTAREA>
Exemples :
Haut du formulaire
Que faites-vous dans la vie ?
Bas d formulaire
Que faites-vous dans la vie ?
<TEXTAREA NAME= »vie_internaute » ROWS= »5 » COLS= »50« >
</TEXTAREA>
Haut du formulaire
Voici ce que j’en pense :
Bas du formulaire
Voici ce que j’en pense :
<TEXTAREA NAME= »pense » ROWS= »5 » COLS= »50 » READONLY>
C’est un scandale,
c’est inadmissible.
Montons sur Paris, Dressons les baricades !
</TEXTAREA>

Champ caché

Il est quelque fois nécessaire, pour s’y retrouver lorsqu’on reçoit les données dans sa boite aux lettre, d’inclure des données cachées permettant de savoir de quel formulaire viennent les données, de quel site web elles proviennent (en cas de formulaire partagé) ou d’insérer des données issus de calculs ou encore des données provenant de JavaScript indiquant le navigateur, l’adresse IP, le nombre de visites ou tout autre renseignement sur le visiteur… Pour cela on utilise la balise <INPUT TYPE= »hidden« > dont les atributs sont NAME : nom du champ caché et VALUE le contenu du champ c’est-à-dire sa valeur. Ce champ ne sera pas vu par l’internaute mais il sera inclu parmi les données.
Syntaxe :
<INPUT TYPE= »hidden » NAME= »nom_du_champ  » VALUE= »valeur« >
Exemple :
[ invisible ]
<INPUT TYPE= »hidden » NAME= »Origine » VALUE= »CyberZoïde« >
Bouton radio
Le bouton radio sert à faire faire un choix à l’internaute parmi plusieurs propositions. Un seul choix est possible et le nombre de propositions n’est pas limité. On utilise pour cela la balise <INPUT TYPE= »radio« > dont les attributs sont NAME : le nom du groupe de contrôles correspondant c’est-à-dire le nom du champ dans lequel ira la valeur finalement sélectionnée, VALUE : la valeur c’est-à-dire le texte qui sera inscrit dans le champ, CHECKED : facultatif car indique le bouton coché par défaut.
Syntaxe :
<INPUT TYPE= »radio » NAME= »nom_du_groupe » VALUE= »valeur » [CHECKED]>
Exemple :
Haut du formulaire
Votre qualité :
Monsieur
Madame
Mademoiselle
Bas du formulaire
Votre qualité : <BR>
<INPUT TYPE= »radio » NAME= »qualite » VALUE= »M » CHECKED>Monsieur<BR>
<INPUT TYPE= »radio » NAME= »qualite » VALUE= »Mme« >Madame<BR>
<INPUT TYPE= »radio » NAME= »qualite » VALUE= »Mlle« >Mademoiselle
Dans l’exemple précédent, j’ai créé un groupe de contrôle radio. Le nom de ce groupe est qualite. Comme j’ai besoin de proposer 3 choix différents, je fabrique 3 boutons radio différents. Mais ces trois boutons appartiennent à la même famille qualite c’est pourquoi ils portent tous le nom de qualite. Par contre, leurs valeurs respectives sont différentes. C’est cette valeur qui sera inscrite dans le champ qualite dans le message de données. Si je veux proposer un autre choix avec des boutons radios dans le même formulaire, il me suffit de changer le nom du groupe.
Bouton checkbox
Le bouton checkbox est très semblable au bouton radio à la seule différence qu’il est possible d’en sélectionner plusieur appartenant au même groupe. Les attributs sont strictement les mêmes. Mais on utilise cette fois-ci la balise <INPUT TYPE= »checkbox« >.
Syntaxe :
<INPUT TYPE= »checkbox » NAME= »nom_du_groupe  » VALUE= »valeur » [CHECKED]>
Exemple :
Haut du formulaire
Vos sports préférés :
Natation
Cyclisme
Ski
Pétanque
Basket
Bas du formulaire
Vos sports préférés : <BR>
<INPUT TYPE= »checkbox » NAME= »qualites » VALUE= »natation » CHECKED>Natation<BR>
<INPUT TYPE= »checkbox » NAME= »qualites » VALUE= »cyclisme« >Cyclisme<BR>
<INPUT TYPE= »checkbox » NAME= »qualites » VALUE= »ski« >Ski<BR>
<INPUT TYPE= »checkbox » NAME= »qualites » VALUE= »petanque » CHECKED>Petanque<BR>
<INPUT TYPE= »checkbox » NAME= »qualites » VALUE= »basket« >Basket
Listes
Les boutons radio et checkbox sont bien mais quand on a un choix à faire entre 36 valeurs différentes, mieux vaut utiliser les listes déroulantes avec le conteneur<SELECT> dont les attributs sont NAME : le nom de la liste, SIZE (facultatif) dont la valeur unité (par défaut) signifie qu’on a affaire à une liste déroulante sinon c’est une liste normale mais avec barre de défilement, MULTIPLE (facultatif) qui signifie qu’il est possible de sélectionner plusieurs valeurs. Si MULTIPLE n’est pas spécifier, il ne sera possible de faire qu’un seul et unique choix.
Le conteneur <SELECT> en lui-même ne suffit pas, il faut lui rajouter autant de balise <OPTION> qu’il y a de choix possibles. Les attributs de cette dernière sontVALUE : valeur du choix sélectionnable c’est-à-dire le texte qui sera inscrit dans le champ portant le nom de la liste et SELECTED (facultatif) qui signifie que le choix correspondant sera sélectionné par défaut.
Syntaxe :
<SELECT NAME= »nom_de_la_liste » [SIZE] [MULTIPLE]>
<OPTION VALUE= »valeur_1« >Choix_1
<OPTION VALUE= »valeur_2« >Choix_2
<OPTION VALUE= »valeur_X » [SELECTED]>Choix_X
</SELECT>
Exemples :
Haut du formulaire
Quel est votre type de femme :  Blondes Brunes Rousses
Bas du formulaire
Quel est votre type de femme :
<SELECT NAME= »femme« >
<OPTION VALUE= »blondes« >Blondes
<OPTION VALUE= »brunes« >Brunes
<OPTION VALUE= »rousses« >Rousses
</SELECT>
Haut du formulaire
Quel est votre type de femme :
Blondes Brunes Rousses
Bas du formulaire
Quel est votre type de femme : <BR>
<SELECT NAME= »femme SIZE=3″>
<OPTION VALUE= »blondes« >Blondes
<OPTION VALUE= »brunes » SELECTED>Brunes
<OPTION VALUE= »rousses« >Rousses
</SELECT>
Haut du formulaire
A quels jeux avez-vous déjà joué :
Destruction Derby Moto Racer Doom Duke Nukem Quake Civilisation Sim City
Bas du formulaire
A quels jeux avez-vous déjà joué : <BR>
<SELECT NAME= »jeux SIZE=4 MULTIPLE »>
<OPTION VALUE= »dd« >Destruction Derby
<OPTION VALUE= »racer« >Moto Racer
<OPTION VALUE= »doom » SELECTED>Doom
<OPTION VALUE= »duke« >Duke Nukem
<OPTION VALUE= »quake« >Quake
<OPTION VALUE= »civ » SELECTED>Civilisation
<OPTION VALUE= »sim« >Sim City
</SELECT>
Pièce jointe
Vos visiteurs auront sans doute envie de vous laisser un fichier, pour cela il vous faut utiliser la balise <INPUT TYPE= »file« > dont l’attribut SIZE a pour valeur la taille (en caractères) du champ correspondant. Ce champ sera suivit d’un bouton qui permet d’ouvrir une boite de dialogue Open pour choisir le fichier.
Point capital nécessaire pour l’envoi d’un fichier en pièce jointe : il faut changer la valeur de l’attribut ENCTYPE du conteneur FORM en multipart/form-data. En effet, ENCTYPE précise au navigateur le type MIME du message envoyé lors de la validation du formulaire. Le type MIME plain/text vu plus haut signifie texte brut, alors que multipart/form-data signifie que le message peut contenir des données binaires. Si vous oubliez de spécifier le bon code MIME pour l’envoi d’un fichier, vous ne recevrez qu’une chaîne de caractères contenant le nom et le chemin de ce fichier dans l’ordinateur de l’internaute !
Il est également possible de limiter la taille du fichier à envoyer afin de limiter l’encombrement de votre boite aux lettres. Pour cela, ajouter un champs caché nommé MAX_FILE_SIZE et de valeur la taille maximal acceptée en octets.
Syntaxe :
<FORM NAME= »nom_du_formulaire » ACTION= »mailto:votre@email » METHOD= »post » ENCTYPE= »multipart/form-data« >
<INPUT TYPE= »hidden » NAME= »MAX_FILE_SIZE » VALUE= »taille« >
<INPUT TYPE= »file » NAME= »nom_du_champ » SIZE= »taille« >
</FORM>
Exemple :
Haut du formulaire
Bas du formulaire
<FORM NAME= »cyberform » ACTION= »mailto:cyberzoide@multimania.com » METHOD= »post » ENCTYPE= »multipart/form-data« >
<INPUT TYPE= »hidden » NAME= »MAX_FILE_SIZE » VALUE= »204800« >
<INPUT TYPE= »file » NAME= »fichier » SIZE=40>
</FORM>
Boutons de fonction
Bouton Envoyer
Une fois que votre visiteur a fini de remplir le formulaire, il faut qu’il puisse vous l’envoyer. Pour cela il lui faudra cliquer sur un bouton comme dans une boite de dialogue windows et dont la balise correspondante est <INPUT TYPE= »submit« > dont l’attribut VALUE a pour valeur le texte affiché sur le bouton.
Syntaxe :
<INPUT TYPE= »submit » VALUE= »texte_à_afficher« >
Exemple :
Haut du formulaire
Bas du formulaire
<INPUT TYPE= »submit » VALUE= »Envoyer« >
Bouton Effacer
L’internaute pourra aussi vouloir effacer toutes les réponses qu’il aura donné. L’utilisation de la balise <INPUT TYPE= »reset« > fera apparaître un bouton qui permet d’initialiser le formulaire.
Syntaxe :
<INPUT TYPE= »reset » VALUE= »texte_à_afficher« >
Exemple :
Haut du formulaire
Bas du formulaire
<INPUT TYPE= »reset » VALUE= »Effacer« >
Bouton simple
Pour des besoins de contrôle du formulaire avec JavaScript, pour pouvez être amené à créer un bouton qui ne soit dédié ni à l’envoit du formulaire ni à son ré-initialisation. L’utilisation de la balise <INPUT TYPE= »button« > fera apparaître un bouton simple qui peut appeler une fonction JavaScript. Les formulaires sont un très bon outil pour pouvoir utiliser le JavaScript afin de mieux communiquer avec l’internaute, lui proposer des jeux, des calculs…
Syntaxe :
<INPUT TYPE= »button » VALUE= »texte_à_afficher » onClick= »fonction_JavaScript()« >
Exemple :
Haut du formulaire
Bas du formulaire
<INPUT TYPE= »button » VALUE= »Cliquez ici ! » onClick= »fctjs(this.form)« > <INPUT TYPE= »text » NAME= »texte« >
Boutons personnalisés
Si ces boutons ne vous plaisent pas, rassurez-vous car vous pouvez en changer l’apparence tout simplement en créant vous même l’image correspondante au format GIF (ou JPEG). Pour le bouton reset, vous n’avez même pas besoin de passer par une balise de bouton car il vous suffit d’encadrer votre image par un conteneur <A HREF> pointant vers votre formulaire. Le fait de recharcher votre page contenant le formulaire aura pour effet de supprimer tous les choix.
Syntaxe :
<A HREF= »url_du_formulaire« ><IMG SRC= »url_de_l’image » ALT= »texte_à_afficher« ></A>
Exemple :
<A HREF= »formulaire.php3l« ><IMG SRC= »images/reset.gif » WIDTH=107 HEIGHT=20 BORDER=0 ALT= »Annuler« ></A>
Pour le bouton d’envoit, il faut utiliser la balise <INPUT TYPE= »image« > dont les attributs sont SRC qui a pour valeur l’adresse de l’image à afficher, WIDTH qui spécifie la largeur de l’image, HEIGHT pour la hauteur et BORDER pour la bordure.
Syntaxe :
<INPUT TYPE= »image » SRC= »adresse_de_l’image » WIDTH= « largeur » HEIGHT= »hauteur » BORDER= « bordure« >
Exemple :
Haut du formulaire
Bas du formulaire
<INPUT TYPE= »image » SRC= »images/envoit.gif » WIDTH=106 HEIGHT=23 BORDER=0 ALT= »Envoyer« >