Paragraphe après paragraphe

Créer un formulaire design uniquement en CSS

FiX'Publié dans Developpement28.01.08 - 14:44:515 commentaires

Créer un formulaire design uniquement en CSS.

Vous allez me dire, le Xhtml et le CSS c’est bien. Et franchement, je ne peux pas dire le contraire. Le simple fait que l’on puisse modifier une donnée CSS pour que cela se répercute sur l’ensemble du site facilite la vie des développeurs.

Même si vous êtes comme moi et que vous connaissez toutes les propriétés CSS par coeur, vous avez dû rencontrer un jour, des problèmes avec les formulaires. Comme par exemple, l’impossibilité d’aligner correctement les champs et j’en passe.

Je vais vous donner la solution qui fonctionne pour avoir un formulaire assez sympa visuellement, sans aucun problème d’alignement et, encore mieux, Xhtml Strict.

En réalité, avoir un formulaire très bien aligné et beaucoup plus simple que l’on ne pense. Fini l’affichage du formulaire via des méthodes plus ou moins correctes. Allez, c’est parti ! :

Pour bien réaliser votre formulaire, il faut utiliser toutes les balises qui existent. Quand je dis cela, je pense plus particulièrement à la balise : label. Cette balise permet d’améliorer grandement l’ergonomie et l’accessibilité de vos formulaires.

En effet, grâce à cette balise, il ne sera plus obligatoire de cliquer dans le champ pour avoir “la main”. Il suffit de cliquer sur le texte qui précède le champ pour avoir le focus.

C’est grâce à cette balise (label) et un sélecteur CSS (#content label) que vous allez pouvoir aligner vos champs.

Voici le code source de ma solution :

- Xhtml (index.html) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
  <title>Un joli formulaire grâce aux CSS</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link href="formstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="catalogue" action="#" method="post">
  <div id="formtitle">Un formulaire correctement aligné</div>
        <div id="content">
            <p>
              <label for="label_nom">Nom :</label>
              <input type="text" id="label_nom" name="nom" size="50"/>
            </p>
      <p>
              <label for="label_prenom">Prenom :</label>
              <input type="text" id="label_prenom" name="prenom" size="50"/>
            </p>
        </div>
        <div id="footer">
            <p>
            <input type="submit" name="BtnSubmit" id="valid" value="OK!" />
            <input type="reset" name="BtnClear" id="annul" value="Annuler" />
            </p>
        </div>
</form>
<div id="pub">Source trouvée sur : <a href="http://www.FiX-Netze.com">www.FiX-Netze.com</a></div>
</body>
</html>

- CSS (formstyle.css) :

/* Personnalisation de la balise body */

body {
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 0;
}

/* Position de l’ensemble du formulaire */

#catalogue {
  width: 50%;
  margin: auto;
  margin-top: 3px;
  background-color: #FFFFFF;
}

/* Personnalisation de l’en-tête du formulaire */

#formtitle {
  background-color: #0099FF;
  color: #FFFFFF;
  font-size: 1.2em;
  font-weight: bold;
  height: 3em;
  line-height: 3em;
  text-align: center;
  text-transform: uppercase;
}

/* Personnalisation du div CONTENT, pour modifier l’affichage du contenu */

#content {
  background-color: #FFFFFF;
  margin: 0;
  padding: 3px;
}

/* Alignement des champs*/

#content label {
  width: 25%;
  float: left;
  text-align: right;
  line-height: 1.8em;
  padding: 0 0.8em 0 0;
}

/* Espacement des champs */

#content input[type=text] {
  margin-right: 3px;
  border: 1px solid #000000;
}

/* Personnalisation du pied de page (footer) du formulaire */

#footer {
  background-color: #0099FF;
  height: 3em;
  margin: 0;
  padding: 0.8em;
}

/* Personnalisation des boutons de validation du formulaire */

#footer input[type=submit], input[type=reset] {
  float: right;
  margin-right: 1.8em;
}

/* Un peu de pub ! lol */

#pub {
  text-align: center;
  padding: 10px;
}

#pub a {
  font-weight: bolder;
  text-decoration: none;
  color: #000000;
}

#pub a:hover {
  border-bottom: 1px dotted #000000;
  color: #000000;
}

C’est vraiment une solution simple mais efficace… allez, au boulot, c’est à votre tour de développer votre formulaire ! C’est bien parce que je suis sympa… vous pouvez télécharger ma source ici.

Informations utiles (rappel) : Cet article a été publié le Lundi 28 janvier 2008 à 14:44 et est classé dans Developpement. Vous pouvez suivre les réponses reçues par cet article grâce au fil RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre site.
Commentaires
Il y a 5 commentaires pour “Créer un formulaire design uniquement en CSS”
  • Le 30.01.08 à 23:06, nicole de Solesmes dit :

    eh bien je suis épatée
    bravo

  • Le 31.01.08 à 18:18, thebmxeur dit :

    C’est bien pensé … je crois que je vais utiliser quelque chose de plus ou moins similaire maintenant.

  • Le 1.02.08 à 21:26, FiX' dit :

    C’est clair que ça sera mieux que la bidouille qu’on utilisait avant (avec les balises ul) ! :)

  • Le 29.06.08 à 18:21, rgo dit :

    bravo pour ce formulaire, très utile

  • Le 29.06.08 à 18:42, FiX' dit :

    Mais de rien, ça sert à ça un blog : partager ses astuces !

Poster un commentaire

Par sécurité, des informations vous concernant sont stockées (Adresse IP, Type de navigateur etc...) et ne seront pas divulguées à des tiers.