Les formulaires
Les formulaires sont une des choses indispensables à tout site web.

Vous ne saurez pas utiliser efficacement ces formulaires sans apprendre le Javascript ou le PHP


Un formulaire est compris entre les balises <form> et </form>.
La première balise <form> peut avoir plusieurs attributs:
Pour "écrire" du texte dans un formulaire, vous devez obligatoirement utiliser les paragraphes sinon, votre formulaire ne sera pas valide XHTML.

La balise <input>



La balise <input> est une ligne de saisie de texte. Voici à quoi elle ressemble:
balise input

Sa syntaxe est la suivante:

<input type="X" />

La balise <input> peut avoir plusieurs attributs:

La balise <label>



Avant de mettre un champ de saisie (<input>), il vaut mieux indiquer ce qu'il faut y mettre.
Pour l'instant, vous tapez ceci:

<form method="post" action="page.php">
<p>
Votre login:<input type="text" name="login" size="50" maxlenght="60" />
</p>
</form>

Maus vous avez surement déjà vu des formulaires où, lorsque vous cliquez sur le texte "Votre login", le curseur se met automatiquement dans l'input correspondant.
Pour ce faire, il faut "lier" le texte au champ de saisie grâce à la balise <label>. Celle-ci ne prend qu'un atribut: "for" qui aura la même valeur que l'id de l'input.
Voici un petit exemple:

<form method="post" action="page.php">
<p>
<label for="mail">Votre email:</label>
<input type="text" name="email" id="mail" />
</p>
</form>

Dans cet exemple, le texte que contient la balise <label> à été "lié" à l'input par la valeur de l'id de l'input.

Les textareas



Les textareas sont des "zones" de texte. Ce sont des cadres où vous pouvez taper autant de texte que vous le souhaitez.
La balise <textarea> est une balise double (balise ouvrante et balise fermante).
Voici sa syntaxe:

<textarea>Texte par défaut</textarea>

La taille par défaut du textarea est très petite. Pour l'augmenter, il suffit de rajouter les attributs "rows" et "cols" qui indiquent respectivement le nombre de lignes en hauteur et le nombre de caractères en largeur.

La balise <textarea> peut aussi avoir les attributs "name" et "id".

Voici un petit exemple de formulaire:

<form method="post" action="page.php">
<p>
<label for="pseudo">Votre pseudo:</label>
<input type="text" name="login" id="pseudo" /><br />
<label for="texte">Votre texte:</label><br />
<textarea name="message" id="texte" rows="25" cols="50">
Texte par défaut du textarea
</textarea>
</p>
</form>



Envoyer le formulaire



Pour envoyer votre formulaire, vous aurez besoin d'un bouton de type "submit" (envoyer). Ce bouton se crée grâce à la balise....<input> (c'est fou ce qu'elle fait cette balise).
Voici sa syntaxe:

<input type="submit" value="Envoyer!" />

L'attribut "type" n'est plus "text" ou "password" mais "submit", pour inquer que c'est le bouton qui va envoyer le contenu du formulaire dans lequel il se trouve. L'attribut "value" contient le texte du boutton.

Il existe aussi le bouton de type "Reset" qui remet le formulaire dans son état initial. La syntaxe de ce bouton est la suivante:

<input type="reset" value="Reset!" />

Voici un exemple avec tous les types de formulaires vus pour l'instant:

<form method="post" action="page.php">
<p>
<label for="pseudo">Votre pseudo:</label>
<input type="text" name="login" id="pseudo" /><br />
<label for="pass">Votre mot de passe</lablel>
<input type="password" name="m_d_p" id="pass" /><br />
<label for="comment">Votre commentaire:</label><br />
<textarea name="avis" id="comment" rows="15" cols="50">
</textarea><br />
<input type="reset" value="Reset!" />
<input type="submit" value="Envoyer!" />
</form>



Les options



Une des choses les plus intéressantes des formulaires sont les éléments d'options.

Les checkbox


Les checkbox sont des "cases" à cocher. Dans un formulaire, le visiteur peut cocher PLUSIEURS cases.
Pour créer une checkbox, nous allons utiliser la balise....<input>. Voici sa syntaxe:

<input type="checkbox" name="case" id="checkbox" />

Voici à quoi elle ressemble:
checkbox

Les boutons radio


Passons maintenant avec les boutons radio. Ceux-ci sont très utilisés dans les sondages car ils n'autorisent QU'UN SEUL CHOIX dans la liste des boutons.
Voici la syntaxe de ce bouton:

<input type="radio" name="bouton" id="radio" />

Voici à quoi il ressemble:
bouton radio

Les listes déroulantes


Les listes déroulantes permettent elles aussi de faire un choix entre plusieurs possibilités, par exemple le pays d'origine du visiteur ou son fuseau horaire.
Une liste déroulante se construit avec la balise <select> et plusieurs balises <option>.
Toute la liste sera comprise entre les balises <select> et chaque élément de la liste entre les balises <option>.
Voici un exemple:

<select name="pays">
<option>Belgique</option>
<option>Espagne</option>
<option>Italie</option>
<option>Luxembourg</option>
<option>France</option>
<option>Pays-Bas</option>
</select>

Voici le réslutat:
Liste de sélection
Mais ce n'est pas fini avec les listes déroulantes. Il y a aussi moyen de classer les options en plusieurs groupes grâce à la balise <optgroup label="X">
Cette balise va "entourer" un certain nombre d'options. On peut ainsi trier les pays par langue par exemple:

