Un article de Eric Bruyndonckx.
[modifier] Définition d'un formulaire
[modifier] Début et fin d'un formulaire
<form name="nom" action="URL" method="methode"
enctype="typeEncodage">
<!-- éléments du formulaire -->
</form>
Explications :
Un formulaire commencera toujours par la balise <form action="URL" method="methode" enctype="type Mime"> et finira toujours par</form>. Les différents éléments de votre formulaire seront à placer entre ces balises, à la place de <!-- éléments du formulaire et autres éléments dans le formulaire -->.
- Pour nom, notez un nom pour votre formulaire (sans espace, accent ou caractères spéciaux).
- Pour URL, notez une adresse Web ou la cible avec ou sans chemin du fichier ou de la source qui doit traiter les données. URL peut être par exemple un script CGI, un fichier HTML avec du code PHP ou une adresse électronique (voir ci-dessous).
- Pour methode, 2 possibilités :
- la méthode GET, qui est cependant déconseillée en raison de ses limitations (la taille de l'URL, y compris les paramètres est limitée à 256 caractères).
- la méthode POST, par laquelle les données du formulaire sont envoyées, offre en outre le choix du type d'encodage typeEncodage :
- si rien n'est spécifié, c'est application/x-www-form-urlencoded qui sera utilisé par défaut : les champs du formulaire sont alors URL-encodés sur une longue chaîne de la même manière qu'avec la méthode GET, mais ici sans limitation de taille.
- on utilisera multipart/form-data dans le cas d'un formulaire servant à uploader un fichier.
- on utilisera text/plain si l'on souhaite se faire envoyer par E-mail les champs du formulaire avec l'action action="mailto:adresse_email?Subject=sujet"
[modifier] Eléments d'un formulaire
[modifier] Champ texte à 1 ligne
<input type="text" name="nom" size="longueur"
maxlength="longueurMax"/>
- Pour nom, mentionnez un nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).
- Pour longueur, mentionnez la largeur d'affichage d'un champ en caractères (facultatif).
- Pour longueurMax, mentionnez le nombre de caractères qui au maximum peuvent être entrés (facultatif).
[modifier] Champ de saisie pour mot de passe
<input type="password" name="nom" size="longueur"
maxlength="longueurMax"/>
Lors de la saisie, les caractères seront affichés sous la forme d'une *.
- Pour nom, mentionnez un nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).
- Pour longueur, mentionnez la largeur d'affichage d'un champ en caractères (facultatif).
- Pour longueurMax, mentionnez le nombre de caractères qui au maximum peuvent être entrés (facultatif).
[modifier] Champ de saisie sur plusieurs lignes
<textarea name="nom" cols="colonnes" rows="rangees">
<!-- Texte par défaut facultatif -->
</textarea>
- Pour nom, mentionnez un nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).
- Pour colonnes, mentionnez la largeur d'affichage en nombre de caractères par ligne.
- Pour rangees, mentionnez la hauteur d'affichage en rangées.
[modifier] Liste de choix
<select name="nom" size="hauteur">
<option>élément de choix 1</option>
<option>élément de choix 1</option>
</select>
- Pour nom, mentionnez un nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).
- Pour hauteur, mentionnez un nombre comme 1 ou bien 10 pour fixer ainsi la hauteur d'affichage de la liste (nombre d'éléments affichés simultanément).
<input type="radio" name="nom" value="valeur"/>Texte
- Pour nom, mentionnez un nom. Les cases d'option du même groupe reçoivent le même nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).
- Pour valeur, mentionnez un texte qui désigne cette case pour l'envoi du formulaire.
- Pour Texte, mentionnez un texte d'inscription visible.
<input type="checkbox" name="nom" value="valeur"/>Texte
- Pour nom, mentionnez un nom. Les cases d'option du même groupe reçoivent le même nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).
- Pour valeur, mentionnez un texte qui désigne cette case pour l'envoi du formulaire.
- Pour Texte, mentionnez un texte d'inscription visible.
[modifier] Présélectionner des éléments
Case à option :
<input type="radio" name="nom" value="valeur" checked/>Texte
Case à cocher :
<input type="checkbox" name="nom" value="valeur" checked/>Texte
Cas 1 : Bouton simple
<input type="button" name="nom" value="inscription"
onClick="action"/>
- Pour nom, mentionnez un nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).
- Pour inscription, mentionnez un nom qui s'affichera sur le bouton (ex : Envoyer)
- Pour action, mentionnez une fonction Javascript disponible dans la page entre les balises <script></script> et qui sera executée lors du click (voir chapitre : Validation de formulaires, exemple complet).
Cas 2 : Envoyer
<input type="submit" name="nom" value="inscription"/>
- Pour nom, mentionnez un nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).
- Pour inscription, mentionnez un nom qui s'affichera sur le bouton (ex : Envoyer)
Cas 3 : Annuler
<input type="reset" name="nom" value="inscription"/>
- Pour nom, mentionnez un nom. Ni espace, ni accent, comme premier caractère une lettre à part cela chiffres et tirets de soulignement (_), trait d'union (-), deux points (:) ou point (.).
- Pour inscription, mentionnez un nom qui s'affichera sur le bouton (ex : Annuler).
