HTML формы
Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.
Синтаксически парный тег <form> определяет форму в HTML документе. Элемент <form> по большому счету просто является контейнером, внутри которого могут размещаться различные надписи, элементы управления и типы входных элементов, флажки, радио-кнопки, кнопки отправки и прочие HTML элементы, которые мы с Вами сейчас рассмотрим.
Основная задача формы заключается в том, чтобы принять от пользователя входящую информацию и передать её для дальнейшей обработки на стороне сервера.
Элемент имеет следующий синтаксис:
<form> элементы формы </form>
Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу:
| Значение | Описание |
|---|---|
| button | Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта. |
| checkbox | Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка. |
color | Элемент управления для задания цвета (определяет палитру цветов). |
| date | Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время. |
| datetime-local | Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс. |
| email | Определяет поле для ввода адреса электронной почты. |
| file | Элемент управления, который позволяет пользователю выбрать файл. |
| hidden | Элемент управления, который определяет скрытое поле ввода. |
| image | Элемент управления, который определяет графическую кнопку "отправить форму" (значение submit). По аналогии с тегом <img> вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами width (ширина) и height (высота). |
| month | Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс. |
| number | Элемент управления для ввода числа с плавающей точкой. |
| password | Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле. |
| radio | Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель. |
| range | Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны:
|
| reset | Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию. |
| search | Определяет однострочное текстовое поле для ввода строки поиска |
| submit | Определяет кнопку отправки формы |
| tel | Определяет элемент управления для ввода телефонного номера. |
| text | Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов). Это значение по умолчанию. |
| time | Определяет элемент управления для ввода времени без указания часового пояса (hh:mm). |
| url | Определяет поле для ввода абсолютного URL-адреса. |
| week | Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс. |
С выходом HTML 5 к элементу <input> добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:
- checkbox (флаговая кнопка).
- radio (радиокнопка).
- submit (кнопкa отправки формы).
- text (однострочное текстовое поле).
Давайте рассмотрим пример использования этих элементов управления внутри формы:
<!DOCTYPE html> <html> <head> <title>HTML формы</title> </head> <body> <form> Имя: <input type = "text" name = "firstname" value = "Введите имя"> <br> <br> Фамилия: <input type = "text" name = "lastname" value = "Введите фамилию"> <br> <br> Мужчина <input type = "radio" name = "sex" value = "male" checked> Женщина <input type = "radio" name = "sex" value = "female"> <br> <br> О себе: <br> <input type = "checkbox" name = "type1" value = "low">Меньше 18<br> <input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br> <input type = "checkbox" name = "type3" value = "high">Больше 35<br> <input type = "checkbox" name = "type4" value = "busy">Женат /-а<br> <input type = "checkbox" name = "type5" value = "cat">Есть кошка<br> <br> <input type = "submit" name = "submit" value = "отправить"> </form> </body> </html>
И так по порядку, что мы сделали в этом примере:
- Разместили два однострочных текстовых поля (<input type = "text">) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
- Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male). Он применяется только для полей <input type = "checkbox"> и <input type = "radio">, в противном случае он игнорируется.
- Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
- Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = "submit">). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).
Результат нашего примера в браузере:
Обращаю Ваше внимание, что в рамках изучения HTML мы не будем рассматривать то, как серверы обрабатывают входные данные, лишь рассмотрим базовые принципы передачи формы.
Обработчик формы это, как правило, обычная страница сервера, которая с помощью скрипта обрабатывает входные (полученные) данные. Чтобы указать обработчик формы, необходимо использовать тег <form> совместно с атрибутом action:
<form action = "example.php">
Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма. Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы - текущая страница). В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы "example.php".
Расширение *.php используется для файлов, написанных на языке PHP (Hypertext Preprocessor - препроцессор гипертекста, произносится как "пи-эйч-пи") — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.
Еще одним важным атрибутом при работе с элементом <form> является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:
<form action = "example.php" method = "get"> или: <form action = "example.php" method = "post">
Вы можете использовать get (метод по умолчанию) если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы будут видны при передаче в адресе страницы:
http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин
Используйте метод post если форма использует обновление каких-либо данных, или включает в себя конфиденциальную информацию (например пароль). Метод post предлагает лучшую безопасность, так как представленные данные отправляются на сервер в теле сообщения запроса.
Группировка данных формы
Тег <fieldset> служит для визуальной группировки элементов, размещенных внутри формы (HTML тег <form>). Во всех основных браузерах, данный элемент выделяется рамкой, а содержимое элемента получает внутренние отступы со всех сторон.
Тег <legend> определяет заголовок для <fieldset> элемента, с помощью которого группируются элементы формы.
Пример использования:
<!DOCTYPE html> <html> <head> <title>Группировка данных формы</title> </head> <body> <form> <fieldset> <legend>Пожалуйста, представьтесь</legend> Имя: <input type = "text" name = "firstname" value = "Введите имя"> <br> <br> Фамилия: <input type = "text" name = "lastname" value = "Введите фамилию"> <br> <br> Мужчина <input type = "radio" name = "sex" value = "male" checked> Женщина <input type = "radio" name = "sex" value = "female"><br> <br> <input type = "submit" name = "submit" value = "отправить"> </fieldset> </form> </body> </html>
В этом примере мы:
- Разместили внутри формы (парный тег <form>) элемент <fieldset>, благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом <legend> мы определяем для нашей рамки заголовок "Пожалуйста, представьтесь".
- Разместили два однострочных текстовых поля (<input type = "text">) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
- Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
- Заключительный элемент это кнопка, которая служит для отправки формы (<input type = "submit">). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).
Результат нашего примера в браузере:
Текстовая метка
Тег <label> (англ. - метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.
Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.
Рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <label></title> </head> <body> <form> <label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"--> <input type = "radio" id = "yes"name = "choice" value = "yes" checked> <label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"--> <input type = "radio"id = "no" name = "choice" value = "no"> </form><br> <form> <label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы помещаем теги <input> внутрь тегов <label> (при этом атрибут for не требуется)--> <label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> </form> </body> </html>
В этом примере мы:
- Внутри первой формы:
- Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
- Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
- Внутри второй формы:
- Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
- Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).
В браузере оба варианта (метода) использования текстовых меток выглядят идентично:
Подсказка для полей ввода
Атрибут placeholder (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.
Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера (пример мы рассматривали выше).
Атрибут может быть использован с полями данных следующих типов (атрибут type):
- email (поле для адреса электронной почты).
- password (поле с паролем, в котором скрываются символы).
- search (текстовое поле для ввода строки поиска).
- text (однострочное текстовое поле).
- tel (поле для ввода номера телефона).
- url (поле для ввода URL-адреса).
Давайте рассмотри пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута placeholder</title> </head> <body> <form> Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br><br> Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br> <button type = "submit">Далее</button> </form> </body> </html>
В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.
Результат нашего примера:
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Используя полученные знания составьте следующую форму оформления заказа:
Практическое задание № 22.
Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.