Тег <form>

Контейнер формы
  • Категории: Потоковое содержимое
  • Контекст:

    Где ожидается потоковое содержимое.

  • Модель:

    Потоковое содержимое, кроме элемента <form>.

Тег <form> (от англ. "form" - форма) предназначен для создания контейнера формы, внутри которого располагаются все ее поля. Формы являются одним из вариантов взаимодействия с пользователем. В том или ином виде они присутствуют практически на любом сайте:

  • опросы
  • регистрация
  • авторизация пользователей
  • оставление комментариев
  • обратная связь

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

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

Атрибуты

  • Глобальные атрибуты
  • accept-charset - кодировки символов при отправке формы (Windows-1251, UTF-8 и др.)
  • action - URL для отправки формы
  • autocomplete - настройка по умолчанию для автозаполнения элементов формы (on - включено, off - отключено)
  • enctype - тип кодировки данных при отправке формы
  • method - метод HTTP для отправки формы (по умолчанию GET)
  • name - уникальное название формы для доступа через DOM API document.forms
  • novalidate - отключение проверки валидации для формы
  • target - контекст отправки формы

  • Базовая форма

    Используем элемент <form>, чтобы разметить границы формы. Внутрь формы мы поместим одно стандартное текстовое поле, а также кнопку для отправки данных. По умолчанию данные будут отправлены на ту же страницу, где находится сама форма. Мы можем это изменить и задать в атрибуте action другой адрес:

  • Метод отправки

    По умолчанию все данные формы отправляются методом GET - в виде параметров в адресной строке браузера. Мы можем управлять методом отправки, используя соответствующий атрибут method:

    • get - метод GET (по умолчанию)
    • post - метод POST

    При отправке методом пост, все данные передаются в теле запроса и не видны пользователям. Таким способом мы можем отправлять данные любых размеров.

  • Контекст отправки данных

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

    • _self - в той же вкладке (по умолчанию)
    • _blank - в новой вкладке
    • _parent - в родительской вкладке
    • _top - в окне высшего уровня
    • имя окна или фрейма

  • Отправка файлов

    Для отправки файлов через форму используется поле <input> с соответствующим типом file. Сама форма при этом должна иметь атрибут enctype в значении multipart/form-data. В противном случае файл отправлен не будет:

  • Отключение валидации и автозаполнения

    Используя атрибут autocomplete в значениях off или on мы можем управлять автозаполнением формы. А при помощи атрибута novalidate отключить ее автоматическую проверку валидации. Это может быть полезно, если мы хотим реализовать ее сами при помощи JavaScript:

  • Смена кодировки

    По умолчанию все данные формы отправляются в кодировке, установленной для текущего документа. В некоторых случаях нам может понадобиться изменить кодировку отправляемых данных. Например, если наш сервер ожидает получить их в другой кодировке. Для этого мы можем использовать атрибут accept-charset:

Поделитесь данной записью с друзьями