CSS FORMULAIRE : Style n°1
27 Juin 2008 par Devil Can't Burn
Il existe beaucoup de manière de créer un formulaire pour
son site web. Avec ou sans tables, on a souvent du mal à
créer un formulaire qui soit joli et pratique.
Voici une solution en quelques lignes...
Voici une solution en quelques lignes...
Comme beaucoup de développeur web, j'évite
d'utiliser les tables. Le formulaire sera donc fait en
CSS... sans tables !
J'ai utilisé <label> pour le nom de chaque input et un <span> pour la description courte. Tous les labels et input ont la propriété float:left;.
Le code css vous montre un exemple de présentation. A vous de changer les paramètres pour votre propre mise en page.
Tester le formulaire !
Télécharger le dossier
Le Code html
Créez une page index.html et copier-coller le code suivant après la balise <body><form id="form" name="form" method="post" action="index.html">
<h1>Inscription</h1>
<p>Ceci est un formulaire en CSS sans tables html.</p>
<label>Pseudo
<span class="petit">20 caracteres maximum</span>
</label>
<input type="text" name="pseudo" id="pseudo" />
<label>Email
<span class="petit">Votre email valide</span>
</label>
<input type="text" name="email" id="email" />
<label>Mot de passe
<span class="petit">8 caractères minimum.</span>
</label>
<input type="text" name="pass" id="pass" />
<button type="submit">Inscription</button>
<div class="spacer"></div>
</form>
J'ai utilisé <label> pour le nom de chaque input et un <span> pour la description courte. Tous les labels et input ont la propriété float:left;.
Le code CSS
Copiez le code suivant après la balise <head>.<style type="text/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- Formulaire ----------- */
.formulaire{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- Mise en page ----------- */
#misenpage{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#misenpage h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#misenpage p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#misenpage label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#misenpage .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#misenpage input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#misenpage button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
</style>
Le code css vous montre un exemple de présentation. A vous de changer les paramètres pour votre propre mise en page.
Tester le formulaire !
Télécharger le dossier