Navigation
Créer un site gratuitement Contact Nos partenaires
Mes options Webmasters Tutoriels Fonctions Hébergement 1&1
Créer un formulaire
Créer un formulaire, oui mais pourquoi ?
Aujourd'hui, on trouve toutes sortes de formulaires sur la toile, tous ayant un but différent (formulaire de contact, formulaire de livre d'or, formulaire d'ajout de commentaire, ...)
Dans cet article, je vais vous apprendre à créer votre propre formulaire (ici, nous réaliserons un formulaire de contact) tout en ayant vu auparavent toutes les possibilitées que nous offre le HTML lors de la création d'un formulaire.
Il faut savoir qu'il existe différentes balises permettant de réaliser un formulaire, il existe les balises <input>, <select>, <optgroup>, <option>, <textarea>.
Nous allons voir les différentes utilisations de ces balises :
(Je tiens à vous prévenir d'avance que ce tutoriel est assez long, mais il en vaut la peine ! Allez donc chercher à boire et à manger
)
Il ne s'agit ici que de leur nom, leur valeur ainsi que leur fonction.
Il vous sera indiqué par la suite sur quelles types de champs elles sont utilisables.
button : bouton clicable.
Ce type de bouton est surtout utilisé pour executer un script JavaScript lorsque le visiteur clic sur le bouton (par exemple, vérifier si le formulaire est complet puis le valider si tel est le cas; dans le cas contraire, on affiche un message d'alerte).
Attributs : name, value, disabled
submit : bouton de validation de formulaire.
Différement au bouton clicable button, une fois que le visiteur aura cliqué sur ce bouton, le formulaire sera soumis (il s'agit du bouton de validation).
Attributs : name, value, disabled
image : image de validation de formulaire.
Une fois que le visiteur aura cliqué sur l'image, le formulaire sera soumis.
On le retrouve sur beaucoup de site notament pour illustrer le bouton valider du champ de recherche interne (l'image représente souvent une image OK).
Attributs : name, value, disabled, src
L'attribut value contient le texte de remplacement dans le cas ou l'image soit introuvable.
reset : bouton de réinitialisation de formulaire.
Il s'agit encore d'un bouton mais son rôle est tout autre, il permet au visiteur de réinitialiser le formulaire en un clic.
Attributs : name, value, disabled
checkbox : case à cocher à choix multiples.
Cette case permet au visiteur de cocher différentes valeurs d'un formulaire.
Lorsqu'on a à faire à un formulaire disposant de plusieurs cases à choix multiples, la valeur de l'attribue name doit être la même afin de pouvoir récupérer les cases cochées après la validation.
Exemple, si on demande la liste de livres que le visiteur a déjà lu, l'attribut name comportera la même valeur : name="livres_lu[]"
On ajoute des crochets pour récupérer les valeurs des cases cochées une fois que le formulaire a été soumis (à voir dans les tutoriels PHP).
Attributs : name, value, disabled, checked
Babar
(Quelle culture ^^)
radio : case à cocher à choix unique.
Elle est utile lorsqu'on veut vérifier (par exemple) si le visiteur est majeur, on lui demande de cocher la case correspondant à sa tranche d'âge.
Attributs : name, value, disabled, checked
L'attribut name ne contiendra pas de crochets car après la soumission du formulaire, on ne récupèrera que la valeur sélectionnée.
Moins de 18 ans
text : champ de texte.
Affichera un champ de texte dans lequel le visiteur peut insérer son nom, son adresse email, l'url de son site (ce que vous lui demandez !).
Attributs : name, value, disabled, readonly, size, maxlength
password : champ de mot de passe.
Affichera un champ de texte dans lequel les caractères saisis seront cachée par des bulles ( • ) afin de cacher votre mot de passe.
Attributs : name, value, disabled, readonly, size, maxlength
file : champ de téléchargement de fichier.
Affichera un champ de texte suivie d'un bouton nommé "Parcourir" vous permettant de sélectionner un fichier sur votre disc dur.
Attributs : name, disabled
hidden : champ caché.
N'affichera rien du tout, mise à part une ligne de plus dans le code source.
Ce champ caché vous permet de faire passer des données d'une page à l'autre sans que cela ne se voit.
(Pour la visualisation, vous ne verrez rien, tout se passe dans le code source si vous avez le courage de vous y aventurer !)
Attributs : name, value
La liste permettra au visiteur de sélectionner une chose parmis tant d'autres.
Si on la compare à la case à cocher à choix unique, c'est le même principe, choisir une chose parmis tant d'autres, mais la liste prend bien moins de place que 10 cases.
On définit une liste par la balise <select> ... </select>
Attributs : name, disabled, multiple
On insère des données dans la liste grâce à la balise <option> ... </option>
Attributs : value, disabled, selected
On peut donner des titres à plusieurs groupes de données (Ex. à la fin de ce paragraphe) grâce à la balise <optgroup> ... </optgroup>
Attributs : label, disabled
J'ai volontairement grisé tout un groupe et une donnée pour vous montrer ce à quoi peut servir l'attribut disabled et pré-sélectionné la ligne "Entre 200€ et 300€ par mois".
Mais je n'en ai pas finit avec cette balise select !
Il me reste un attribut à vous présenter : multiple.
Il permet au visiteur de sélectionner plusieurs valeurd d'une liste en maintenant enfoncée la touche CTRL et en cliquant sur plusieurs valeurs.
Exemple, sélectionnez vos couleurs préférées parmis la liste ci-dessous :
textarea : zone de texte
Affichera une zone de texte bien plus grande qu'un champ texte.
Attributs : name, cols, rows, disabled, readonly, dir
Pour cela et pour d'autres choses aussi, il existe la balise <form> ... </form>.
Ses attributs :
* Exemple d'url après validation d'un formulaire utilisant la méthode "get" :
contact.php?prenom=Paul&sujet=Demande de renseignement
A la suite du code, vous pourrez visualiser un exemple concret du rendu de celui-ci :
La balise <fieldset> ... </fieldset> permet d'encadrer le formulaire d'une manière plutôt esthétique.
Elle se complète de la balise <legend> titre </legend> qui permet de donner un titre au formulaire comme c'est le cas dans notre exemple.
La balise <label for="valeur"> ... </label> quand à elle, permet lorsque l'on clic dessus de placer le curseur à l'intérieur du champ sur lequel elle pointe.
Pour la faire pointer vers un champ, rien de difficile, il suffit de donner une valeur dans l'attribut id="" du champ et d'indiquer la même dans l'attribut for="" de la balise <label>.
Aujourd'hui, on trouve toutes sortes de formulaires sur la toile, tous ayant un but différent (formulaire de contact, formulaire de livre d'or, formulaire d'ajout de commentaire, ...)
Dans cet article, je vais vous apprendre à créer votre propre formulaire (ici, nous réaliserons un formulaire de contact) tout en ayant vu auparavent toutes les possibilitées que nous offre le HTML lors de la création d'un formulaire.
Il faut savoir qu'il existe différentes balises permettant de réaliser un formulaire, il existe les balises <input>, <select>, <optgroup>, <option>, <textarea>.
Nous allons voir les différentes utilisations de ces balises :
(Je tiens à vous prévenir d'avance que ce tutoriel est assez long, mais il en vaut la peine ! Allez donc chercher à boire et à manger
)Balise input
Tout d'abord, nous allons survoller la liste des attributs que nous pouvons retrouver dans les balises input.Il ne s'agit ici que de leur nom, leur valeur ainsi que leur fonction.
Il vous sera indiqué par la suite sur quelles types de champs elles sont utilisables.
| Attribut |
Valeur |
Fonction |
| type | nous allons les voir | Définir le type de champ désiré |
| name | au choix | Nom du champ |
| value | au choix | Contenu du champ |
| checked | checked | Cocher la case par défaut |
| disabled | disabled | Griser un champ |
| readonly | readonly | Rendre un champ incomplétable (lecture seule) |
| maxlength | chiffre | Limiter un champ à X caractères |
| size | chiffre | Indiquer la longueur d'un champ |
button : bouton clicable.
Ce type de bouton est surtout utilisé pour executer un script JavaScript lorsque le visiteur clic sur le bouton (par exemple, vérifier si le formulaire est complet puis le valider si tel est le cas; dans le cas contraire, on affiche un message d'alerte).
Attributs : name, value, disabled
<input type="button" name="bouton1" value="Executer" />
submit : bouton de validation de formulaire.
Différement au bouton clicable button, une fois que le visiteur aura cliqué sur ce bouton, le formulaire sera soumis (il s'agit du bouton de validation).
Attributs : name, value, disabled
<input type="submit" name="valider" value="Valider" />
image : image de validation de formulaire.
Une fois que le visiteur aura cliqué sur l'image, le formulaire sera soumis.
On le retrouve sur beaucoup de site notament pour illustrer le bouton valider du champ de recherche interne (l'image représente souvent une image OK).
Attributs : name, value, disabled, src
L'attribut value contient le texte de remplacement dans le cas ou l'image soit introuvable.
<input type="image" src="/img/articles/bouton-ok.png" name="valider" value="Valider" />
reset : bouton de réinitialisation de formulaire.
Il s'agit encore d'un bouton mais son rôle est tout autre, il permet au visiteur de réinitialiser le formulaire en un clic.
Attributs : name, value, disabled
<input type="reset" name="reinitialiser" value="Réinitialiser" />
checkbox : case à cocher à choix multiples.
Cette case permet au visiteur de cocher différentes valeurs d'un formulaire.
Lorsqu'on a à faire à un formulaire disposant de plusieurs cases à choix multiples, la valeur de l'attribue name doit être la même afin de pouvoir récupérer les cases cochées après la validation.
Exemple, si on demande la liste de livres que le visiteur a déjà lu, l'attribut name comportera la même valeur : name="livres_lu[]"
On ajoute des crochets pour récupérer les valeurs des cases cochées une fois que le formulaire a été soumis (à voir dans les tutoriels PHP).
Attributs : name, value, disabled, checked
<input type="checkbox" name="livres_lu[]" value="oui-oui" /> Oui-oui <br /> <input type="checkbox" name="livres_lu[]" value="babar" /> BabarOui-oui
Babar
(Quelle culture ^^)
radio : case à cocher à choix unique.
Elle est utile lorsqu'on veut vérifier (par exemple) si le visiteur est majeur, on lui demande de cocher la case correspondant à sa tranche d'âge.
Attributs : name, value, disabled, checked
L'attribut name ne contiendra pas de crochets car après la soumission du formulaire, on ne récupèrera que la valeur sélectionnée.
<input type="radio" name="tranche_age" value="plus_de_18" checked="checked" /> Plus de 18 ans <br /> <input type="radio" name="tranche_age" value="moins_de_18" /> Moins de 18 ansPlus de 18 ans
Moins de 18 ans
text : champ de texte.
Affichera un champ de texte dans lequel le visiteur peut insérer son nom, son adresse email, l'url de son site (ce que vous lui demandez !).
Attributs : name, value, disabled, readonly, size, maxlength
<input type="text" name="prenom" value="" /> « Votre prénom.« Votre prénom.
password : champ de mot de passe.
Affichera un champ de texte dans lequel les caractères saisis seront cachée par des bulles ( • ) afin de cacher votre mot de passe.
Attributs : name, value, disabled, readonly, size, maxlength
<input type="password" name="mot_de_passe" value="motdepasse" />
file : champ de téléchargement de fichier.
Affichera un champ de texte suivie d'un bouton nommé "Parcourir" vous permettant de sélectionner un fichier sur votre disc dur.
Attributs : name, disabled
<input type="file" name="image" />
hidden : champ caché.
N'affichera rien du tout, mise à part une ligne de plus dans le code source.
Ce champ caché vous permet de faire passer des données d'une page à l'autre sans que cela ne se voit.
(Pour la visualisation, vous ne verrez rien, tout se passe dans le code source si vous avez le courage de vous y aventurer !)
Attributs : name, value
<input type="hidden" name="champ_cache" value="Ici je mets mon texte, ou je stocke une variable.." />
Listes select
select : liste d'informations.La liste permettra au visiteur de sélectionner une chose parmis tant d'autres.
Si on la compare à la case à cocher à choix unique, c'est le même principe, choisir une chose parmis tant d'autres, mais la liste prend bien moins de place que 10 cases.
On définit une liste par la balise <select> ... </select>
Attributs : name, disabled, multiple
On insère des données dans la liste grâce à la balise <option> ... </option>
Attributs : value, disabled, selected
On peut donner des titres à plusieurs groupes de données (Ex. à la fin de ce paragraphe) grâce à la balise <optgroup> ... </optgroup>
Attributs : label, disabled
<select name="revenu"> <optgroup label="Pauvre" disabled="disabled"> <option value="revenu-1">Entre 10€ et 20€ par mois</option> <option value="revenu-2">Entre 20€ et 30€ par mois</option> <option value="revenu-3">Entre 30€ et 50€ par mois</option> </optgroup> <optgroup label="Moyenne"> <option value="revenu-4">Entre 50€ et 100€ par mois</option> <option value="revenu-5">Entre 100€ et 150€ par mois</option> <option value="revenu-6">Entre 150€ et 200€ par mois</option> </optgroup> <optgroup label="Riche"> <option value="revenu-7" selected="selected">Entre 200€ et 300€ par mois </option> <option value="revenu-8">Entre 300€ et 400€ par mois</option> <option value="revenu-9" disabled="disabled">Plus de 400€ par mois </option> </optgroup> </select>
J'ai volontairement grisé tout un groupe et une donnée pour vous montrer ce à quoi peut servir l'attribut disabled et pré-sélectionné la ligne "Entre 200€ et 300€ par mois".
Mais je n'en ai pas finit avec cette balise select !
Il me reste un attribut à vous présenter : multiple.
Il permet au visiteur de sélectionner plusieurs valeurd d'une liste en maintenant enfoncée la touche CTRL et en cliquant sur plusieurs valeurs.
Exemple, sélectionnez vos couleurs préférées parmis la liste ci-dessous :
<select name="couleurs_preferees" multiple="multiple"> <option value="rouge">Rouge</option> <option value="bleu">Bleu</option> <option value="vert">Vert</option> <option value="blanc">Blanc</option> <option value="rose">Rose</option> </select>
La zone de texte textarea
Avant de se lancer dans la zone de texte, je vous présente la liste d'attributs ainsi que leurs valeurs et fonctions afin que vous compreniez leur rôle :| Attribut | Valeur |
Fonction |
| name | au choix | Nom de la zone de texte |
| cols | chiffre | Nombre de caractère par ligne |
| rows | chiffre | Nombre de ligne de la zone |
| disabled | disabled | Griser la zone de texte |
| readonly | readonly | Rendre la zone incomplétable (lecture seule) |
| dir | ltr ou rtl | Ecriture de gauche à droite ou inverse |
textarea : zone de texte
Affichera une zone de texte bien plus grande qu'un champ texte.
Attributs : name, cols, rows, disabled, readonly, dir
<textarea cols="40" rows="10" dir="rtl"></textarea>
La balise form
Disposer d'un formulaire, c'est bien oui, mais encore faut-il lui renseigner la page sur laquelle il doit se diriger après la validation de celui-ci.Pour cela et pour d'autres choses aussi, il existe la balise <form> ... </form>.
Ses attributs :
| Attribut | Valeur | Fonction |
| method | post | envoie les données sans les divulguer dans l'url |
| get | envoie les données en les divulgants dans l'url * | |
| action | url | Page réceptrice du formulaire |
| name | au choix | Nom du formulaire (souvent utilisé avec le JavaScript) |
| target | _blank | Ouvre la page réceptrice dans une nouvelle page (PopUp) |
| _parent | Ouvre la page réceptrice dans la même frame | |
| _self | Ouvre la page réceptrice dans la fenêtre parent des frames | |
| _top | Ouvre la page réceptrice dans la même fenêtre (défaut) |
* Exemple d'url après validation d'un formulaire utilisant la méthode "get" :
contact.php?prenom=Paul&sujet=Demande de renseignement
<form method="post" action="./contact.php" name="formulaire_de_contact"> Ici, le formulaire avec ses balises input, select, ... </form>
Créer un formulaire
Nous allons maintenant passer à la pratique en mettant en place un formulaire de contact (pas du tout comme les autres !).A la suite du code, vous pourrez visualiser un exemple concret du rendu de celui-ci :
<form method="post" action="./ma-page.html"> <fieldset> <legend>Contactez nous </legend> <br /> <label for="prenom"> Votre prénom : </label> <br /> <input type="text" name="prenom" id="prenom" size="40" maxlength="40" /> <br /> <br /> Sur ce site, vous êtes : <br /> <input type="radio" name="habitude" value="habitue" id="habitue" /> <label for="habitue"> un habitué. </label> <br /> <input type="radio" name="habitude" value="nouveau" id="nouveau" /> <label for="nouveau"> un nouveau. </label> <br /> <br /> Décrivez vous, vous êtes : <br /> <input type="checkbox" name="type_de_visiteur[]" id="beau" /> <label for="beau"> beau. </label> <br /> <input type="checkbox" name="type_de_visiteur[]" id="jeune" /> <label for="jeune"> jeune. </label> <br /> <input type="checkbox" name="type_de_visiteur[]" id="grand" /> <label for="grand"> grand. </label> <br /> <input type="checkbox" name="type_de_visiteur[]" id="muscle" /> <label for="muscle"> musclé. </label> <br /> <br /> Prétentieux ! <br /> Comment ça non ? <br /> Prouvez le par une photo : <br /> <input type="file" name="photo_athlete" disabled="disabled" /> <br /> (Comment ça vous ne pouvez pas vous justifier car le champ est grisé ?) <br /> <br /> Vous nous contactez pour : <br /> <select name="contact"> <option value="partenariat">Demande de partenariat</option> <option value="aide" selected="selected">Demande de d'aide</option> <option value="amour">Déclaration d'amour</option> </select> <br /> <br /> <label for="code"> Passons aux choses, le code de votre carte bleu : </label> <br /> <input type="password" name="code_carte_bleu" id="code" /> <br /> (A prendre avec humour biensur !) <br /> <br /> <label for="message"> Votre message : </label> <br /> <textarea name="message" id="message" cols="40" rows="6"></textarea> <br /> <br /> <input type="button" name="envoyer" value="Envoyer le message" onclick="alert('Je vous ai bien eu ! ;)');" /> <input type="reset" name="reinitialiser" value="Réinitialiser le formulaire" /> </fieldset> </form>» Voir le résultat.
La balise <fieldset> ... </fieldset> permet d'encadrer le formulaire d'une manière plutôt esthétique.
Elle se complète de la balise <legend> titre </legend> qui permet de donner un titre au formulaire comme c'est le cas dans notre exemple.
La balise <label for="valeur"> ... </label> quand à elle, permet lorsque l'on clic dessus de placer le curseur à l'intérieur du champ sur lequel elle pointe.
Pour la faire pointer vers un champ, rien de difficile, il suffit de donner une valeur dans l'attribut id="" du champ et d'indiquer la même dans l'attribut for="" de la balise <label>.
