Formulaires

Déclarer un formulaire

Code Attributs importants But Spécificités
<form>
</form>		   Délimite une zone de formulaire En bloc
Les form ne s'imbriquent pas !
method="post" Indique que les donnêes saisies doivent être passés "silencieusement" : pas dans la barre d'adresse Permet de faire passer facilement des données complexes (long textes ou texte avec des caractères spéciaux par exemple) d'une page à une autre
method="get" Indique que les donnêes saisies doivent être passés dans la barre d'adresse Attention à la longueur des variables passée ainsi qu' caractères spéciaux
action="page.php" Renvoie les données à cette page  

Elements d'un formulaire

Il existe plusieurs façons de demander des informations à l'utilisateur, mais suivant le type de données à collecter, certains formulaires s'mposent ou non...

Attention : les éléments d'un formulaire doivent être contenu dans un bloc autre que body
Ils doivent être insérés par exemple dans un paragraphe ou un div

Renseigner des valeurs : <input />

L'élément input peut prendre plusieurs formes très différentes suivant les cas. L'attribut type renseignera sur le type de formulaire. L'élément input est de type En ligne

Attributs importants But Spécificités Exemple Rendu dans ce site
type="text" Zone de texte d'un formulaire   <input name="text" type="text" value="12345"/>
type="password" zone de texte caché par des *
Champ de mot de passe		   <input type="password" value="12345" />
type="checkbox" case à cocher Utilisez la balise label pour qu'un clic sur le texte active la checkbox <label><input name="check" type="checkbox" value="1" />Cochez la case</label>
type="button" Bouton à cliquer   <input type="button" name="bouton" value="Cliquez ici" />
type="radio" Boutons radio pour choisir entre plusieurs possibilité Doivent avoir le même nom pour que le choix soit unique dans un groupe de boutons radio
Utilisez la balise label pour qu'un clic sur le texte active le bouton		 <label>
 <input type="radio" name="radio" value="1" />Choix1
</label>
<label>
 <input type="radio" name="radio" value="2" />Choix2
</label>
type="submit" Envoie le contenu du formulaire à la page spécifiée dans la balise form  
Renvoie le contenu du formulaire vers la page sélectionnée dans "action"		 <input type="submit" value="Cliquez ici" />
type="reset" Bouton pour remettre les champs à leur valeur d'origine   <input type="reset" name="reset" value="Par défaut" />
type="file" Pour parcourir le système de fichiers et collecter le chemin d'un fichier   <input type="file" name="file"/>
type="hidden" Champ caché Permet de passer des paramètres d'une page à une autre sans l'intervention de l'utilisateur <input type="hidden" name="cache" value="Vous ne me voyez pas !!!!!!" />
type="image" Image a cliquer
Envoie le contenu du formulaire vers la page indiquée dans la balise form
Equivalent au submit mais pour utiliser un bouton en image		 Renvoie les coordonnées du clic sur l'image dans "name".x et "name".y où "name" désigne le nom donné au champ input <input type="image" src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" name="nomimage" value="1" />
name="" nom de la variable dont on demande la valeur      

Selectionner des éléments dans une liste : <select ></select >

Une zone de choix est délimitée par le balisage <select> </select>
Chaque option est entouré du balisage <option> </option>
La balise select s'insère dans un formulaire, délimité par la balise form

Exemple simple

Voyons un exemple d'utilisation courante des balises select et option

<form action="#" method="post">
    <p>
    <select name="pays">
        <option value="fr">France</option>
        <option value="us">USA</option>
        <option value="en">England</option>
    </select>
    </p>
</form>

Plus de possibilités avec les attributs

Balise Attributs importants But Exemple Rendu
Select name="" Nom de la variable renseignée    
multiple="multiple" Indique que l'utilisateur peut sélectionner plusieurs valeurs 
<form action="#" method="post">
    <p>
    <select multiple="multiple" name="pays">
        <option value="fr">France</option>
        <option value="us">USA</option>
        <option value="en">England</option>
    </select>
    </p>
</form>

size="" Indique le nombre de lignes à afficher 
<form action="#" method="post">
    <p>
    <select name="pays" size="2">
        <option value="fr">France</option>
        <option value="us">USA</option>
        <option value="en">England</option>   
    </select>
    </p>
</form>

Option selected="selected" Spécifie que l'option est selectionnée par défaut. 
<form action="#" method="post">
    <p>
    <select name="pays">
        <option value="fr">France</option>
        <option value="us" selected="selected">USA</option>
        <option value="en">England</option>
    </select>
    </p>
</form>

value="" Valeur renvoyée dans le formulaire si l'option est choisie
PAr dé la valeur est la chaîne de caractère affichée		    

Regrouper les options avec optgroup

De regrouper les options disponibles dans la balise select. C'est peu utilisé

L'attribut label est obligatoire

<form action="#" method="post">
    <p>
        <select name="pays">
            <optgroup label="Europe">
                <option value="fr">France</option>
                <option value="UK">Royaume Uni</option>
                <option value="de">Allemagne</option>
            </optgroup>
            <optgroup label="Amerique du Nord">
                <option value="us">USA</option>
                <option value="ca">Canada</option>
            </optgroup>
        </select>
    </p>
</form>

Saisie de texte à plusieurs lignes : <textarea></textarea>

Cette zone de texte permet à l'utilisateur de saisir un texte plus long.
Attention : pour les textes longs et les caractères spéciaux, mieux vaut utiliser method="post" pour le formulaire

Les attributs cols (nombre de caractères sur une ligne) et rows (nombre de lignes affichées) sont obligatoires

Rien ne vaut un exemple :

<form action="#" method="post">
    <p>
        <textarea cols="50" rows="10" name="texte">Entrez votre texte</textarea>
    </p>
</form>

Créer des boutons plus personalisables : <button></button>

On peut insérer des images, du texte mis en forme dans ce bouton, ce qui est impossible avec un bouton de type input

Les types possibles sont : button, reset ou submit
Le bouton ne peut pas contenir de lien

<form action="#" method="post">
    <p>
    <button name="clic" type="button">
        <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
        <br />Ce site est valide XHTML 1.1
    </button>
    </p>
</form>

Autres élements liés

Code But Spécificités Exemple Rendu
<label>
</label>		 Permet d'assigner une zone de sensibilité autour d'un élément input
Très utile pour pouvoir cocher une case en cliquant sur le texte accompagnant		 En ligne
A utiliser pour chaque checkbox et radio		 <label><input type="radio" name="labeltest" />Radio avec</label>
<input type="radio" name="labeltest" />Radio sans
Radio sans
<fieldset></fieldset> Affiche un cadre entourant des éléments liés d'un formulaire De type bloc <fieldset>
<label><input type="radio" name="radiotest" value="1"/>Radio 1</label>
<label><input type="radio" name="radiotest" value="2" />Radio2</label>
</fieldset>
<legend></legend> Doit âtre placé dans un fieldset.
Le texte sera le titre du fielset, il s'affichera en haut à gauche.		   <fieldset>
<legend>Boutons radio</legend>
<label><input type="radio" name="radiotest" value="1"/>Radio 1</label>
<label><input type="radio" name="radiotest" value="2" />Radio2</label>
</fieldset>
Boutons radio