CSS sans tableaux FormulaireC'est une forme tableless CSS
que vous pouvez utiliser comme modèle pour la mise en œuvre de votre propre forme légère. Il utilise une combinaison de marges flotteur et négatif pour créer une mise en page à deux colonnes pour la forme. Un problème avec le formulaire est IE6 de trois bug jogging pixel , qui est abordé dans la démo manuellement, en compensant les cases jogging avec une marge supplémentaire.Vous pouvez appliquer une correction plus poussée, mais il va augmenter la taille du code. IE7 ne souffre pas de bug 3 pixels.
Démo:
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
<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>
<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>
0 commentaires:
Enregistrer un commentaire