Как сделать современная форма для сайта с помощью Html5 и CSS3

Скачать исходник

Посмотреть пример

Давайте разберемся, о чем именно пойдет речь, так как с технической стороны, в данном уроке я свой упор буду делать на дизайне формы, соответственно основные языки, которые мы будем применять это html5 и CSS3. Почему именно современна форма для сайта, а потому, что я постараюсь сделать её красивой, стильной, и буду использовать современные теги, но давайте переходить непосредственно к делу и уже начнем творить.

Форму я решил сделать не слишком сложную буквально из нескольких полей, чтобы не тратить времени на бесполезную писанину, а показать саму суть. Изначальный вид у нас следующий:

В конце урока посмотрим, что получится, а пока давайте рассмотрим начальный код:

<form action="send.php" method="post">

  <fieldset>

    <label for="FirstName">Ваше имя:</label><br />

    <input type="text" name="FirstName" size="20" /><br />

    <label for="LastName">Фамилия:</label><br />
    <input type="text" name="LastName" size="20" /><br />

    <label for="phone">Телефон:</label><br />

    <input type="text" size="30" name="phone" /><br />

    <label for="email">Адрес электронной почты:</label><br />

    <input type="text" size="30" name="email" /><br />

    <label for="MessageText">Ваш вопрос или предложение:</label><br />

    <textarea rows="15" cols="45" name="MessageText"></textarea><br />

  </fieldset>

  <fieldset>

    <input type="submit" value="Отправить" />

    <input type="reset" value="Сбросить" />

  </fieldset>

</form>

Здесь мы имеем обычную форму для сайта, с полями ввода имени, фамилии, почты, телефона и собственно само сообщение. Что хотелось бы отметить в этой форме я использую теги label и fieldset, для тех кто не знает зачем они нужны я объясню. Fieldset предназначен для группировки элементов формы, он облегчает логическое восприятие вы можете разделить форму как вам удобнее. Тег label устанавливает связь между определенной меткой и формой, делая логическую взаимосвязь, для правильного понимания вашего сайта, но суть не в этом давайте перейдем теперь непосредственно к украшению и стилизации нашей формы. Подключаем таблицу стилей:

<link rel="stylesheet" type="text/css" href="style.css">

И создаем класс в котором мы зададим размер нашей формы:

.myform  {

  Width: 450px;

}

И добавляем в html-код:

<form action="send.php" method="post" class="myform">

В данном примере я задал ширину 450 пикселей, так же не забывайте, что ширину и высоту полей ввода задают параметры rows="15" cols="45" и если они больше ширины формы то поле ввода textarea будет вылезать за приделы формы, поэтому сопоставляйте эти параметры. Так как fieldset по умолчанию создает рамку в 1 пиксель, мы ее можем легко убрать:

.myform fieldset {

  border:0;

}

Для красоты я добавлю фон для формы градиентом синих оттенков, кстати, чтобы не мучиться в интернете большое количество сервисов которые очень удобны и быстро сгенерируют качественный код. Я лично воспользовался этим: http://www.colorzilla.com/gradient-editor/,венный код. Я лично воспользовался этим: получив код, вставляем его в класс .myform

.myform {

…

  background: rgb(240,249,255); /* Old browsers */

	  background: -moz-linear-gradient(top,  rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6-15 */

	  background: -webkit-linear-gradient(top,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10-25,Safari5.1-6 */

	  background: linear-gradient(to bottom,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */

}

Теперь закруглим углы у формы и сделаем их синего цвета, добавив код все тот же класс myform:

.myform {

…

  border-radius: 20px;

  border: 1px solid #3eb5f1;

}

Теперь форма уже стала смотреться намного интереснее, чем изначально, но это еще не все, для красоты добавим картинку на фон, но здесь придется поправить уже существующий код для наложения одного фона на другой собственно особо сложного здесь ни чего нет:

background: url("letter.png") no-repeat right top, rgb(240,249,255); /* Old browsers */

	background: url("letter.png") no-repeat right top, -moz-linear-gradient(top,  rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6-15 */

	background: url("letter.png") no-repeat right top, -webkit-linear-gradient(top,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10-25,Safari5.1-6 */

	background: url("letter.png") no-repeat right top, linear-gradient(to bottom,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */

По сути, мы дописали к каждой строчке путь к картинке фона url("letter.png"), задали ей свойство no-repeat тем самым отключив повтор изображения и расположили его справа вверху с помощью простого позиционирования right top, а дальше через запятую все тот же градиент. Продолжаем работать над формой и пришло время стилизовать кнопки, для этого прописываем новы класс .bottom и в него прописываем новый градиент и обвдочку как на самой форме:

.bottom {

  background: rgb(224,243,250); /* Old browsers */

  background: -moz-linear-gradient(top,  rgba(224,243,250,1) 0%, rgba(216,240,252,1) 50%, rgba(184,226,246,1) 51%, rgba(182,223,253,1) 100%); /* FF3.6-15 */

  background: -webkit-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%); /* Chrome10-25,Safari5.1-6 */

  background: linear-gradient(to bottom,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 ); /* IE6-9 */

  border: 1px solid #3eb5f1;

}

И прописываем класс в html – коде:

<input type="submit" value="Отправить" class="bottom" />
<input type="reset" value="Сбросить" class="bottom" />

Ни чего хитрого, но при этом кнопки получили свой красивый вид, единственное, что давайте их выроним по центру, для этого создадим еще один класс, назовем его center :

.center {

  text-align: center;

}

И в html –коде:

<fieldset class="center">

   <input type="submit" value="Отправить" class="bottom" />

   <input type="reset" value="Сбросить" class="bottom" />

</fieldset>

Для красоты сделаем кнопки высотой 30px так они будут лучше смотреться.

.bottom {

…

  height: 30px;

}

Теперь нам осталось стилизовать поля ввода, сделаем рамку так же синего цвета толщиной в один пиксель, для этого добавляем следующий код в таблицу стилей:

.myform input, textarea {

  border: 1px solid #3eb5f1;

}

Вот собственно и вся хитрость, и на последок, давайте выровняем форму по центру:

….
  margin: 0 auto;
}

Вот и все теперь мы получили следующий результат:

Согласитесь, значительно отличается от того, что было изначально, конечно в плане дизайна возможно сделать и красивее, но моя задача для этого урока была показать суть стилизации форм, а как вы это уже сделаете все зависит от полета вашей фантазии.

HTML5 и CSS3

Научись создавать профессиональные современные сайты на HTML5 и CSS3

Узнать подробности