Ваша первая HTML форма

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

Необходимые знания: Базовое представление о компьютерах и базовое понимание HTML.
Цель: Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.

Что такое Веб-форма?

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

Веб-формы — их также часто называют HTML-формы — состоят из одного или нескольких элементов управления форм (иногда их также называют виджетами) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радио-баттоны, большинство из которых создаются через html-элемент <input>, однако есть и другие элементы, о которых тоже стоит узнать.

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

Проектирование формы

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

Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:

В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.

The form to build, roughly sketch

Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.

Активное обучение: Реализация HTML-формы

Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: <form>, <label>, <input>, <textarea> и <button>.

Прежде, чем продолжить, скопируйте простой HTML-шаблон — вы будете создавать свою форму внутри него.

Элемент <form>

Создание форм начинается с элемента <form>:

<form action="/my-handling-form-page" method="post">

</form>

Этот элемент формально определяет форму. Он является элементом-контейнером, как HTML-элементы <div> или <p>, но при этом он поддерживает некоторые специфические атрибуты для настройки поведения формы. Все атрибуты являются опциональными, но в стандартной практике принято указывать атрибуты action и method:

  • Атрибут action определяет адрес, куда должны быть посланы данные после отправки формы.
  • Атрибут method указывает, какой HTTP-метод будет использован при передаче данных (это может быть "get" или "post").

Примечание: Мы детальнее разберём работу этих атрибутов далее в статье Отправка данных формы.

Теперь добавьте указанный выше код с элементом <form> внутрь тега <body> в вашем HTML.

Элементы <label>, <input> и <textarea>

Наша контактная форма несложная: часть, в которую будут вводиться данные, состоит из трёх текстовых полей, каждое их которых связано с HTML-элементом <label>:

  • Поле ввода для имени — single-line text field
  • Поле ввода для e-mail — input of type email: однострочное текстовое поле, которое принимает только e-mail адреса.
  • Поле ввода для сообщения — <textarea>, многострочное текстовое поле.

В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name">
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_mail">
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

Добавьте в вашу форму код, чтобы она выглядела так же, как форма выше.

Здесь элементы <li> используются для структурирования кода и облегчения стилизации (будет разобрано далее в статье). Для доступности и удобства использования мы указали определённый текст-подсказку для каждого элемента управления. Обратите внимание на использование атрибута for на каждом элементе <label>, который принимает в качестве значение id элемента управления формы, с которым он связан — этот подход позволяет привязать тексты-подсказки к форме.

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

В HTML-элементе <input> самым важным атрибутом является атрибут type. Этот атрибут чрезвычайно важен, потому что он определяет внешний вид и поведение элемента <input>. Вы найдёте больше информации об этом далее в статье Стандартные виджеты форм.

  • В нашем простом примере мы используем <input/text> для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.
  • Для второго поля ввода мы используем тип <input/email>, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введёные пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье Валидация формы.

Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <input> и <textarea></textarea>. Это одна из странностей HTML. Тег <input> — это пустой элемент, то есть он не нуждается в закрывающем теге.  <textarea> — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента <input> вам необходимо использовать атрибут value следующим образом:

<input type="text" value="по умолчанию в этом элементе находится этот текст" />

Если вы хотите определить значение по умолчанию для HTML-элемента <textarea>, вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:

<textarea>
по умолчанию в этом элементе находится этот текст
</textarea>

Элемент <button>

Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или "представлять" информацию после заполнения формы. Это делается с помощью HTML-элемента <button>. Необходимо добавить следующий код перед закрывающим тегом </form>:

<li class="button">
  <button type="submit">Send your message</button>
</li>

HTML-элемент <button> также принимает атрибут type, который может быть равен одному из трёх значений: submit, reset или button.

  • Клик по кнопке submit (значение по умолчанию) отправляет данные из формы на страницу, определённую в атрибуте action элемента <form>.
  • Клик по кнопке reset сбрасывает значения всех элементов управления формы к их начальному значению. С точки зрения UX, это считается плохой практикой.
  • Клик по кнопке button не делает ничего! Звучит странно, но на самом деле это очень удобно использовать для создания собственных кнопок — вы можете определить их поведение через JavaScript.

Примечание: Вы также можете использовать HTML-элемент <input> с соответствующим атрибутом type , чтобы создать кнопку:  <input type="submit">. Главным преимуществом HTML-элемента <button> в сравнении с элементом <input> заключается в том, что <input> может принимать в себя только простой текст, в то время как <button> позволяет использовать весь HTML для создания более стилизованного текста внутри кнопки.

Базовая стилизация формы

Теперь после того, как вы закончили писать HTML-код формы, сохраните его и откройте в браузере. Вы увидите, что на данный момент форма выглядит достаточно не красиво.

Примечание: Если вам кажется, что ваш HTML-код работает не правильно, попробуйте сравнить его с нашим примером — посмотрите first-form.html (также можно посмотреть код вживую).

Красиво стилизовать формы достаточно сложно. Эта тема выходит за рамки этой статьи, поэтому на данный момент мы просто добавим некоторый CSS-код для приведения формы в нормальный вид.

Сначала необходимо добавить HTML-элемент <style> на вашу страницу внутрь тега head в HTML. Это должно выглядить следущим образом:

<style>

</style>

Внутри тега стилей добавьте следующий код:

form {
  /* Расположим форму по центру страницы */
  margin: 0 auto;
  width: 400px;
  /* Определим контур формы */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Определим размер и выравнивание */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, 
textarea {
  /* Убедимся, что все поля имеют одинаковые настройки шрифта
     По умолчанию в textarea используется моноширинный шрифт */
  font: 1em sans-serif;

  /* Определим размер полей */
  width: 300px;
  box-sizing: border-box;

  /* Стилизуем границы полей */
  border: 1px solid #999;
}

input:focus, 
textarea:focus {
  /* Дополнительная подсветка для элементов в фокусе */
  border-color: #000;
}

textarea {
  /* Выровним многострочные текстовые поля с их текстами-подсказками */
  vertical-align: top;

  /* Предоставим пространство для ввода текста */
  height: 5em;
}

.button {
  /* Выровним кнопки с их текстами-подсказками */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* Этот дополнительный внешний отступ примерно равен расстоянию
     между текстами-подсказками и текстовыми полями */
  margin-left: .5em;
}

Теперь наша форма выглядит намного лучше.

Примечание: Вы можете найти код на GitHub в first-form-styled.html (также можно посмотреть код вживую).

Отправка данных на сервер

Последняя и, наверно, самое сложное — это обработка данных формы на стороне сервера. HTML-элемент <form> определяет куда и каким способом отправить данные благодаря атрибутам action и method.

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

Чтобы проименовать данные, вам необходимо использовать атрибут name на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:

<form action="/my-handling-form-page" method="post"> 
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  ...

В нашем примере форма отправит три куска данных с именами "user_name", "user_email" и "user_message". Эти данные будут отправлены на URL "/my-handling-form-page" через метод HTTP POST.

На стороне сервера скрипт, расположенный на URL "/my-handling-form-page" получит данные в виде списка из 3 элементов вида ключ/значение, содержащихся в HTTP-запросе. То, как скрипт будет обрабатывать данные, зависит от вас. Каждый язык серверного программирования (PHP, Python, Ruby, Java, C# и т.д.) имеет свой механизм обработки данных из формы. Эта тема выходит за рамки данной статьи, если вы хотите углубиться в неё, мы привели несколько примеров далее в статье Отправка данных формы.

Заключение

Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так: 

Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.

В этом разделе

Дополнительные темы