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