71 lines
4.6 KiB
Markdown
71 lines
4.6 KiB
Markdown
|
---
|
|||
|
|
title: HTML Forms
|
|||
|
|
localeTitle: HTML-формы
|
|||
|
|
---
|
|||
|
|
## HTML-формы
|
|||
|
|
|
|||
|
|
В основном, формы используются для сбора данных, введенных пользователем, которые затем отправляются на сервер для дальнейшей обработки. Они могут использоваться для различных видов пользовательских входов, таких как имя, адрес электронной почты и т. Д.
|
|||
|
|
|
|||
|
|
Форма содержит элементы управления, которые обернуты тегами `<form></form>` , например `input` , которые могут иметь такие типы, как:
|
|||
|
|
|
|||
|
|
* `text`
|
|||
|
|
* `email`
|
|||
|
|
* `password`
|
|||
|
|
* `checkbox`
|
|||
|
|
* `radio`
|
|||
|
|
* `submit`
|
|||
|
|
* `range`
|
|||
|
|
* `search`
|
|||
|
|
* `date`
|
|||
|
|
* `time`
|
|||
|
|
* `week`
|
|||
|
|
* `color`
|
|||
|
|
* `datalist`
|
|||
|
|
|
|||
|
|
Пример кода:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<form>
|
|||
|
|
<label for="username">Username:</label>
|
|||
|
|
<input type="text" name="username" id="username">
|
|||
|
|
<label for="password">Password:</label>
|
|||
|
|
<input type="password" name="password" id="password">
|
|||
|
|
<input type="radio" name="gender" value="male">Male<br>
|
|||
|
|
<input type="radio" name="gender" value="female">Female<br>
|
|||
|
|
<input type="radio" name="gender" value="other">Other
|
|||
|
|
<input list="Options">
|
|||
|
|
<datalist id="Options">
|
|||
|
|
<option value="Option1">
|
|||
|
|
<option value="Option2">
|
|||
|
|
<option value="Option3">
|
|||
|
|
</datalist>
|
|||
|
|
<input type="submit" value="Submit">
|
|||
|
|
<input type="color">
|
|||
|
|
<input type="checkbox" name="correct" value="correct">Correct
|
|||
|
|
</form>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Другие элементы, которые могут содержать:
|
|||
|
|
|
|||
|
|
* `textarea` - это многострочный блок, который чаще всего используется для добавления некоторого текста, например. комментарий. Размер textarea определяется количеством строк и столбцов.
|
|||
|
|
* `select` - вместе с `<option></option>` создает раскрывающееся меню выбора.
|
|||
|
|
* `button` - Элемент кнопки можно использовать для определения кнопки с нажатием кнопки.
|
|||
|
|
|
|||
|
|
Дополнительная информация о HTML-форматах.
|
|||
|
|
|
|||
|
|
Формы HTML необходимы, когда вы хотите собрать некоторые данные от посетителя сайта. Например, во время регистрации пользователя вы хотели бы получить информацию, такую как имя, адрес электронной почты, кредитную карту и т. Д.
|
|||
|
|
|
|||
|
|
Форма примет вход от посетителя сайта, а затем отправит его в фоновое приложение, такое как CGI, сценарий ASP или PHP-скрипт и т. Д. Внутреннее приложение выполнит требуемую обработку переданных данных на основе определенной бизнес-логики внутри приложение.
|
|||
|
|
|
|||
|
|
Существуют различные элементы формы, такие как текстовые поля, поля текстовой области, раскрывающиеся меню, переключатели, флажки и т. Д.
|
|||
|
|
|
|||
|
|
Тег HTML `<form>` используется для создания HTML-формы и имеет следующий синтаксис:
|
|||
|
|
|
|||
|
|
`html <form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form>`
|
|||
|
|
|
|||
|
|
Если метод формы не определен, он будет по умолчанию «GET».
|
|||
|
|
|
|||
|
|
Тег формы также может иметь атрибут с именем «target», который указывает, где будет открыта ссылка. Он может открываться на вкладке браузера, в кадре или в текущем окне.
|
|||
|
|
|
|||
|
|
Атрибут action определяет действие, которое должно выполняться при отправке формы. Обычно данные формы отправляются на веб-страницу по URL-адресу скрипта, когда пользователь нажимает кнопку отправки. Если атрибут действия опущен, действие устанавливается на текущую страницу.
|