HTML тег <form>

Тег <form> используется для создания формы на веб-странице. Основная задача HTML формы - принять информацию от пользователя и отправить ее на сервер для обработки.

Для отправки информации на сервер используется кнопка submit. Если этой кнопки нет, то форму можно отправить на сервер, нажав клавишу Enter.

Синтаксис

Элемент <form> парный, содержимое размещается между открывающим (<form>) и закрывающим (</form>) тегами.

Элемент <form> содержит другие HTML теги, которые определяют способы ввода данных.

  • Тег <input> определяет пользовательское поле для ввода информации.
  • Тег <textarea> определяет поле формы для создания области многострочного ввода.
  • Тег <button> используется для размещения кнопки внутри формы.
  • Тег <select> устанавливает элемент управления для создания раскрывающегося (выпадающего) списка.
  • Тег <option> определяет пункты раскрывающегося списка, установленного тегом <select>.
  • Тег <optgroup> используется для группировки связанных данных в раскрывающемся списке, установленного тегом <form>.
  • Тег <label> устанавливает текстовую метку для элемента <input>.
  • Тег <legend> определяет заголовок для элемента <fieldset>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
       <form action="server-script-url-here" method="GET or POST" >
            <label for="fname">Имя</label>
            <input type="text" name="FirstName" id="fname" value="Арина"/><br/>
            <label for="lname">Фамилия</label> 
            <input type="text" name="LastName"id="lname" value="Петрова"/><br/>
            <input type="submit" value="Отправить"/>
      </form>
   </body>
</html>

Результат

Результат

Атрибуты

Атрибут Значение Описание
accept file_type Определяет разделенный запятыми список типов файлов, которые принимает сервер (Список может быть представлен через загрузку файлов).
Не поддерживается в HTML5.
accept-charset character_set Определяет кодировку, в которой сервер может принимать и обрабатывать данные.
action URL Указывает адрес, куда отправляются данные из заполненной формы, и где они будут обрабатываться.
autocomplete on
off
Включает/выключает автозаполнение полей формы. По умолчанию значение включено.
enctype application/x-www-form-urlencoded multipart/form-data text/plain Определяет способ кодирования данных формы при их отправке. (Значение по умолчанию application/x-www-form-urlencoded). (Используется только при методе POST).
method
Определяет HTTP метод отправки данных формы. (по умолчанию используется метод GET)
get -передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака и разделяются между собой амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya)
post - браузер устанавливает связь с сервером и посылает данные для обработки.
name text Определяет имя формы.
novalidate novalidate Устанавливает, что данные введенные в форму не будут проверяться перед отправкой.
target
Определяет, где показать ответ, полученный после отправки формы
_blank -показывает в новом окне.
_self -показывает в текущем окне.
_parent - показывает в родительском фрейме.
_top - открывает во всю ширину окна.
framename - открывает в iframe (имя должно быть указано в качестве значения

Тег <form> поддерживает глобальные атрибуты и атрибуты событий.

Browser support




Related articles