HTML - Формы
HTML-формы необходимы, когда вы хотите собрать некоторые данные о посетителе сайта. Например, во время регистрации пользователя вы хотите получить такую информацию, как имя, адрес электронной почты, кредитную карту и т. Д.
Форма будет принимать входные данные от посетителя сайта и затем отправлять их в серверное приложение, такое как CGI, ASP Script или PHP-скрипт и т. Д. Внутреннее приложение будет выполнять необходимую обработку переданных данных на основе определенной бизнес-логики внутри приложение.
Доступны различные элементы формы, такие как текстовые поля, поля текстового поля, раскрывающиеся меню, переключатели, флажки и т. Д.
HTML <form> тег используется для создания HTML-формы и имеет следующий синтаксис:
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Атрибуты формы
Помимо общих атрибутов, ниже приведен список наиболее часто используемых атрибутов формы:
| Старший Нет | Атрибут и описание |
|---|---|
| 1 | action Бэкэнд-скрипт готов к обработке ваших переданных данных. |
| 2 | method Метод, который будет использоваться для загрузки данных. Наиболее часто используются методы GET и POST. |
| 3 | target Укажите целевое окно или фрейм, в котором будет отображаться результат сценария. Принимает такие значения, как _blank, _self, _parent и т. Д. |
| 4 | enctype Вы можете использовать атрибут enctype, чтобы указать, как браузер кодирует данные перед их отправкой на сервер. Возможные значения - application/x-www-form-urlencoded - Это стандартный метод, который большинство форм используют в простых сценариях. mutlipart/form-data - Это используется, когда вы хотите загрузить двоичные данные в виде файлов, таких как изображение, текстовый файл и т. Д. |
Note- Вы можете обратиться к Perl и CGI для получения подробной информации о том, как работает загрузка данных формы.
Элементы управления HTML-формы
Существуют различные типы элементов управления формами, которые вы можете использовать для сбора данных с помощью HTML-формы:
- Элементы управления вводом текста
- Флажки Элементы управления
- Управление радиоблоком
- Выберите элементы управления в поле
- Поля выбора файла
- Скрытые элементы управления
- Кнопки с возможностью нажатия
- Кнопка отправки и сброса
Элементы управления вводом текста
В формах используются три типа ввода текста:
Single-line text input controls- Этот элемент управления используется для элементов, для которых требуется только одна строка пользовательского ввода, например для полей поиска или имен. Они созданы с использованием HTML<input> тег.
Password input controls- Это также однострочный ввод текста, но он маскирует символ, как только пользователь вводит его. Они также создаются с помощью тега HTMl <input>.
Multi-line text input controls- Это используется, когда от пользователя требуется предоставить подробности, которые могут быть длиннее одного предложения. Элементы управления многострочным вводом создаются с использованием HTML<textarea> тег.
Элементы управления вводом однострочного текста
Этот элемент управления используется для элементов, для которых требуется только одна строка пользовательского ввода, например для полей поиска или имен. Они создаются с помощью тега HTML <input>.
пример
Вот базовый пример однострочного ввода текста, используемого для ввода имени и фамилии:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Это даст следующий результат -
Атрибуты
Ниже приведен список атрибутов тега <input> для создания текстового поля.
| Старший Нет | Атрибут и описание |
|---|---|
| 1 | type Указывает тип элемента управления вводом; для элемента управления вводом текста он будет установлен на text. |
| 2 | name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения. |
| 3 | value Это можно использовать для предоставления начального значения внутри элемента управления. |
| 4 | size Позволяет указать ширину элемента управления вводом текста в знаках. |
| 5 | maxlength Позволяет указать максимальное количество символов, которое пользователь может ввести в текстовое поле. |
Элементы управления вводом пароля
Это также однострочный ввод текста, но он маскирует символ, как только пользователь вводит его. Они также создаются с использованием тега HTML <input>, но для атрибута type установлено значениеpassword.
пример
Вот базовый пример однострочного ввода пароля, используемого для ввода пароля пользователя:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Это даст следующий результат -
Атрибуты
Ниже приведен список атрибутов тега <input> для создания поля пароля.
| Старший Нет | Атрибут и описание |
|---|---|
| 1 | type Указывает тип управления вводом; для контроля ввода пароля он будет установлен на password. |
| 2 | name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения. |
| 3 | value Это можно использовать для предоставления начального значения внутри элемента управления. |
| 4 | size Позволяет указать ширину элемента управления вводом текста в знаках. |
| 5 | maxlength Позволяет указать максимальное количество символов, которое пользователь может ввести в текстовое поле. |
Элементы управления вводом многострочного текста
Это используется, когда от пользователя требуется предоставить детали, которые могут быть длиннее одного предложения. Элементы управления многострочным вводом создаются с помощью тега HTML <textarea>.
пример
Вот базовый пример многострочного ввода текста, используемого для ввода описания элемента:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Это даст следующий результат -
Атрибуты
Ниже приводится список атрибутов тега <textarea>.
| Старший Нет | Атрибут и описание |
|---|---|
| 1 | name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения. |
| 2 | rows Указывает количество строк поля текстовой области. |
| 3 | cols Указывает количество столбцов поля текстовой области |
Флажок управления
Флажки используются, когда требуется выбрать более одного параметра. Они также создаются с использованием тега HTML <input>, но для атрибута type установлено значениеcheckbox..
пример
Вот пример HTML-кода для формы с двумя флажками -
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Это даст следующий результат -
Атрибуты
Ниже приводится список атрибутов тега <checkbox>.
| Старший Нет | Атрибут и описание |
|---|---|
| 1 | type Указывает тип элемента управления вводом, и для элемента управления вводом флажка он будет установлен на checkbox.. |
| 2 | name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения. |
| 3 | value Значение, которое будет использоваться, если флажок установлен. |
| 4 | checked Установите флажок, если вы хотите выбрать его по умолчанию. |
Радио-кнопка управления
Радиокнопки используются, когда из многих вариантов требуется выбрать только один вариант. Они также создаются с использованием тега HTML <input>, но для атрибута type установлено значениеradio.
пример
Вот пример HTML-кода для формы с двумя переключателями -
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Это даст следующий результат -
Атрибуты
Ниже приводится список атрибутов радиокнопки.
| Старший Нет | Атрибут и описание |
|---|---|
| 1 | type Указывает тип управления вводом, и для флажка управления вводом он будет установлен на радио. |
| 2 | name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения. |
| 3 | value Значение, которое будет использоваться, если установлен переключатель. |
| 4 | checked Установите флажок, если вы хотите выбрать его по умолчанию. |
Выбрать поле управления
Поле выбора, также называемое раскрывающимся списком, которое предоставляет возможность перечислить различные варианты в форме раскрывающегося списка, из которого пользователь может выбрать один или несколько вариантов.
пример
Вот пример HTML-кода для формы с одним раскрывающимся списком
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Это даст следующий результат -
Атрибуты
Ниже приводится список важных атрибутов тега <select> -
| Старший Нет | Атрибут и описание |
|---|---|
| 1 | name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения. |
| 2 | size Это можно использовать для отображения окна списка с прокруткой. |
| 3 | multiple Если установлено значение «несколько», пользователь может выбрать несколько пунктов в меню. |
Ниже приводится список важных атрибутов тега <option> -
| Старший Нет | Атрибут и описание |
|---|---|
| 1 | value Значение, которое будет использоваться, если выбран параметр в поле выбора. |
| 2 | selected Указывает, что этот параметр должен быть изначально выбранным значением при загрузке страницы. |
| 3 | label Альтернативный способ маркировки вариантов |
Окно загрузки файла
Если вы хотите разрешить пользователю загружать файл на ваш веб-сайт, вам нужно будет использовать окно загрузки файла, также известное как поле выбора файла. Он также создается с помощью элемента <input>, но для атрибута type установлено значениеfile.
пример
Вот пример HTML-кода для формы с одним окном для загрузки файла -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Это даст следующий результат -
Атрибуты
Ниже приведен список важных атрибутов окна загрузки файлов -
| Старший Нет | Атрибут и описание |
|---|---|
| 1 | name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения. |
| 2 | accept Задает типы файлов, которые принимает сервер. |
Кнопки управления
В HTML есть различные способы создания интерактивных кнопок. Вы также можете создать интерактивную кнопку с помощью тега <input>, установив для его атрибута type значениеbutton. Атрибут type может принимать следующие значения -
| Старший Нет | Тип и описание |
|---|---|
| 1 | submit Это создает кнопку, которая автоматически отправляет форму. |
| 2 | reset Это создает кнопку, которая автоматически сбрасывает элементы управления формы до их начальных значений. |
| 3 | button Это создает кнопку, которая используется для запуска клиентского сценария, когда пользователь нажимает эту кнопку. |
| 4 | image Это создает кнопку, которую можно щелкнуть, но мы можем использовать изображение в качестве фона для кнопки. |
пример
Вот пример HTML-кода для формы с тремя типами кнопок -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Это даст следующий результат -
Скрытые элементы управления формой
Элементы управления скрытой формы используются для скрытия данных внутри страницы, которые впоследствии могут быть отправлены на сервер. Этот элемент управления скрывается внутри кода и не отображается на реальной странице. Например, следующая скрытая форма используется для сохранения текущего номера страницы. Когда пользователь щелкнет следующую страницу, значение скрытого элемента управления будет отправлено на веб-сервер, и там он решит, какая страница будет отображаться следующей на основе переданной текущей страницы.
пример
Вот пример HTML-кода, чтобы показать использование скрытого элемента управления -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Это даст следующий результат -