Создаем форму обратной связи без таблиц

В этом уроке мы будем делать элегантный безтабличный шаблон формы на CSS, выдержанный в корпоративном стиле. Самые часто распространенные элементы форм уже добавлены для того, чтоб Вы смогли быстро начать пользоваться этой формой. Структурно 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>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.dynamicdrive.com
Перевел: Максим Шкурупий
Урок создан: 16 Марта 2009
Просмотров: 44727
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 16 Марта 2009 22:44
    Дмитрий
    Демо не работает.
  • 16 Марта 2009 22:55
    Евгений
    Исправил
  • 19 Мая 2010 06:36
    Андрей
    Спасибо за форму! Как прикрепить обработчик к этой форме??? Заранее благодарю!
  • 14 Февраля 2011 01:58
    newart21
    Не могу вписать свой e-mail (куда вписывать)? Пока, наверно из-за этого, не работает
    • 14 Мая 2011 13:45
      BFM174
      action="твойобработчик.php"
  • 12 Августа 2011 11:05
    Romtalk
    Привет всем, ребята подскажите как передавать в обработчик "радиокнопки" и "чекбоксы". А если есть обработчик именно для етой формы буду очень рад. Спасибо большое!
  • 23 Ноября 2012 18:28
    mosalev
    Блин, отличная форма. Если бы еще был php - самый полезный урок на сайте был бы. Автор, займись, пожалуйста
  • 30 Апреля 2013 22:41
    Pplacebo
    рабочий обработчик бы кто написал под эту форму
^ Наверх ^