CSS Débutant .com

Faire un formulaire CSS

Compatibilité :

En CSS, certains scripts ne sont pas compatibles avec tous les navigateurs. Voici la liste des navigateurs compatibles :

Les Formulaires et le CSS

Dans la même idée de séparer le code de l'apparence, il est possible, en CSS, de faire un formulaire, sans le mettre en forme avec un tableau.

Nom

Email :

Avis:

Sexe: Homme: Femme:

Passion: Tennis
lire
Basketball

Acceptation des termes?

<form id="myform" class="cssform" action=""> <p><p><br> <label for="user">Name</label><br> <input type="text" id="user" value="" /><br> </p></p> <p><p><br> <label for="emailaddress">Email Address:</label><br> <input type="text" id="emailaddress" value="" /><br> </p></p> <p><p><br> <label for="comments">Feedback:</label><br> <textarea id="comments" rows="5" cols="25"></textarea><br> </p></p> <p><p><br> <label for="comments">Sex:</label><br> Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br /><br> </p></p> <p><p><br> <label for="comments">Hobbies:</label><br> <input type="checkbox" name="hobby" /> Tennis<br /><br> <input type="checkbox" name="hobby" class="threepxfix" /> Reading <br /><br> <input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br /><br> </p></p> <p><p><br> <label for="terms">Agree to Terms?</label><br> <input type="checkbox" id="terms" class="boxes" /><br> </p></p> <p><div style="margin-left: 150px;"><br> <input type="submit" value="Submit" /> <input type="reset" value="reset" /><br> </div></p> <p></form></p>


Sans oublier de mettre dans un fichier "formulaire.css", le code suivant :

<style type="text/css"> .cssform p{ width: 300px; clear: left; margin: 0; padding: 5px 0 8px 0; padding-left: 155px; /*width of left column containing the label elements*/ border-top: 1px dashed gray; height: 1%; } .cssform label{ font-weight: bold; float: left; margin-left: -155px; /*width of left column*/ width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/ } .cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/ width: 180px; } .cssform textarea{ width: 250px; height: 150px; } /*.threepxfix class below: Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents. to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html */ * html .threepxfix{ margin-left: 3px; } </style>

Et voila, le tour est joué :)