Для сбора пользовательских данных используется HTML форма.
Затем вводимые пользователем данные могут быть отправлены на сервер для обработки.
Элемент <form>
HTML элемент <form> определяет форму, которая используется для сбора пользовательских данных:
<form>
.
элементы формы
.
</form>
HTML форма содержит элементы формы.
Элементы формы - это различные типы элементов ввода, такие как текстовые поля, флажки, переключатели, кнопки отправки и многое другое.
Элемент <input>
Элемент <input> - самый важный элемент формы.
Элемент <input> отображается несколькими способами, в зависимости от атрибута type.
Вот несколько примеров:
| Type | Описание |
|---|---|
| <input type="text"> | Определяет однострочное поле ввода текста |
| <input type="radio"> | Определяет переключатель (для выбора одного из многих вариантов) |
| <input type="submit"> | Определяет кнопку отправки (для отправки формы) |
Вы узнаете гораздо больше о типах ввода позже в этом уроке.
Текстовое поля
<input type="text"> определяет однострочное поле ввода для ввода текста.
Форма с двумя полями ввода текста:
<form>
<label for="fname">Имя:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname">
</form>
Попробуйте сами »
Вот как это будет выглядеть в браузере:
Примечание: Сама форма не видна. Также обратите внимание, что ширина поля ввода по умолчанию составляет 20 символов.
Элемент <label>
Обратите внимание на использование элемента <label> в приведенном выше примере.
Тег <label> определяет метку для многих элементов формы.
Элемент <label> полезен для пользователей программы чтения с экрана,
потому что чтения с экрана будет читать вслух надпись, когда пользователь сосредоточен на входном элементе.
Элемент <label> также помогает пользователям,
которые испытывают трудности при нажатии на очень маленькие области (например, переключатели или флажки)
- потому что, когда пользователь щелкает текст внутри элемента <label>, он переключает переключатель/флажок.
Атрибут for тега <label> должен быть равен атрибуту id
элемента <input type="radio">, чтобы связать их вместе.
Кнопки radio
<input type="radio"> определяет радиокнопки.
Переключатели позволяют пользователю выбрать один из ограниченного числа вариантов.
Форма с переключателями:
<form>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Мужчина</label><br>
<input
type="radio" id="female" name="gender" value="female">
<label
for="female">Женщина</label><br>
<input type="radio" id="other"
name="gender" value="other">
<label for="other">другое</label>
</form>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Кнопка submit
<input type="submit"> определяет кнопку для
представления в виде данных для обработчика форм.
Обработчик форм обычно представляет собой страницу на сервере со скриптом для обработки входных данных.
Обработчик форм задается в окне формы атрибутом action.
Форма с кнопкой отправки:
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="Андрей"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Щипунов"><br><br>
<input type="submit" value="Отправить">
</form>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Атрибут action
Атрибут action определяет действие, которое должно быть выполнено при отправке формы.
Обычно данные формы отправляются на страницу сервер, когда пользователь нажимает на кнопку "Отправить".
В приведенном выше примере данные формы отправляются на страницу на сервере под названием "/action_page.php". Эта страница содержит серверный скрипт, который обрабатывает данные формы:
<form action="/action_page.php">
Если атрибут action опущен, действие устанавливается на текущую страницу.
Атрибут target
Атрибут target указывает, будет ли представленный результат открыт в новой вкладке браузера, фрейме или в текущем окне.
По умолчанию значение "_self" означает, что форма будет отправлена в текущем окне.
Чтобы сделать результат формы открытым в новой вкладке браузера, используйте значение "_blank".
Здесь представленный результат откроется в новой вкладке браузера:
<form action="/action_page.php.php" target="_blank">
Попробуйте сами »
Другими значения "_parent", "_top", или name, представляющее имя iframe.
Атрибут method
Атрибут method атрибут определяет метод HTTP(GET или
POST) для использования при отправке данных формы.
Используйте метод GET при отправке формы:
<form action="/action_page.php" method="get">
Попробуйте сами »
или:
Используйте метод POST при отправке формы:
<form action="/action_page.php" method="post">
Попробуйте сами »
Когда использовать GET?
Метод HTTP по умолчанию при отправке данных формы GET.
Однако при использовании GET данные формы будут видны в поле адреса страницы:
/action_page.php?firstname=Андрей&lastname=ЩипуновЗаметка о GET:
- Добавляет данные формы в URL адрес в паре имя/значение
- Длина URL адреса ограничена (2048 символов)
- Никогда не используйте GET для отправки конфиденциальных данных! (будет виден в URL адресе)
- Эффективно для отправки форм, когда пользователь хочет добавить результат в закладки
- GET лучше подходит для незащищенных данных, таких как строки запросов в Google
Когда использовать POST?
Всегда используйте POST, если данные формы содержат конфиденциальную или личную информацию. Метод POST не отображает данные формы в поле адреса страницы.
Заметка о POST:
- POST не имеет ограничений по размеру и может использоваться для отправки больших объемов данных.
- Отправленные формы с сообщением не могут быть закладками
Атрибут name
Каждое поле ввода должно иметь атрибут name для отправки.
Если атрибут name опущен, данные этого поля ввода вообще не будут отправлены.
В этом примере не будут представленны значения "name" в поле ввода:
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" value="Щипунов"><br><br>
<input type="submit" value="Отправить">
</form>
Попробуйте сами »
HTML Упражнения
Вот список всех атрибутов <form>:
| Атрибут | Описание |
|---|---|
| accept-charset | Задает кодировки символов, используемые для отправки формы |
| action | Указывает, куда отправлять данные формы при отправке формы |
| autocomplete | Указывает, должно ли быть включено или выключено автозаполнение формы |
| enctype | Указывает, как данные формы должны быть закодированы при отправке их на сервер (только для method="post") |
| method | Указывает HTTP-метод, который будет использоваться при отправке данных формы |
| name | Задает имя формы |
| novalidate | Указывает, что форма не должна проверяться при отправке |
| rel | Задает связь между связанным ресурсом и текущим документом |
| target | Указывает, где будет отображаться ответ, полученный после отправки формы |
Подробнее об атрибутах формы вы узнаете в следующих главах.