<select name="pays">
<optgroup label="français">
        <option>Belgique</option>
        <option>Luxembourg</option>
        <option>France</option>
        <option>Suisse</option>
</optgroup>
<optgroup label="neerlandais">
        <option>Pays-Bas</option>
        <option>Belgique</option>
</optgroup>
<optgroup label="allemand">
        <option>Allemagne</option>
        <option>Belgique</option>
        <option>Suisse</option>
</optgroup>
</select>

Voici le résultat:
Liste de sélection avec groupes
L'heure est maintenant venue d'un petit exemple récapitulatif:

<form method="post" action="page.php">
<p>Votre menu:<br />
Plat:<br />
<label for="moules">Moules</label>
<input type="checkbox" name="moules" id="moules" /><br />
<label for="steak">Steak</label>
<input type="checkbox" name="steak" id="steak" /><br />
<label for="frites">Frites</label>
<input type="checkbox" name="frites" id="frites" /><br />
<label for="carbonnades">Carbonnades</label>
<input type="checkbox" name="carbo" id="carbonnades" /><br /><br />
Votre boisson:<br />
<label for="eau">Eau</label>
<input type="radio" name="water" id="eau" /><br />
<label for="vin blanc">Vin blanc</label>
<input type="radio" name="v_blanc" id="vin blanc" /><br />
<label for="vin rouge">Vin rouge</label>
<input type="radio" name="v_rouge" id="vin rouge" /><br /><br />
<label for="nbr">Pour</label>
<select name="nb_personnes" id="nbr">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="nbr"> personnes</label><br />
<input type="reset" value="Reset" />    
<input type="submit" value="Commander" />
</p>
</form>

Voici le résultat:
menu

Regrouper le formulaire en plusieurs zones:


Lorsque votre formulaire commence à devenir un peu long, il existe des balises pour "grouper" le formulaire en plusieurs "champs" ayant le même theme. C'est la même chose que la balise <optgroup> sauf que ça s'applique sur tout le formulaire et pas seulement sur la liste déroulante. Vous pouvez par exemple grouper tous les champs qui demandent des informations à l'utilisateur.
Voici un exemple utilisant les fieldset:

<form method="post" action="page.php">
<p>
<fieldset>
<legend>Informations de connexion</legend>
<label for="login">Pseudo:</label>
<input type="text" name="pseudo" id="login" /><br />
<label for="passwd">Mot de passe:</label>
<input type="password" name="pass1" id="passwd" /><br />
<label for="password">Entrez à nouveau votre mot de passe:</label>
<input type="password" name="pass2" id="password" />
</fieldset>
<fieldset>
<legend>Coordonnées personnelles</legend>
<label for="email">Votre courriel</label>
<input type="text" name="e-mail" id="email" /><br />
<label for="pays">Votre pays:</label>
<select name="country" id="pays">
<optgroup label="europe">
<option>Belgique</option>
<option>France</option>
<option>Luxembourg</option>
</optgroup>
<optgroup label="Amérique">
<option>U.S.A.</option>
<option>Vénézuela</option>
<option>Canada</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend>Présence en ligne</legend>
<label for="mail_visible">Afficher son adresse de courriel:</label>
<input type="checkbox" name="ligne_mail" id="mail_visible" defalut="checked" /><br />
Quel statut souhaitez-vous avoir lorsque vous êtes connecté?<br />
<label for="connect">Connecté</label>
<input type="radio" name="connecte_s" id="connect" /><br />
<label for="invisible">Invisible</label>
<input type="radio" name="invisible_s" id="invisible" /><br />
<label for="invite">Invité</label>
<input type="radio" name="invite_s" id="invite" /><br /><br />
<input type="reset" value="Reset" />
<input type="submit" value="Valider" />
</fieldset>
</form>

Voici le résultat:
Image du formulaire

Vous êtes désormais incollables sur tout ce qui concerne les formulaires.

Nous allons maintenant voir un petit "plus" pour vos formulaires: le CSS.

Si vous ne connaissez rien au CSS, lisez sur ce site la partie concernant le CSS.

Comme vous le savez, pour attribuer un style spécial au contenu d'une balise, il suffit d'indiquer ceci en CSS:

balise{
attributs de style;
}

et le tour est joué.

L'astuce CSS est que vous pouvez colorer d'une couleur le fond d'un input (ou de tout autre élément du formulaire) lorsque l'utilisateur tape dedans et lorsqu'il ne s'occupe pas du champ.
Quand l'utilisateur place son curseur dans un champ de texte, on dit que ce champ à le "focus". En CSS, cela se note:

balise:focus{
args
}

Par exemple, pour colorer le fond d'un input en jaune lorsqu'il n'a pas le focus et en rouge lorsqu'il l'a, il faudra écrire ceci:

input{
input{
background-color:#ffff00;
}
input:focus{
background-color:#ff0000;
}


Cette page sur les formulaires est terminée et vous ne savez toujours pas les utiliser, marrant, non?
Plus sérieusement, pour savoir utiliser efficacement les formulaires, lisez le cours sur le PHP.
Précédent    Suivant

Creative Commons License
Sauf mention contraire, le contenu de cette page est sous licence Creative Commons
Page générée en 0.7922 secondes.
Retour en haut de la page
Imprimer cette page