Верстка форм. Пример верстки формы обратной связи

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


Демо

Содержание статьи

  1. Быстрый старт
  2. Форма обратной связи
  3. Особенности верстки элементов формы

Последнее обновление статьи — .

Быстрый старт

Для создания формы используется тег <form>, имеющий обязательный атрибут action, который содержит адрес скрипта, выполняющего обработку формы. Также сюда можно задать атрибут method для обработки формы методом GET (по умолчанию) или POST и атрибут name, который впоследствии будет служить для обращения к форме посредством JS/PHP. Таким образом, наша минимальная разметка будет выглядеть так:

<form action="#" name="user-form">
  ...
</form>

Попробуем добавить поля для заполнения имени пользователя, электронной почты и кнопку отправки формы:

<form action="#" name="user-form">
  <label for="user-name">Ваше имя</label>
  <input type="text" id="user-name" name="user-name"/>
  <label for="email">Email</label>
  <input type="email" id="email" name="email"/>
  <input type="submit" value="Отправить"/>
</form>

Для создания строк чаще всего используются теги <div>, в более сложных формах для стилизации к ним привязывается класс:

<form action="#" name="user-form">
  <div>
    <label for="user-name">Ваше имя</label>
    <input type="text" id="user-name" name="user-name"/>
  </div>
  <div>
    <label for="email">Email</label>
    <input type="mail" id="email"e name="email"/>
  </div>
  <div>
    <input type="submit" value="Отправить"/>
  </div>
</form>

Можно использовать вариант со списком определений, ненумерованным списком или таблицей, что семантически будет тоже вполне корректно:

  1. Поля формы выстроены с помощью списка определений:
    <form action="#" name="user-form">
      <dl>
        <dt>
          <label for="user-name">Ваше имя</label>
        </dt>
        <dd>
          <input type="text" id="user-name" name="user-name" value=""/>
        </dd>
      </dl>
    </form>
    
  2. Вариант ненумерованного списка:
    <form action="#" name="user-form">
    <ul>
      <li>
        <label for="user-name">Ваше имя</label>
      </li>
      <li>
        <input type="text" id="user-name" name="user-name" value=""/>
      </li>
    </ul>
    </form>
    
  3. Таблица в качестве разметки:
    <form action="#" name="user-form">
      <table>
        <tr>
          <td>
            <label for="user-name">Ваше имя</label>
          </td>
          <td>
            <input type="text" id="user-name" name="user-name" value=""/>
          </td>
        </tr>
      </table>
    </form>
    

Обратите внимание на то, что мы также задаем атрибут name для всех полей, чтобы потом получать доступ к ним с помощью сценариев. name должен быть уникален и желательно присвоить ему тоже самое значение, что и для id. Также мы явно задаем пустое значение value для того чтобы застраховаться от ошибок в браузерах.

Итак, вот что мы имеем на данный момент, пока без оформления CSS:

Скриншот формы 1
Простая форма

Форма обратной связи

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

Дизайн нашей формы
Дизайн формы

Как видите, мы добавили сюда возможность выбора опции из списка с помощью тегов <select> и <option> и возможность ввода сообщения пользователя <textarea>. Для создания двух колонок используем дополнительные теги <div> с обтеканием и теперь разметка будет такой:

<section class="wrap-form">
  <h2>Обратная связь</h2>
  <form action="#" class="user-form">
    <div class="wrap-form-element">
      <div>
        <label for="user-name">Ваше имя<sup>*</sup></label>
        <input type="text" id="user-name" name="user-name" class="form-element"
        placeholder="user" value="" required/>
      </div>
      <div>
        <label for="email">Email<sup>*</sup></label>
        <input type="email" id="email" name="email" class="form-element"
        placeholder="example@example.com" value="" required/>
      </div>
      <div>
        <label for="choice">Выберите опцию</label>
        <select id="choice" name="choice" class="form-element">
          <option value="Опция 1">Опция 1</option>
          <option value="Опция 2">Опция 2</option>
          <option value="Опция 3">Опция 3</option>
        </select>
      </div>
    </div>
    <div class="wrap-message">
      <label for="message">Сообщение</label>
      <textarea id="message" name="message" class="form-element" placeholder="текст сообщения"></textarea>
    </div>
    <div class="wrap-submit-button">
      <input type="submit" id="submit-form" name="submit-form" class="submit-button" value="Отправить"/>
    </div>
  </form>
</section>

