HTML | Форма дизайна
Что такое HTML-форма:
HTML-форма - это документ, в котором информация о пользователе хранится на веб-сервере с помощью интерактивных элементов управления. HTML-форма содержит различную информацию, такую как имя пользователя, пароль, контактный номер, адрес электронной почты и т. Д.
Элементы, используемые в HTML-форме, - это флажок, поле ввода, переключатели, кнопки отправки и т. Д. С помощью этих элементов информация пользователя отправляется на веб-сервер.
Тег формы используется для создания HTML-формы.
Пример HTML-формы:
html
<!DOCTYPE html>< html >< body >< form > Username:< br > < input type = "text" name = "username" > < br > Email id:< br > < input type = "text" name = "email_id" > < br >< br > < input type = "submit" value = "Submit" ></ form ></ body ></ html > |
Выход :
Элемент ввода в формах HTML:
Элементы ввода - это наиболее распространенные элементы, которые используются в формах HTML. Могут быть созданы различные поля ввода пользователя, такие как текстовое поле, флажок, поле пароля, переключатель, кнопка отправки и т. Д. Наиболее распространенные элементы ввода перечислены ниже:
- Текстовое поле в HTML-формах:
Текстовое поле представляет собой однострочное поле ввода, позволяющее пользователю вводить текст. Элементы управления вводом текстового поля создаются с использованием элемента «input» с атрибутом type, имеющим значение «text».
html
<!DOCTYPE html>< html >< h3 >Example Of Text Field</ h3 >< body > < form > < label for = "EMAIL ID" >Email Id:</ label >< br > < input type = "text" name = "Email id" id = "Email id" > </ form ></ body ></ html > |
- Выход :
- Поле пароля в HTML-формах:
Поля пароля - это тип текстового поля, в котором введенный текст замаскирован звездочкой или точками для предотвращения идентификации пользователя от другого человека, смотрящего на экран. Элементы управления вводом поля пароля создаются с использованием элемента «input» с атрибутом type, имеющим значение «пароль».
html
<!DOCTYPE html>< html >< h3 >Example of Password Field</ h3 >< body > < form > < label for = "user-password" >Password: </ label >< br > < input type = "password" name = "user-pwd" id = "user-password" > </ form ></ body ></ html > |
- Выход :
- Радиокнопки в HTML-форме:
Радиокнопки используются, чтобы позволить пользователю выбрать ровно одну опцию из списка предопределенных опций. Элементы управления вводом Radio Button создаются с использованием элемента «input» с атрибутом type, имеющим значение «radio».
html
<!DOCTYPE html>< html >< h3 >Example of Radio Buttons</ h3 >< body > < form > SELECT GENDER < br > < input type = "radio" name = "gender" id = "male" > < label for = "male" >Male</ label >< br > < input type = "radio" name = "gender" id = "female" > < label for = "female" >Female</ label > </ form ></ body ></ html > |
- Выход :
- Флажки в HTML-форме:
Флажки используются, чтобы позволить пользователю выбрать один или несколько вариантов из предопределенного набора параметров. Элементы управления вводом флажка создаются с использованием элемента «input» с атрибутом type, имеющим значение «checkbox».
html
<!DOCTYPE html>< html >< h3 >Example of HTML Checkboxes</ h3 >< body > < form > < b >SELECT SUBJECTS</ b > < br > < input type = "checkbox" name = "subject" id = "maths" > < label for = "maths" >Maths</ label > < input type = "checkbox" name = "subject" id = "science" > < label for = "science" >Science</ label > < input type = "checkbox" name = "subject" id = "english" > < label for = "english" >English</ label > </ form ></ body ></ html > |
- Выход :
Поля выбора файлов в HTML-формах:
Поля выбора файла используются, чтобы позволить пользователю выбрать локальный файл и отправить его как вложение на веб-сервер. Это похоже на текстовое поле с кнопкой, которая позволяет пользователю просматривать файл. file, также можно записать путь и имя файла. Поля выбора файлов создаются с использованием элемента «input» с атрибутом type, имеющим значение «file».
Выход :
Текстовая область в HTML-форме:
Текстовая область - это многострочный элемент управления вводом текста, который позволяет пользователю вводить описание или текст в несколько строк. Элемент управления вводом «Текстовая область» создается с помощью элемента «textarea».
html
<!DOCTYPE html>< html >< h3 >Example of a Text Area Box</ h3 >< body > < form > < label for = "Description" >Description:</ label > < textarea rows = "5" cols = "50" name = "Description" id = "Description" ></ textarea > </ form ></ body ></ html > |
Выход :
Выберите поля в HTML-формах:
Поля выбора используются, чтобы позволить пользователям выбирать один или несколько вариантов из раскрывающегося списка вариантов. Поля выбора создаются с использованием двух элементов: «select» и «option». Элементы списка определяются в элементе select.
html
<!DOCTYPE html>< html >< h3 >Example of a Select Box</ h3 >< body > < form > < label for = "country" >Country:</ label > < select name = "country" id = "country" > < option value = "India" >India</ option > < option value = "Sri Lanka" >Sri Lanka</ option > < option value = "Australia" >Australia</ option > </ select > </ form ></ body ></ html > |
Выход :
Кнопки сброса и отправки:
Кнопка «Отправить» позволяет пользователю отправлять данные формы на веб-сервер. Кнопка сброса используется для сброса данных формы и использования значений по умолчанию.
html
<!DOCTYPE html>< html >< h3 >Example of a Submit And Reset Button</ h3 >< body > < form action = "test.php" method = "post" id = "users" > < label for = "username" >Username:</ label > < input type = "text" name = "username" id = "Username" > < input type = "submit" value = "Submit" > < input type = "reset" value = "Reset" > </ form ></ body ></ html > |
Выход :
Атрибуты, используемые в HTML-формах
Атрибут действия:
Действие, которое должно быть выполнено после отправки формы, определяется атрибутом действия. Как правило, данные формы отправляются на веб-страницу на веб-сервере после того, как пользователь нажимает кнопку отправки.
Пример :
html
<!DOCTYPE html>< html >< h3 >Example of a Submit And Reset Button</ h3 >< body > < form action = "test.php" method = "post" id = "users" > < label for = "username" >Username:</ label > < input type = "text" name = "username" id = "Username" > < input type = "submit" value = "Submit" > < input type = "reset" value = "Reset" > </ form ></ body ></ html > |
Если вы нажмете кнопку отправки, данные формы будет отправлен на страницу с именем test.php.
Целевой атрибут в HTML-формах:
Атрибут Target используется, чтобы указать, будет ли предоставленный результат открываться в текущем окне, на новой вкладке или в новом фрейме. По умолчанию используется значение «self», что приводит к отправке формы в том же окне. Чтобы результат формы открывался в новой вкладке браузера, необходимо установить значение «blank».
html
<!DOCTYPE html>< html >< body >< form action = "/test.php" target = "_blank" > Username:< br > < input type = "text" name = "username" > < br > Password:< br > < input type = "password" name = "password" > < br >< br > < input type = "submit" value = "Submit" ></ form ></ body ></ html > |
После нажатия на кнопку отправки результат откроется в новой вкладке браузера.
Атрибут имени в формах HTML:
Атрибут имени требуется для каждого поля ввода. Если атрибут name не указан в поле ввода, данные этого поля не будут отправлены вообще.
html
<!DOCTYPE html>< html >< body >< form action = "/test.php" target = "_blank" > Username:< br > < input type = "text" > < br > Password:< br > < input type = "password" name = "password" > < br >< br > < input type = "submit" value = "Submit" ></ form ></ body ></ html > |
В приведенном выше коде после нажатия кнопки отправки данные формы будут быть отправлено на страницу с именем /test.php. Отправленные данные не будут включать данные поля ввода имени пользователя, поскольку атрибут имени опущен.
Атрибут метода:
Он используется для указания метода HTTP, используемого для отправки данных при отправке формы. Существует два типа методов HTTP: GET и POST.
Метод GET -
html
<!DOCTYPE html>< html >< body >< form action = "/test.php" target = "_blank" method = "GET" > Username:< br > < input type = "text" name = "username" > < br > Password:< br > < input type = "password" name = "password" > < br >< br > < input type = "submit" value = "Submit" ></ form ></ body ></ html > |
В методе GET после отправки формы значения формы будет отображаться в адресной строке новой вкладки браузера.
Почтовый метод -
html
<!DOCTYPE html>< html >< body >< form action = "/test.php" target = "_blank" method = "post" > Username:< br > < input type = "text" name = "username" > < br > Password:< br > < input type = "password" name = "password" > < br >< br > < input type = "submit" value = "Submit" ></ form ></ body ></ html > |
В методе post после отправки формы значения формы не будет отображаться в адресной строке новой вкладки браузера, как это было видимый в методе GET.