Закрыть   X

  •    
  •    
Печать

Форма обратной связи для сайта CSS+HTML

Автор: Алексей Елизаров.

В этом уроке я хочу показать как можно создать форму обратной связи HTML5 с эффектами анимации полей.
Мы будем использовать CSS3 и HTML5 без Java скриптов. Форму обратной связи в действии вы можете посмотреть в демо примере.




Просмотр Скачать

Структура HTML Формы

Каждая строка у нас помещена в DIV контейнер, так гораздо удобнее располагать метки рядом с полем ввода. Вся форма помещена в DIV шириной 660px по центру страницы.

<div id="w">
<h1>Написать письмо !</h1>
<form id="contactform" name="contact" method="post" action="#">
<p class="note"><span class="req">*</span> Поля со звездочкой обязательны для заполнения</p>
<div class="row">
<label for="name">Ваше Имя <span class="req">*</span></label>
<input type="text" name="name" id="name" class="txt" tabindex="1" placeholder="Стив Джобс" required>
</div>

<div class="row">
<label for="email">E-mail Адрес <span class="req">*</span></label>
<input type="email" name="email" id="email" class="txt" tabindex="2" placeholder=" Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. " required>
</div>

<div class="row">
<label for="subject">Тема <span class="req">*</span></label>
<input type="text" name="subject" id="subject" class="txt" tabindex="3" placeholder="Тема письма" required>
</div>

<div class="row">
<label for="message">Сообщение <span class="req">*</span></label>
<textarea name="message" id="message" class="txtarea" tabindex="4" required></textarea>
</div>

<div class="center">
<input type="submit" id="submitbtn" name="submitbtn" tabindex="5" value="Отправить Сообщение">
</div>
</form>
</div>

Структура CSS Формы

Вся анимация выполнена с новыми свойствами CSS 3. Все фоны выполнены обыкновенными градиентами. Обратите внимание на анимацию кнопки. Тени при наведении тоже выполнена на CSS3.

/* form styles */
form .row {
display: block;
padding: 7px 8px;
margin-bottom: 7px;
}
form .row:hover {
background: #f1f7fa;
}

form label {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
width: 120px;
padding: 6px 0;
color: #464646;
vertical-align: top;
}
form .req { color: #ca5354; }

form .note {
font-size: 1.2em;
line-height: 1.33em;
font-weight: normal;
padding: 2px 7px;
margin-bottom: 10px;
}

form input:focus, form textarea:focus { outline: none; }

/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #aaafbd; font-style: italic; } /* Internet Explorer 10+ */

form .txt {
display: inline-block;
padding: 8px 9px;
padding-right: 30px;
width: 240px;
font-family: 'Oxygen', sans-serif;
font-size: 1.35em;
font-weight: normal;
color: #898989;
}

В заключении хотелось сказать, что с развитием CSS3 и HTML5 создание формы обратной связи с анимацией, тенями и т.д. стало не такой уж сложной задачей. Надеюсь данный урок поможет Вам в создании собственных форм для Вашего сайта.

© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки