Les formulaires - Training on line


	• Tableaux à angles arrondis • Créer une barre de scroll colorée • Les Roll-Over • Créer un calque • Créer un tableau • Créer un calque • Créer un tableau • Créer un calque • Créer un tableau • Créer un calque • Créer un poulet • Créer un calque • Créer un tableau • Créer un formu


	• Monter une page • Déplacer une image • Manipuler un calque

Pourquoi le formulaire ?

La balise <FORM>

Les champs de saisie

Les champs de saisie multilignes

Les listes de choix

Les cases à cocher / boutons radio

Soumettre son formulaire

Personnalisez vos boutons

Exemple de mise en forme élaborée

Exercice pratique

1. Pourquoi le formulaire

Les formulaires vous permettent d'interagir avec ou de réunir des informations provenant des utilisateurs de votre site.
Par exemple, vous pouvez demander un nom d'utilisateur et une adresse électronique ou effectuer un sondage auprès des utilisateurs, leur faire signer un livre d'or ou leur demander leur avis sur votre site.

Les formulaires comportent deux parties : le code source HTML qui décrit le formulaire (par exemple, les champs, les libellés et les boutons visibles sur la page) et un script ou une application pour traiter les informations envoyées (comme un script CGI, ASP, Coldfusion...). Il est impossible de récupérer les données d'un formulaire sans utiliser de script de traitement.

