guiderdoni.net

Bloc notes : spip, css, xhtml, web, standards, mac ...

Accueil > web > Un formulaire en pur CSS

Articles de cette rubrique

Articles

publie le jeudi 29 juin 2006 par Alexandra

Un formulaire en pur CSS

Un formulaire sans tableau et en pur CSS est disponible sur le site de dynamicdrive.

URL : http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/

- Dans la CSS :

<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>

- Dans le html :

<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<p>
<label for="comments">Sex:</label>
Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />
</p>

<p>
<label for="comments">Hobbies:</label>
<input type="checkbox" name="hobby" /> Tennis<br />
<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
</p>

<p>
<label for="terms">Agree to Terms?</label>
<input type="checkbox" id="terms" class="boxes" />
</p>

<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="reset" />
</div>

</form>

Pour voir le résultat à l’œuvre, cliquez-ici
http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/

Forum

Répondre à cet article

3 commentaires

Un formulaire en pur CSS

Le lien du résultat pour le formulaire est mort....
pas très sérieux

6 juin 2007, par jyve - repondre message

Mais si, le lien fonctionne et cet exposé est très utile. Merci.

13 mars 2009 - repondre message

Un formulaire en pur CSS

clair et efficace

19 juin 2008 - repondre message
2005-2017 - Contenu en GPL http://www.guiderdoni.net - Site réalisé avec SPIP 
rechercher - plan du site - prive - alexandra.guiderdoni@gmail.com
CSS - XHTML - squelette