CSS sans tableaux sous forme d'entreprise
Ce modèle est un élégant tableless forme CSS avec un look résolument d'entreprise et se sentent. Les éléments forme la plus couramment utilisée avec les légendes correspondantes sont ajoutées pour vous lever et aller vite. Structurellement le formulaire CSS est composé de deux "colonnes" - une gauche stylisée "légende" colonne, plus une colonne DIV droit enfermant le champ de formulaire réel. Les deux colonnes sont flottait "gauche" et ensuite mis dans un «rangée» DIV qui égalise hauteurs des deux colonnes «divergentes de sorte que le plus haut gagne en.
Démo:
Le code css
<style type="text/css">
.feedbackform{
padding: 5px;
}
div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
width: 550px; /*width of form rows*/
overflow: hidden;
padding: 5px 0;
}
div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 150px; /*width of label (left column)*/
text-transform: uppercase;
border-bottom: 1px solid red;
margin-right: 15px; /*spacing with right column*/
}
div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
float: left;
margin-bottom: 10px; /* space following the field */
}
div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: 250px;
}
div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
width: 300px;
height: 150px;
}
div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; /*space above buttonsdiv*/
}
div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
width: 80px;
background: #e1dfe0;
}
</style>
Le code html
<form class="feedbackform">
<div class="fieldwrapper">
<label for="username" class="styled">Your Name:</label>
<div class="thefield">
<input type="text" id="username" value="" size="30" />
</div>
</div>
<div class="fieldwrapper">
<label for="email" class="styled">Email address:</label>
<div class="thefield">
<input type="text" id="email" value="" size="30" /><br />
<span style="font-size: 80%">*Note: Please make sure it's correctly entered!</span>
</div>
</div>
<div class="fieldwrapper">
<label for="somehighschool" class="styled">education:</label>
<div class="thefield">
<ul style="margin-top:0;">
<li><input type="radio" id="somehighschool" name="education" value=""/> <label for="somehighschool">Some Highschool</label></li>
<li><input type="radio" id="highschool" name="education" value="" /> <label for="highschool">Highschool graduate</label></li>
<li><input type="radio" id="somecollege" name="education" value="" /> <label for="somecollege">Some college</label></li>
<li><input type="radio" id="vocation" name="education" value="" /> <label for="vocation">Vocation school</label></li>
<li><input type="radio" id="college" name="education" value="" /> <label for="college">College graduate or higher</label></li>
</ul>
</div>
</div>
<div class="fieldwrapper">
<label for="html" class="styled">Skills:</label>
<div class="thefield">
<ul style="margin-top:0;">
<li><input type="checkbox" id="html" name="skills" value="" /> <label for="html">HTML/ CSS</label></li>
<li><input type="checkbox" id="javascript" name="skills" value=""/> <label for="javascript">JavaScript</label></li>
<li><input type="checkbox" id="ajax" name="skills" value="" /> <label for="ajax">Ajax and XML</label></li>
<li><input type="checkbox" id="php" name="skills" value="" /> <label for="php">PHP and Database</label></li>
</ul>
<span style="font-size: 80%">* Please check all that apply.</span>
</div>
</div>
<div class="fieldwrapper">
<label for="agegroup" class="styled">Department:</label>
<div class="thefield">
<select id="agegroup">
<option value="2.1">HR department</option>
<option value="3">Sales</option>
<option value="4.1">Customer Service/ Support</option>
<option value="5.2">Accounting</option>
</select>
</div>
</div>
<div class="fieldwrapper">
<label for="about" class="styled">About yourself:</label>
<div class="thefield">
<textarea id="about"></textarea>
</div>
</div>
<div class="buttonsdiv">
<input type="submit" value="Submit" style="margin-left: 150px;" /> <input type="reset" value="Reset" />
</div>
</form>
0 commentaires:
Enregistrer un commentaire