Урок 11. Формы в HTML. Элемент form
Формы в HTML. Элемент form
Формы в HTML используются для сбора информации от пользователя с дальнейшей передачей собранных данных на сервер. Формы создаются с помощью элемента form, который имеет открывающий и закрывающий тег. Элемент form создает форму пользовательского ввода, форма может содержать различные элементы для ввода информации: текстовое поле, различные переключатели, флажки и др.
Рассмотрим некоторые элементы формы:
Элемент input
Элемент ввода (input) — один из наиболее важный элементов формы, используется для ввода информации пользователя. Элемент ввода имеет множество вариаций, которые определяются атрибутом type. Например: текстовое поле (text), пароль (password), URL и др.
Создадим простую форму с просьбой ввести имя пользователя и пароль.
<html> <head> </head> <body> <form> <input type="text" name="Имя пользователя"/><br/> <input type="password" name="Пароль" /><br/> </form> </body> </html>
Атрибут name
В атрибуте name указывается название формы.
Если изменить тип данных на radio, мы получим радио кнопку или «переключатели». Используя radio пользователь может выбрать только один вариант из представленного списка.
<html> <head> </head> <body> <form> <input type="radio" name="gender" value="male" />Мужской<br/> <input type="radio" name="gender" value="famale"/>Женский </form> </body> </html>
Тип checkbox
Установив тип checkbox, у пользователя появиться возможность выбрать несколько вариантов:
<html> <head> </head> <body> <form> <input type="checkbox" name="gender" value="1" />Мужской<br/> <input type="checkbox" name="gender" value="2"/>Женский<br/> </form> </body> </html>
Тег input не имеет завершающего тега.
Атрибут action
Атрибут action указывает на веб-страницу которая должна загрузиться после отправки формы пользователем.
<form action="https://coderplace.ru">
После отправки формы, данные будут обработаны на веб-сервере с помощью других языков программирования, к примеру Java или PHP.
При нажатии на кнопку отправки форма отправиться атрибуту action:
<html> <head> </head> <body> <form action="https://coderplace.ru"> <input type="checkbox" name="gender" value="1" />Мужской<br/> <input type="checkbox" name="gender" value="2"/>Женский<br/> <input type="submit" value="отправить" /><br/> </form> </body> </html>
С помощью типа submit создается кнопка для отправки формы.
Обычно форма отправляется на веб-страницу расположенную на веб-сервере.