Refaire une beauté à vos formulaire avec CSS

A List Apart a mis à votre disposition une tutoriel afin de faire de la mise en forme de tableau. Il vous explique comment intégré javascript, html et css afin d'obtenir de magnifique formulaire. L'équipe de PcKULT.NET c'est penché sur le sujet, et vous montreras ici comment utiliser les fonctions mises à votre disposition par l'équipe de alistapart.com.

Voici donc un exemple réalisé par mes soins démontrant tout l'efficacité des scripts fournis. Afin de pouvoir les utilisés, il est nécessaire de vous apprendre quelques notions html.

<LEGEND> : Permet d'attitré un titre au cadre d'un FIELDSET.

<FIELDSET> : Permet de regrouper dans un cadre, les champs d'un formulaire.

<LABEL> : Court texte qui résume le contenu d'une option.

Afin de réaliser le tout, il faut constituer 2 fichiers javascript fourni par leur soin :

cmxform.css

if( document.addEventListener ) document.addEventListener( 'DOMContentLoaded', cmxform, false );

function cmxform(){
// Caché le formulaire
$( 'form.cmxform' ).hide().end();

// Procédure
$( 'form.cmxform' ).find( 'li/label' ).not( '.nocmx' ).each( function( i ){
    var labelContent = this.innerHTML;
    var labelWidth = document.defaultView.getComputedStyle( this, '' ).getPropertyValue( 'width' );
    var labelSpan = document.createElement( 'span' );
        labelSpan.style.display = 'block';
        labelSpan.style.width = labelWidth;
        labelSpan.innerHTML = labelContent;
    this.style.display = '-moz-inline-box';
    this.innerHTML = null;
    this.appendChild( labelSpan );
} ).end();

// Afficher le formulaire
$( 'form.cmxform' ).show().end();

}

Le second script utilisé provient quant à lui de jquery.com. Il est disponible en libre téléchargement sur leur site web.

jquery.js

Un fois que vous avez récupérez ces 2 scripts, il ne vous reste plus qu'à les inclure dans votre document html.

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/cmxform.js"></script>

Il ne reste plus maintenant que 2 étapes. La mise en forme CSS et le formulaire lui même. Pour les css, voici le code donné par A List Apart :

screen.css

@import "reset.css";
@import "core.css";

@import "_library/cmxform.css";
@import "cmxform.css";

reset.css

ody, p, blockquote {
    margin: 0;
    padding: 0;
    }

a img, iframe { border: none; }

/* Headers
------------------------------*/

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: 100%;
    }

/* Lists
------------------------------*/

ul, ol, dl, li, dt, dd {
    margin: 0;
    padding: 0;
    }

/* Links
------------------------------*/

a, a:link {}
a:visited {}
a:hover {}
a:active {}

/* Forms
------------------------------*/

form, fieldset {
    margin: 0;
    padding: 0;
    }

fieldset { border: 1px solid #000; }

legend {
    padding: 0;
    color: #000;
    }

input, textarea, select {
    margin: 0;
    padding: 1px;
    font-size: 100%;
    font-family: inherit;
    }

select { padding: 0; }

core.css

body {
    padding: 0 10px;
    font: normal 62.5% "Lucida Grande", Helvetica, Verdana, Arial;
    }

p { margin: 10px 0; }

.sr {
    position: absolute;
    left: -9999em;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    }

_library/cmsform.css

form.cmxform fieldset { margin-bottom: 10px; }

form.cmxform legend {
    padding: 0 2px;
    font-weight: bold;
    _margin: 0 -7px; /* IE Win */
    }

form.cmxform label {
    display: inline-block;
    line-height: 1.8;
    vertical-align: top;
    }

form.cmxform fieldset ol {
    margin: 0;
    padding: 0;
    }

form.cmxform fieldset li {
    list-style: none;
    padding: 5px;
    margin: 0;
    }

form.cmxform fieldset fieldset {
    border: none;
    margin: 3px 0 0;
    }

form.cmxform fieldset fieldset legend {
    padding: 0 0 5px;
    font-weight: normal;
    }

form.cmxform fieldset fieldset label {
    display: block;
    width: auto;
    }

form.cmxform em {
    font-weight: bold;
    font-style: normal;
    color: #f00;
    }

form.cmxform label { width: 120px; } /* Width of labels */
form.cmxform fieldset fieldset label { margin-left: 123px; } /* Width plus 3 (html space) */

cmsform.css

form.cmxform {
    width: 370px;
    font-size: 1.1em;
    color: #333;
    }

form.cmxform legend { padding-left: 0; }

form.cmxform legend,
form.cmxform label { color: #333; }

form.cmxform fieldset {
    border: none;
    border-top: 1px solid #C9DCA6;
    background: url(../images/votre_image_de_fond.gif) left bottom repeat-x;
    }

form.cmxform fieldset fieldset { background: none; }

form.cmxform fieldset li {
    padding: 5px 10px 7px;
    background: url(../images/votre_image_de_division.gif) left bottom repeat-x;
}

Par la suite, il ne vous reste plus qu'à créer votre formulaire, et à inclure screen.css.

<link rel="stylesheet" type="text/css" media="screen" href="/css/screen.css" />

formulaire :

<form action="#" class="cmxform">
    <p>Voici un exemple bien simple de formulaire avec css <em>*</em></p>
    <fieldset>
        <legend>Informations</legend>
        <ol>
            <li><label for="name">Nom <em>*</em></label> <input id="name" /></li>

            <li><label for="address1">Addresse <em>*</em></label> <input id="address1" /></li>
            <li><label for="town-city">Ville</label> <input id="town-city" /></li>
            <li><label for="county">Pays <em>*</em></label> <input id="county" /></li>
            <li><label for="postcode">Code Postal <em>*</em></label> <input id="postcode" /></li>

            <li>
                <fieldset>
                    <legend>Voulez-vous recevoir la newsletter ? <em>*</em></legend>
                    <label><input type="radio" name="invoice-address" /> Oui</label>
                    <label><input type="radio" name="invoice-address" /> Non</label>
                </fieldset>

            </li>
        </ol>
    </fieldset>
    <p><input type="submit" value="Envoyer" /></p>
</form>