В коде видно, что используются возможности HTML5, такие как тип поля email, атрибуты placeholder и required (они позволяют обойтись без валидации формы на JS) — их мы рассмотрим чуть позже. Для старых браузеров мы позволим частичное graceful degradation, например опустим текстовые подсказки в полях (хотя их можно реализовать с помощью jQuery и плагинов), а проверку введенных данных сделаем с помощью JS и PHP. Для поддержки IE ниже 9-ой версий CSS3 свойств подключим скрипт PIE.

Валидация формы на HTML5

Давайте добавим валидацию нашей формочке. С HTML5 реализовать это достаточно просто, поэтому рассмотрим именно этот вариант.

Например, сделаем поле обязательным для заполнения.

<input type="text" name="user-name" placeholder="Введите имя" value="" required>

Как видите, был добавлен всего лишь один атрибут required. Теперь при попытке отправки формы с пустым полем появится уведомление:

Сообщение в браузере Firefox
Сообщение в браузере Firefox

Внешний вид сообщения различается в браузерах и к сожалению не изменяется.

Также для поля ввода электронной почты мы можем указать тип email:

<input type="email" value="" required>

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

Валидация поля email
Валидация поля email

Аналогичная ситуация с полями url, date и number:

<input type="url" value="" required>
Валидация поля URL
Валидация поля URL

Все очень легко, без скриптов на JS/PHP.

Валидация в HTML5 работает по умолчанию, но ее возможно и отключить — добавим элементу <form> атрибут novalidate:

<form action="#" novalidate>
  ...
</form>

Особенности верстки элементов формы

textarea

В браузерах на движке webkit можно изменять размер <textarea>, что бывает довольно удобно. Но очень часто это свойство ломает дизайн, поэтому приходится применять свойство resize: none для запрета изменения размера. Также возможно разрешить полю растягиваться только по горизонтали или вертикали.
Посмотреть пример (для Safari и Chrome)

IE для <textarea> добавляет полосу прокрутки, чтобы ее убрать, необходимо прописать overflow: auto.

Подсветка полей в браузерах Chrome, Safari

При фокусе на полях в браузерах Chrome, Safari они начинают подсвечиваться. Чтобы убрать эту подсветку, нужно прописать такой CSS-код:

input, textarea {
  outline: none;
}

Пунктирная рамка в Firefox

FF при фокусе на некоторые поля выделяет их пунктирной рамкой, что смотрится не всегда красиво. Для того чтобы их убрать, напишем такие стили:

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
  border: none;
}

Конечно желательно заменить отсутствие пунктирной рамки другим эквивалентом — для удобства пользователя.

Убираем кнопку очистки текста и отображения пароля в IE10

IE10 по умолчанию для текстовых полей добавляет кнопку очистки текста, а для полей ввода пароля — кнопку отображения пароля. Обе эти функции очень полезны, однако иногда могут портить задумку дизайнера. К счастью, убрать их очень легко, этот небольшой сниппет избавит вас от данной особенности браузера:

::-ms-clear {
  display: none;
}

Нестандартные элементы форм

Стилизация элементов форм рассмотрена в отдельных статьях: чекбоксы, радиокнопки.

Ресурсы по теме

Рейтинг статьи

Похожие статьи

Комментарии читателей

  1. Подскажите, как настроить форму обратной связи? Отправляются сообщения не известно куда и кому?

  2. Роман:

    Простите, а как мне это все скопировать и написать, чтобы у меня форма заработала? Мне нужно просто текстовый документ переименовать во что-то и внутрь текст сохранить? Или какие-то файлы дополнительные тоже нужны?

  3. Julia:

    Как у Вас получилось, что текст по умолчанию в полях формы имеет серый цвет, а текст, вводимый пользователем- черный? Какое свойство нужно задать?

    • Julia, так вы бы посмотрели Firebug’ом. Атрибут placeholder в поле задает изначальную подсказку, по умолчанию она серого цвета, а вводимый текст изменяется свойством color — вот и весь секрет

  4. Вадим, а ты как выводишь в тексте код в таких прикольных блоках?

  5. Ну вообще-то Вы немного плаваете в технологиях. Во-первых, к атрибуту формы name нельзя обратиться из PHP скрипта. Во-вторых, атрибут поля name не обязательно должен иметь то же значение, что и id поля. Ну а в целом, статья неплохая!

    • Иван, согласен, атрибут поля name может иметь и другое значение, однако одинаковые значения id и name все-таки удобнее. Насчет обращения из PHP — да, согласен, поправил:)

Добавить комментарий