Dans bien des cas, ces scripts vont permettrent l'interrogation via une requête SQL (Structury Querry Langage) de bases de données.
Les formulaires peuvent également servir à remplir une base de données afin de posséder des informations sur les internautes (formulaire d'inscription).

Un fabricant de logiciels pourrait par exemple mettre un formulaire à disposition dans lequel l'utilisateur pourrait indiquer quels produits de la firme il a en sa possession, comment il a connu les produits, quel métier il exerce, sur quel type d'ordinateur le logiciel tourne chez lui etc... De cette façon il pourrait obtenir un écho des utilisateurs uniformément structuré et par là même facilement comparable.

Beaucoup de moteurs de recherche sur Internet proposent aux navigateurs WWW qui y font appel, des formulaires de saisie écrits en HTML et dans lesquels l'utilisateur peut spécifier la recherche qu'il désire faire. Sans de tels formulaires une recherche ne serait pas du tout possible.

Toujours plus nombreux sur Internet les services de commandes. Cela peut être des tickets, des pizzas ou des sous vêtements peu importe -pour réaliser de tels services de commande les formulaires sont indispensables pour permettre à l'utilisateur de mentionner exactement ce qu'il veut commander.

2. La balise <FORM>

Avec la balise <FORM>, vous définissez un formulaire. Vous devez impérativement refermer cette balise avec </FORM>.
Tous les éléments figurant entre ces deux balises font partie du formulaire; ainsi on y trouvera des champs textes, des cases à cocher ( multi choix ), des boutons radio ( choix unique ), des listes...

Vous pouvez bien sûr formater le texte en utilisant des balises HTML; des graphiques, des liens, des tableaux et des éléments multimédia sont permis dans le corps de formulaire. Ainsi vous pouvez optimiser l'apparence de votre formulaire et l'agrémenter de texte explicatif.

La balise <FORM> possède 3 attributs :

ACTION : Permet d'indiquer ce qui doit se passer avec le formulaire rempli quand l'internaute l'envoie.

Il peut s'agir d'une adresse E-mail précédée de " mailto ". Ensuite les données du formulaire rempli sont envoyées à cette adresse E-mail.
Ex : <FORM ACTION="mailto:webtrain@free.fr">
Vous pouvez faire appel à un programme externe hébergé sur le serveur tel qu'un programme CGI qui va ensuite traiter les données.
Un script Coldfusion, ASP ou PHP peut également traiter un formulaire.
Ex :<FORM ACTION="/cgi-bin/mailer">
METHOD : 2 méthodes existent

- POST : pour les formulaires classiques.
- GET : permet de définir, par exemple, un moteur de recherche sur votre site.
ENCTYPE : Cet attribut spécifie le format des données envoyées dans le cas où un protocole n'imposerait pas un format précis.
il possède plusieurs valeurs dont :

- "text/plain" : Valeur utilisée dans le cas d'un formulaire classique.
-"multipart/form-data" : Valeur utilisée dans le cas où le formulaire comprendrait un fichier attaché.

3. Les champs de saisie texte

La balise <INPUT TYPE="text"> permet de définir une zone de saisie texte.

Cette balise possède les attributs suivants :

NAME : Définit le nom de la donnée; cet attribut est obligatoire surtout si on souhaite récupérer en javascript, la valeur de la zone texte.
SIZE : Spécifie la taille visible du champ en nombre de caractères. Attention, cette taille varie en fonction du navigateur utilisé.
MAXLENGHT : Indique le nombre maximal de caractères utilisés ; peut s'avérer pratique pour la saisie d'un code postale à 5 chiffres par exemple.
VALUE : Définit le texte par défaut à l'intérieur du champ. Cet attribut permet surtout de renvoyer à une base de donnée la valeur du champ.

Remarque : La valeur type peut prendre d'autres valeurs :
- password : Saisie d'un code secret
- range : Saisie d'un espace numérique ; min="10" max="100" pour obliger l'utilisateur à remplir un chiffre numérique entre 10 et 100.

Exemples :

Code HTML : <input type="text" name="nomutilisateur" size="20" maxlenght="40">

Code HTML : <input type="text" name="url" size="30" maxlenght="40" value="http://">

4. Les champs de saisie multiligne ( <TEXTAREA> )

La balise <TEXTAREA> est utilisée pour réaliser une boîte de saisie sur plusieurs ligne, utile pour permettre aux internautes de laisser leur impression sur tel ou tel sujet.
Cette balise possède une balise de fermeture </TEXTAREA>.

Les attributs sont :

NAME : Définit le nom de la donnée; cet attribut est obligatoire.
ROWS : Spécifie le nombre de lignes dans la boîte de saisie.
COLS : Indique le nombre de colonnes ( en caractères ) dans la boîte de saisie.
READONLY : Spécifie que la boîte multiligne est en mode lecture uniquement.

Exemples :

Voici le code HTML :
<textarea name=commentaire" cols="45" rows="6">Veuillez saisir un commentaire :</textarea>

5. Les Listes de choix

La balise <SELECT> présente une liste de proposition sous forme de menu déroulant dans la plupart du temps.

Cette balise possède une balise de fermeture </SELECT> et doit être couplée avec la balise <OPTION> pour préciser les différents choix.

Les attributs de la balise <SELECT> :

NAME : Définit le nom de la donnée
SIZE : si la taille = 1 (valeur par défaut), c'est une liste déroulante; si la taille est supérieure à 1, il s'agit d'une liste de choix avec une barre de défilement.
MULTIPLE : Choix valable uniquement si la taille est supérieure à 1( pour les liste à choix lultiples ).

Les attributs de la balise <OPTION> :

VALUE : Nom de la donnée pour le choix
SELECTED : Définit le choix par défaut de la liste

Exemple de liste déroulante :

Code HTML :

<select name="liste">
<option value="0" selected>Type de paiement
<option value="1">Carte
<option value="2">Chèque
<option value="3">Espèce
<option value="4">Mandat
</select>

Exemple de liste sous forme de menu :

Code HTML :

<select name="liste" size="5" multiple>
<option value="0" selected>Type de paiement
<option value="1">Carte
<option value="2">Chèque
<option value="3">Espèce
<option value="4">Mandat
</select>

6. Les Cases à cocher / boutons radio :

La balise <INPUT> que nous avons abordés précédement permet également de définir une liste de cases à cocher ( avec plusieurs choix possibles ) ou une liste de cases dite "bouton radio" ( avec choix unique ).

Pour les cases à cocher ( choix multiple ), il suffit d'ajouter l'attribut TYPE="checkbox" et poue les boutons radio, l'attribut TYPE="radio".
Voici les autres attributs :

NAME : Spécifie le nom de la donnée
VALUE : Nom de la donnée pour le choix
CHECKED : S'il est présent dans la balise <INPUT>, le bouton sera coché par défaut.

Exemple de cases à cocher à choix multiple :

Tennis
Football
Basketball
Marche à pied
Judo / Karate

Code HTML :

<input type="checkbox" name="liste" value="1">Tennis<br>
<input type="checkbox" name="liste" value="2">Football<br>
<input type="checkbox" name="liste" value="3">Basketball<br>
<input type="checkbox" name="liste" value="4">Marche à pied<br>
<input type="checkbox" name="liste" value="5">Judo / Karate

Exemple de bouton radio à choix unique :

Moins de 15 ans
Entre 15 et 25 ans
Entre 26 et 49 ans
Entre 50 et 60 ans
Plus de 61 ans

Code HTML :

<input type="radio" name="liste" value="1">Moins de 15 ans<br>
<input type="radio" name="liste" value="2" checked>Entre 15 et 25 ans<br>
<input type="radio" name="liste" value="3">Entre 26 et 49 ans<br>
<input type="radio" name="liste" value="4">Entre 50 et 60 ans<br>
<input type="radio" name="liste" value="5">Plus de 61 ans

Attention : vous devez donner un nom identique à l'ensemble de vos boutons radio pour définir un choix unique.
Dans le cas contraire, vos boutons radio deviennent des boutons à choix multiples.

7. Valider le formulaire

Le language HTML met deux boutons standard à disposition pour manier les entrées de formulaires:
Un bouton pour "envoyer" et un bouton pour "interrompre". Avec le bouton envoyer l'utilisateur peut envoyer le formulaire rempli. Il arrive alors aux données du formulaire ce qui a été établi dans le repère d'ouverture <form> par action="......" . Avec le bouton "interrompre", l'utilisateur peut effacer toutes les entrées. Le formulaire n'est alors pas envoyé.

La soumission ( envoyer ) ou la remise à zéro ( recommencer ) d'un formulaire se fait avec la balise <INPUT> TYPE ayant ici deux autres valeurs :

SUBMIT : Envoi le formulaire vers le serveur
RESET : Réinitialise les champs du formulaire

Exemples :

Code HTML :

<input type="submit" name="Submit" value="Envoyer">
<input type="reset" name="Submit" value="Annuler">

8. Personnalisation des boutons :

Vous avez la possibilité de créer vos propres boutons d'envoi ou de remise à zéro afin de donner une touche plus graphique à votre formulaire.

Exemples :

Code HTML :

<input type="image" border="0" name="envoi" src="img/envoyer.gif" width="80" height="13">
<input type="image" border="0" name="annuler" src="img/annuler.gif" width="80" height="13">

9. Exemple de mise en forme élaborée :

Il est vivement conseillé d'intégrer votre formulaire au sein d'un tableau de manière à le rendre le plus clair et le plus lisible possible.
Toutes les balises de formatage HTML vues jusque là sont bien sûr utilisables lors de l'élaboration de votre formulaire.

Voir un exemple :

10. Exercice pratique :

Voici un formulaire classique pour vos contacts :

Essayer de reproduire le code HTML de ce formulaire.

	Laissez vos coordonnées, votre adresse e-mail et vos impressions sur le site.

Nom :
Prénom :
E-mail :


Sujet :

Commentaires :

Comme vous pouvez le vérifier, j'ai placé des "contrôles JavaScript" qui testent si les champs ont bien été remplis.
Nous aborderons en détail ces contrôles, dans la partie consacrée à JavaScript.

Essayez, pour le moment, de reproduire le code HTML de ce formulaire.


	Recherche par mots-clés :


	• Les feuilles de style • Les popups • Des liens spéciaux


	• Test HTML • Test DHTML • Test Javascript


	• Scripts dhtml


	• Lien n°1