Как создать HTML-форму (объяснение примеров)

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

Структура HTML-формы

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

сюда идут элементы ввода

Входные элементы

Текстовые поля

Текстовые поля создаются с помощью тега с атрибутом тип наложенный текст. Например:

Имя:




Телефон

Элемент используется для полей ввода номера телефона.

Телефон:


Дата

Элемент используется для выбора даты.

Дата рождения:


Пароль

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

Пароль:


Архив

Элемент используется, чтобы позволить пользователю выбрать файл из своей локальной файловой системы.

Загрузить файл:


Флажок

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

Я принимаю правила и условия

Радио

Элемент используется для полей ввода, которые позволяют пользователю выбрать один вариант из набора параметров.

Пол:

Мужчина

Женщины

Число

Элемент используется для числовых полей ввода.

Количество:


Диапазон

Элемент используется для полей ввода, которые должны содержать значение из диапазона значений.

Объем:




Кнопки

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

Имя:




Обработка ввода формы

При нажатии кнопки отправки данные формы отправляются на обработку. Это делается одним из двух методов: GET или POST, которые указываются с помощью атрибута метод На этикетке .

ПОЛУЧИТЬ метод

Метод GET отправляет данные формы как часть URL-адреса. Это полезно для таких вещей, как поиск, где данные формы не являются конфиденциальными. Однако этот метод имеет ограничения по длине передаваемых данных.

сюда идут элементы ввода

POST-метод

Метод POST отправляет данные формы отдельно от URL-адреса. Это более безопасно и может обрабатывать гораздо больший объем данных, поэтому он используется для таких вещей, как отправка контактов или форм входа в систему.

сюда идут элементы ввода

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

Пример HTML-формы со всеми элементами 

Вот форма, в которой используются все элементы, которые мы рассмотрели в этой статье:

Форма регистрации

Имя:



Фамилия:



Электронная почта:



Телефон:



Дата рождения:



Пароль:



Загрузить файл:



Я принимаю правила и условия


Пол:

Мужчина

Женщины

Количество:



Объем:




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

Кнопка «Отправить» в конце отвечает за отправку формы по URL-адресу, указанному в атрибуте. действие Этикетки форма (в данном случае «/submit_form»). Чтобы эта форма работала на реальном веб-сайте, вам необходимо настроить сервер для получения и обработки информации из этой формы по пути «/submit_form».