PcKULT.NET - La référence en informatique

Refaire une beauté à vos formulaire avec CSS

Administrateur

Jui 26 |23:04

Mise à jour le Lundi, 17 Mars 2008 19:47

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>

INSPIRÉ DE : A LIST APART
AUTEUR ORIGINAL : NICK RIGBY

Envoyer par mail

Vu: 10205

Commentaires (0) Add Comment

Flux RSS pour les commentaires

Ecrivez un commentaire

Navigation

Connexion

Services offerts

Développement Web

Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.

La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.

Plus

Développement Windows

Quel que soit votre projet, nous pouvons le réaliser pour vous !

Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.

Plus

Base de données

...

Plus

Autres

Quel que soit vos projets ou vos idées, contactez nous!

Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.

Plus