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>

Это даст следующий результат -