Créer un site gratuitement    Tutoriels    Html    Créer un formulaire
Mes favoris    Ajouter l'article à vos favoris

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 )

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" /> Babar
Oui-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 ans
Plus 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 de choix.
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>.

Participez au développement du site en laissant vos impressions.

Commentaire/demande concernant l'article :


Recopiez le contenu de cette image :
Code anti-robot  »