Незнаю как поможет тебе это.но думаю если постараеся и переделаешь под себя,то выйдет нормально. Нашел для тебя форму обратной связи.смысл понятен и тебе останеться переделать и добавить под свой вкус.
Самые часто распространенные элементы форм уже добавлены для того, чтоб Вы смогли быстро начать пользоваться этой формой. Структурно CSS форма сделана из двух колонок: слева - описание полей, справа - колонка с самими полями. Обе колонки выровнены налево и помещены в ряд, который выравнивает высоту колонок.
Демо находиться
здесь.
CSS (вставьте его в свою таблицу стилей или между тэгами <head></head>, заключив в тэги <style></style>):
<
Код:
style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.feedbackform{
padding: 5px;
}
div.fieldwrapper{
width: 550px;
overflow: hidden;
padding: 5px 0;
}
div.fieldwrapper label.styled{
float: left;
width: 150px;
text-transform: uppercase;
border-bottom: 1px solid red;
margin-right: 15px;
}
div.fieldwrapper div.thefield{
float: left;
margin-bottom: 10px;
}
div.fieldwrapper div.thefield input[type="text"]{
width: 250px;
}
div.fieldwrapper div.thefield textarea{
width: 300px;
height: 150px;
}
div.buttonsdiv{
margin-top: 5px;
}
div.buttonsdiv input{
width: 80px;
background: #e1dfe0;
}
</style>
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>