L'HTML ne permet pas la récupération et le traitement des données envoyées
par un formulaire. En revanche, l'HTML est nécessaire pour afficher les interfaces
Web permettant aux Internautes de saisir leurs données.
L'usage des composants d'un formulaire peut être détournée de son
utilisation initial, pour un but purement esthétique ou pratique. Afficher une
calculatrice interactive en JavaScript utilise les éléments d'un formulaire,
sans pour autant envoyer des données au serveur.
Lorsque les composants d'un formulaire sont utilisés pour envoyer des données
au serveur, la balise <form></form> doit délimiter le champs d'action du bouton
de validation. En d'autres termes, définir les données entrées par l'utilisateur
à envoyer au serveur. En effet, il est possible d'insérer plusieurs formulaires
par page. Le bouton de validation ne doit envoyer uniquement les champs
concernés par ce formulaire, et non les champs du formulaire voisin.
Lors de l'envoi d'un formulaire, des couples NomDuChamps/Valeur sont
envoyés. Lors de leurs réceptions, le NomDuChamps est crucial, permettant
ainsi de récupérer la valeur associée, entrée par l'utilisateur dans le champs
correspondant.
Propriétés de <form>
Propriété
Type de valeur
Description
name
Chaîne
Il s'agit d'un nom pour localiser les composants du
formulaire au sein de la page HTML en JavaScript uniquement.
action
Chemin relatif ou
absolu d'un fichier
Suite à l'envoi du formulaire, les
données sont réceptionnées par un fichier prévu à cet effet.
<form name="NomDuForm" action="MaPage.php">
Composants divers et variés du formulaire..
</form>
Les champs de saisie
<input type="text" name="NomDuChamps" size="30" value="Valeur par défaut" maxlength="50">
Le paramètre size détermine la largeur du champs en caractères. Ici,
le champs permet d'afficher 30 caractères simultanément. Le paramètre value
détermine un texte déjà saisi dans le champs au chargement de la page. Il
est optionnel. Enfin, maxlength fixe un nombre maximum de caractères à
saisir dans le champs. Ici, 50 au maximum.
Les zones de texte
<textarea cols="50" rows="10" name="NomDuChamps"
maxlength="65535"> Texte par défaut </textarea>
Le paramètre cols indique la largeur de la zone de saisie
par le nombre de caractères contenus en une ligne.
Le paramètre rows indique la hauteur de la zone de saisie par le nombre
de lignes.
Il ne s'agit pas d'une erreur, tous les paramètres value sont sur 1,
c'est à dire sur le vrai "logique". Les trois cases à cocher sont indépendantes.
NomDuChamps1 peut prendre deux valeurs possibles. Vrai = 1, ou Faux = 0.
Lorsque la case est cochée, NomDuChamps1 prend pour valeur Vrai (1),
sinon, Faux (0).
D'une manière générale, NomDuChamps prend pour valeur le paramètre
value si la case est cochée, sinon, 0.
Améliorer la lisibilité des formulaires
Vous pouvez regrouper les composants d'un formulaire par thèmes pour
améliorer la lisibilité et la compréhension de votre page Web. La balise <FieldSet></FieldSet>
est prévue à cet effet.
<FieldSet>
<legend align="left/center/right"> Thématique </legend>
Composants du formulaire
</FieldSet>
Insertion d'un bouton d'envoi
Le bouton envoyer déclenche un processus qui envoi les données à
l'adresse indiquée dans le paramètre action de la balise <form>.
<input type="submit" value=" Texte du bouton d'envoi ">
Par ailleurs, sachez que le bouton est un composant de formulaire au même
titre que le champs de saisi. Son usage n'est pas uniquement réservé à l'envoi
d'un formulaire.
<input type="button" name="NomDuBouton" value=" Texte du bouton ">
Il est aussi possible d'intégrer une image dans un bouton.
<button name"NomDuBouton" type="button"><img src="img/bouton.gif"> Bouton
intégrant une image.. </button>