HTML-формы
HTML-форма состоит из элементов формы, которые представляют собой различные типы полей ввода, такие как флажки, текстовые поля, кнопки отправки, радиокнопки и так далее.
Элемент HTML <input>
Элемент <input> является основным элементом формы, который в зависимости от атрибута type может отображаться по-разному.
Рассмотрим некоторые типы полей ввода.
Текстовое поле
Элемент <input type="text"> определяет однострочное поле ввода для текста.
Пример текстового поля:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Text Input Example</h2>
<form>
Name:<br />
<input type="text" name="name" />
<br />
Surname:<br />
<input type="text" name="surname" />
</form>
</body>
</html>Радиокнопки
Элемент <input type="radio"> определяет радиокнопку, с помощью которой можно выбрать один вариант из многих.
Пример радиокнопки
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Radio Button Example</h2>
<form>
<input type="radio" name="game" value="football" checked /> Football
<input type="radio" name="game" value="basketball" /> Basketball
</form>
</body>
</html>Кнопка отправки
Элемент <input type="submit"> отправляет данные формы на серверный обработчик.
Обработчик формы — это серверная страница со скриптом для обработки введенных данных, путь к которой указывается в атрибуте action формы.
Пример кнопки отправки
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form action="/form/submit" method="POST">
Name:<br />
<input type="text" name="firstname" value="Tom" />
<br />
Surname:<br />
<input type="text" name="lastname" value="Brown" />
<br />
Age:<br />
<input type="text" name="Age" value="21" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>Click the "Submit" button to send the form data to the action page.</p>
</body>
</html>Атрибут Action
Атрибут action указывает действие, которое должно быть выполнено при отправке формы.
При нажатии пользователем кнопки отправки данные формы отправляются на веб-страницу на сервере.
HTML-формы
<form action="/form/submit">Атрибут Target
Атрибут target определяет, будет ли результат формы открыт в новой вкладке браузера, фрейме или в текущем окне.
Значение по умолчанию для этого атрибута — _self. Использование этого значения откроет результат формы в текущем окне.
Значение _blank откроет результат формы в новой вкладке браузера.
HTML-формы
<form action="/form/submit" target="_blank">Атрибут Method
Атрибут method определяет HTTP-метод (GET или POST), который будет использоваться при отправке данных формы.
Пример метода GET:
Пример метода GET
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the GET Method</h2>
<form action="/form/submit" target="_blank" method="GET">
Name:<br />
<input type="text" name="name" value="Tom" />
<br />
Surname:<br />
<input type="text" name="Surname" value="Brown" />
<br />
Age:<br />
<input type="number" name="age" value="21" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p> Here we used the "_blank" value, which will open the form result in a new browser tab.</p>
</body>
</html>Пример метода POST:
Пример метода POST:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the Post Method</h2>
<form action="/form/submit" target="_blank" method="POST">
Name:<br />
<input type="text" name="name" value="Tom" />
<br />
Surname:<br />
<input type="text" name="surname" value="Brown" />
<br />
Age:<br />
<input type="number" name="age" value="21" />
<br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Когда использовать метод GET
GET — метод по умолчанию при отправке данных формы, и при его использовании данные формы отображаются в адресной строке страницы.
DANGER
Не используйте метод GET для отправки конфиденциальных данных, так как они будут видны в URL.
TIP
Метод GET полезен для отправки форм, когда пользователь хочет добавить результат в закладки.
DANGER
Длина URL ограничена (максимум 2048 символов).
Когда использовать метод POST
Если данные формы содержат конфиденциальную или личную информацию, всегда используйте метод POST, так как он не отображает отправленные данные в адресной строке страницы.
TIP
Поскольку при использовании метода POST нет ограничений по размеру, его можно применять для отправки больших объемов данных.
Отправленные формы методом POST нельзя добавить в закладки.
Другие атрибуты
Ниже приведены другие атрибуты <form>:
| Атрибут | Описание |
|---|---|
| accept-charset | Определяет кодировку символов, используемую в отправляемой форме (по умолчанию: кодировка страницы). |
| autocomplete | Определяет, должен ли браузер автоматически заполнять форму или нет (по умолчанию: включено). |
| enctype | Определяет кодировку отправляемых данных (по умолчанию: url-encoded). |
| name | Определяет имя, используемое для идентификации формы. |
| novalidate | Указывает, что браузер не должен проверять форму. |
Практика
Какие обязательные атрибуты должен включать каждый элемент ввода HTML-формы?