====== Mettre en page les formulaires ======

//introduction honteusement repompée sur l'article de Pascale sur les tableaux//

Avec le support du positionnement CSS dans l'immense majorité des navigateurs, les inconvénients liés à la mise en page par tableaux n'ont plus lieu d'être subis, à moins de devoir fournir une mise en page identique à l'antique Netscape 4. Aussi, le présent article se concentrera sur la mise en forme des formulaires.

Afin de compléter ce point de vue, lire l'article sur l'[[http://openweb.eu.org/articles/formulaire_accessible/|utilisation des formulaires]].

===== Mettre en page les formulaires =====


==== Cas des éléments <label> et <input> juxtaposés ====

Exemple de formulaire:
    <form action="">
        <fieldset>
            <label for="nom">Nom :</label>
            <input type="text" id="nom" />
        </fieldset>
    </form>

Les étiquettes sont affichées sous forme de bloc pour pouvoir flotter à gauche des contrôles. Les contrôles sont également affichés en tant que blocs et possèdent une marge égale à la largeur de leur étiquette.

    label{
        display: block;
        float: left;
        width: 5em;
    }
    input{
        display: block;
        margin-left: 5em;
    }

==== Cas des éléments <input> imbriqués dans les <label> ====

Exemple de formulaire:
    <form action="">
        <fieldset>
            <label for="nom">
            Nom : <input type="text" id="nom" />
            </label>
        </fieldset>
    </form>

On peut facilement positionner les composant en utilisant judicieusement les propriétés ''position: absolute'' et ''position: relative''.

Il suffit d'afficher les étiquettes en tant que bloc et de les positionner de manière relative. La positionnement en relatif permettra de positionner le composant qui se trouve à l'intérieur de manière absolue. 

    label{
        display: block;
        position: relative;
    }
    label input{
        position: absolute;
        left: 0;
    }


==== Cas des éléments décrits à l'aide d'un liste de définition <dl> ====

Les champs et leur étiquettes possèdent un lien fort et on peut considérer, d'un point de vue logique, que lorsqu'on renseigne un champ, on **définit** une valeur pour l'étiquette associée. D'où l'idée d'utiliser un liste de définition (''<dl>'') pour baliser une liste de champs.

Exemple de formulaire
    <form action="">
        <fieldset>
            <dl>
                <dt><label for="nom">Nom : </label></dt>
                <dd><input type="text" id="nom" /></dd>
            </dl>
        </fieldset>
    </form>

L'un des avantages de ce marquage est qu'il se dégrade bien dans les navigateurs ayant un support limité des CSS.

===== Styler les contrôles =====

==== Groupes de champs <fieldset> et leur étiquette <legend> ====

Propriétés intéressantes à style:
  * border: bordure.
  * background: arrière-plan.
  * color: couleur d'avant-plan.

**Attention à Internet Explorer** : Lorsqu'une étiquette ''<legend>'' est placée, elle étend la zone d'affichage du ''<fieldset>''. Cependant, la bordure du ''<fieldset>'' ne suit pas cet agrandissement et provoque un affichage inattendu: le couleur de fond déborde de la zone délimitée par la bordure.

==== Étiquettes <label> ====

Propriétés intéressantes à style:
  * border: bordure.
  * background: arrière-plan.
  * color: couleur d'avant-plan.
  * font: police de caractères.
  * cursor: forme du pointeur de la souris.

Les étiquettes ''<label>'' permettent d'associer du texte à un élément de formulaire.
Lorsqu'un étiquette reçoit le focus, elle le transmet au contrôle associé
([[http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9.1]]).
Dans un navigateur graphique, le clic sur l'étiquette permet généralement d'activer le
champ associé. Il est intéressant d'expliciter ce comportement en transformant le pointeur en "main" comme pour les liens.

    label{
        cursor: pointer;
        cursor: hand; /* pour IE */
    }

==== Champs <input/> ====

Les champs de texte, les champs pour mot de passe, les cases à cocher, les boutons radio, les boutons d'envoi et de remise à zéro ont tous un point commun: leur balise XHTML est ''<input />''. Seul leur attribut type les différencie les uns des autres. Pour les différencier dans une feuille de style il suffit d'utiliser un sélecteur basé sur l'attribut:

    input[type=text]{
     /* Pour styler les champs de texte */
    }
    input[type=submit]{
     /* Pour styler les boutons d'envoi */
    }

Malheureusement, ce sélecteur n'est pas compris (au moment de l'écriture) par tous les navigateurs. Une solution est donc de créer des classes distinctes pour chaque type de contrôle.

    .text{
     /* Exemple de classe pour les champs de texte */
    }
    .submit{
     /* Exemple de classe pour les boutons d'envoi */
    }

=== de type text et password, ainsi que <textarea> ===

Les propriétés qui sont modifiables sont:
*''background'' : arrière-plan.
*''color'' : couleur d'avant-plan.
*''border'' : bordure.
*''font'': police de caractères.

=== de type submit et button ===

=== de type radio et checkbox ===

Ces deux contrôles sont assez problèmatiques car leur aspect presque jamais être personnalisé. La plupart des navigateurs utilisent les contrôles du systèmes ou des contrôles peu modifiables.

Les propriétés qui sont parfois modifiables sont:
*''background'' : arrière-plan.
*''color'' : couleur d'avant-plan.
*''border'' : bordure.
*''font-size'' : taille de la police de caractères.

L'une des seules solutions pour obtenir des cases à cocher et des boutons radio personnalisés est de faire appel à du Javascript qui se chargera de les remplacer par des images et d'étendre leur comportement à ces images.

=== de type file ===

Pour ce type de contrôle, le problème est le même que pour les boutons radio et les cases à cocher: son aspect est très peu modifiable.

Une méthode sur Quirksmode: http://www.quirksmode.org/dom/inputfile.html

==== Liste de sélection <select> et <option> ====

On peut personnaliser chaque option indépendamment.


===== Liens =====

  * http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/
  * http://veerle.duoh.com/?id=P148
  * Crash test [[http://www.456bereastreet.com/lab/form_controls/file/|styles et éléments de formulaires sur différents navigateurs]]
  * http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/
  * Liste de liens sur le [[http://css-discuss.incutio.com/?page=FormElements|wiki Incutio]]
  * Liste de liens chez [[http://www.fastclemmy.com/index.php?viewlog=84_formidablement-beau|Fastclemmy]]
  * [[http://fredcavazza.net/tutoriels/formulaire/SVF_intro.htm|Des formulaires plus simples]]
  * http://www.fredcavazza.net/doc/tutoriels/formulaire/SVF_intro.htm
  * http://www.jeffhowden.com/code/css/forms/
  * http://www.jacobrask.net/lab/efw/
  * http://www.flog.co.nz/2005/04/27/arc-adams-radiocheckbox-customisation/
  * http://www.yourtotalsite.com/archives/usability/checkboxes_radio_buttons/Default.aspx
  * http://www.useit.com/alertbox/20040927.html
  * http://www.badboy.ro/articles/2005-07-23/
  * http://www.subtraction.com/archives/2005/0822_free_form_fo.php
  * http://paularmstrongdesigns.com/examples/css/awesome-form.html
  * http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/