⇐ Назад
В главное меню
Продолжить ⇒
Прогресс завершения курса:

Элемент <form>

Формы в HTML используются для сбора информации от пользователя.

Формы создаются с помощью элемента <form>.


<body>
<form>...</form>
</body>

Атрибут action указывает на веб-страницу, которая должна загрузиться после отправки формы пользователем.


<form action="https://irkpo.ru">
</form>

Обычно форма отправляется на веб-страницу, расположенную на веб-сервере.


Атрибуты method и name

Атрибут method указывает на метод HTTP-запроса (GET или POST), который будет использоваться при отправке формы.


<form action="url" method="GET">

<form action="url" method="POST">

Когда используется метод GET, в URL-адресе веб-страницы будут отображаться данные формы.

Метод POST используется, когда требуется обновить данные в форме, или когда в форме содержится конфиденциальная информация (пароли).
Метод POST безопасней, т. к. передаваемые данные не будут видны в URL-адресе страницы.

Элементы форм

Тег <input>

Тег <input> используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя.

Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге <input> и задаётся с помощью различных атрибутов.


У тега <input> нет закрывающего тега.

Для примера создадим форму с двумя кнопками типа radio и зададим обоим имя variants:

<form>
<input type="radio" name="variants">Первый вариант
<br>
<input type="radio" name="variants">Второй вариант
</form>

Результат:


Важно: если Вы хотите сделать так, чтобы одновременно могла быть выбранной только одна радиокнопка, нужно присвоить всем тегам <input> одинаковое имя, указав его в атрибуте name.

Если же Вам нужно сделать множественный выбор, то вместо radio следует использовать тип checkbox:

<form>
<input type="checkbox" name="variants">Первый вариант
<br>
<input type="checkbox" name="variants">Второй вариант
<br>
<input type="checkbox" name="variants">Третий вариант
</form>

Результат:


При нажатии кнопки отправки, форма отправляется атрибуту action:


<input type="submit" value="Отправить">

Результат:



⇐ Назад
В главное меню
Продолжить ⇒