Послание № 16
HTML-формы
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши.
Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.
До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text">, <input type="password">, завершающихся кнопкой <input type="submit">.
Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3.
О всех новых возможностях и особенностях Form HTML5 мы будем говорить дальше.
Контейнер формы, он же — тег <form>
Основу любой формы составляет тег <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля.
Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
Важно!
Нельзя создавать форму внутри другой формы, это следует запомнить.
Любой тег в HTML может содержать различные атрибуты, но для тега <form> некоторые атрибуты являются обязательными.
| Атрибуты тега <form> | |
| Атрибут | Значение / описание |
| accept-charset | Значение атрибута представляет собой разделенный пробелами список кодировок символов, которые будут использоваться для отправки формы, например: <form accept-charset="ISO-8859-1">. |
| action | Обязательный атрибут, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение #. |
| autocomplete | Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: · on — значение можно сохранять и извлекать; · off — отключает автозаполнение для полей форм; |
| method | Задает способ передачи данных формы. Есть 2 основных метода: · Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2. Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком &. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет. · Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения. <form action="action.php" method="post"></form> |
| name | Задает имя формы, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros". |
| novalidate | Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения |
| target | Указывает окно, в которое будет направлена информация: · _blank — новое окно; · _self — тот же фрейм; · _parent — родительский фрейм (если он существует); · _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм. |
Группировка элементов формы
Тег <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью тега <legend>…</legend>, который идет сразу за тегом <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:
| Атрибуты тега <fieldset> | |
| Атрибут | Значение / описание |
| disabled | Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера <fieldset>, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без значения, например: <fieldset disabled>. |
| name | Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id. |
Создание полей формы
Текстовые поля
Почти всем формам требуется текстовый ввод от пользователей, чтобы ввести своё имя, пароль, адрес и др. Текстовые поля формы приходят в разных вариантах.
| Виды текстовых полей | ||
| Вид текстового поля | Код | Примечание |
| Текст | <input type="text"> | Допускает любой тип символов |
| <input type="email"> | Может показывать предупреждение, если введён неверный email | |
| Пароль | <input type="password"> | Символы показываются как точки |
| Число | <input type="number"> | Могут быть использованы клавиши вверх/вниз |
| Телефон | <input type="tel"> | Может сработать автозаполнение |
| Многострочный текст | <textarea></textarea> | Может быть изменён размер поля |
Хотя эти поля очень похожи и позволяют пользователям вводить текст любого рода (даже неправильный), их тип обеспечивает специфическую семантику для ввода, определяя, какую информацию поле должно содержать.
Браузеры могут впоследствии немного изменить интерфейс элемента управления, чтобы повысить интерактивность или подсказать, какое содержимое ожидается.
К примеру, поле для пароля показывает точки вместо символов. А поле для чисел позволяет увеличивать/уменьшать значение с помощью клавиш вверх и вниз.
Уникальный атрибут — placeholder=”…”
Текстовые поля могут отображать подсказывающий текст, который исчезнет, как только будет введён какой-нибудь текст.