WebCssDesign

Pour rester fidèle aux normes du W3C est créer des formulaires en Css puret sans un enchevêtrement de tableaux, je vous propose un exemple parmi tant d’autres sur ce qu’il faut faire pour respecter les normes. Et les possibilités pour rendre le formulaire plus attrayant sont plus grandes avec du Css.

Voici le code html:

<form action=”#” method=”get”>
<fieldset>
<legend>Mon Formulaire</legend>
<p><label for=”nom”> Nom</label> <input type=”text” id=”nom” /></p>
<p><label for=”prenom”>Prénom</label> <input type=”text” id=”prenom” /></p>
<p><label for=”email”>E-mail</label> <input type=”text” id=”email” /><br /></p>
<p>
<label for=”comments”>Commentaires:</label>
<textarea id=”comments” rows=”5″ cols=”18″></textarea>
</p>
<p class=”submit”><input type=”submit” value=”Valider” /></p>
</fieldset>
</form>

et voici le Css:

label
{
width: 9em;
float: left;
text-align: left;
margin-right: 0.5em;
display: block;
color: #990000;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

.submit input{margin-left: 4.5em;}
input
{
color: #781351;
background: #CCCCCC;
border: 1px solid #781351;
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9;
}
fieldset
{
border: 1px solid #781351;
width: 20em;
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px;
}
.textarea{
width: 250px;
height: 150px;
}

Exemple:

Popularité : 3% [?]

Catégories: Css
Tags: Css, formulaire css