Зачем нужны формы в html

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

Здесь action определяет URL, куда будут отправлены данные формы, а method указывает метод отправки данных: GET или POST .

Атрибуты тега :

action — адрес, на который будут отправлены данные формы.
method — метод отправки данных: GET или POST .
target — окно или фрейм, в котором будет открыт результат отправки данных формы.
name — имя формы, которое используется для её идентификации при отправке данных на сервер.
autocomplete — может ли браузер запоминать введённые пользователем данные для автозаполнения.
enctype — способ кодирования данных формы при отправке на сервер.
novalidate — указывает, что данные формы не нужно проверять на корректность перед отправкой на сервер.

Пример использования атрибутов тега :

Примеры использования

Этот код создаёт форму для входа на сайт с полями для ввода имени пользователя и пароля. Данные будут отправлены на сервер по адресу /login методом POST .

 Ваше имя:  
Email:  
Сообщение:

Здесь мы создаём форму обратной связи с полями для ввода имени, электронной почты и сообщения. Данные будут отправлены на сервер по адресу /feedback методом POST .

 Выберите цвет:  
Выберите размер: Маленький Средний Большой

Этот пример создаёт форму с выпадающим списком цветов и группой радиокнопок для выбора размера. Данные будут отправлены на сервер по адресу /options методом GET .

Для чего использовать тег

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

Глобальные атрибуты

Ограничения

Нюансы

Не рекомендуется использовать вложенные формы.
Если использовать метод GET , параметры формы будут отображены в адресной строке браузера. Это небезопасно, так как данные формы можно легко изменить.
Для отправки файлов на сервер необходимо использовать атрибут enctype=»multipart/form-data» .

👉 Другие теги для создания форм

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Зачем нужны формы в html

Элемент HTML form ( ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.

Можно использовать :valid (en-US) и :invalid (en-US) CSS псевдоклассы для стилизации элемента, в зависимости от того, валиден или нет конкретный элемент elements внутри формы.

Контекст Использования

Категория содержимого	Flow content (en-US)
Разрешённое содержимое	Flow content (en-US) , но не содержащий элементов
Пропуск тега	Нет. И открывающий и закрывающий тег должны быть.
Нормативный документ	HTML5, section 4.10.3 (HTML4.01, section 17.3)

Атрибуты

Как и все HTML-элементы, этот элемент поддерживает глобальные атрибуты (en-US) .

Список типов содержимого, разделённых запятой, которые принимает сервер.

Примечание: Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте accept атрибут заданного элемента.

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

URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута formaction на или элементе.

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

off : Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.
on : Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.

**Примечание:**Если вы установили значение off для autocomplete атрибута формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение off для autocomplete каждого элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите Google Chrome notes.

Когда значение атрибута method равно post , атрибут — MIME тип содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:

application/x-www-form-urlencoded : Значение по умолчанию, если атрибут не задан.
multipart/form-data : Используйте это значение, если пользуетесь элементом атрибутом type установленным в «file».
text/plain (HTML5) Это значение может быть переписано атрибутом formenctype на элементе или .

HTTP (en-US) метод, который браузер использует, для отправки формы. Возможные значения:

post : Соответствует HTTP POST методу ; данные из формы включаются в тело формы и посылаются на сервер.
get : Соответствует GET методу; данные из формы добавляются к URI атрибута action , их разделяет ‘?’, и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.Это значение может быть переписано атрибутом formmethod на или элементе.

Имя формы. В HTML 4 его использование запрещено ( id следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.

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

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

_self : Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.
_blank : Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.
_parent : Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as _self .
_top : HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as _self .HTML5: Это значение может быть перезаписано formtarget атрибутом на или элементе.

DOM_interface

Этот элемент реализует HTMLFormElement интерфейс.

Примеры

form action=""> label for="GET-name">Name:label> input id="GET-name" type="text" name="name"> input type="submit" value="Save"> form> form action="" method="post"> label for="POST-name">Name:label> input id="POST-name" type="text" name="name"> input type="submit" value="Save"> form> form action="" method="post"> fieldset> legend>Titlelegend> input type="radio" name="radio" id="radio"> label for="radio">Click melabel> fieldset> form>

Совместимость браузера

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 17 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник