Тег form добавляет контейнер для размещения элементов управления, с которыми пользователи могут взаимодействовать, чтобы отправить информацию на сервер. Форма используется для сбора информации о посетителях сайта, комментариев, мнений и многого другого. А также для авторизации на некоторых сайтах.
Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:
Формы являются мощным инструментом, который не только помогает собирать ценную информацию о пользователях, но и позволяет разработчикам создавать сложные приложения.
Примеры
В следующих примерах мы рассмотрим некоторые из атрибутов тега form с несколькими элементами управления.
В нашем первом примере создается простая форма авторизации с тремя элементами: текстовое поле, поле для ввода пароля и кнопка отправки данных. Тег form action и method указывают местоположение скрипта, отвечающего за обработку данных формы, и метод, используемый для их отправки.
Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.
Обратите внимание, что мы используем для атрибута method значение « GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.
Кроме этого, наша форма должна содержать поле для выбора загружаемого файла через проводник.
Атрибуты
Специальные атрибуты тега form :
ACCEPT-CHARSET
Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.
AUTOCOMPLETE
Одно из двух значений этого атрибута тега form указывают браузеру, должен ли он отображать варианты для поля ввода элемента управления. Браузеры обычно выполняют это действие, извлекая данные из базы, содержащей введенные ранее. Возможно два значения, оба не зависят от регистра:
ENCTYPE
Значение, указывающее метод, который будет использоваться для кодирования данных при отправке формы. Возможны три значения, которые не зависят от регистра:
METHOD
Метод, который должны использовать браузеры для отправки данных формы. Возможны три значения, без учета регистра:
Имя формы. Это значение не может быть пустой строкой и должно отличаться от имен других форм.
ACCEPT
Указывается разделенный запятыми список разрешенных типов контента. Это может быть полезно при загрузке файлов для фильтрации на стороне клиента типов файлов.
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
2. Группировка элементов формы
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
4. Текстовые поля ввода
Таблица 4. Атрибуты элемента
7. Кнопки
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту. По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:
Нет ничего сложного в создании HTML-форм. Самый простой способ получить представление о формах — это разобрать небольшой HTML-код, а затем посмотреть, как он работает. В следующем примере показан синтаксис создания простой HTML-формы:
Пример: Простая HTML-форма
Моя первая форма: Имя: Фамилия:
Элемент —>
Вместе с этим атрибутом можно использовать атрибут maxlenght, значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size, рекомендуется использовать средства каскадных таблиц стилей (CSS). Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.
Переключатели (radio)
Элемент типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:
Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value. Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь. Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:
Пример: Использование переключателей
Флажки (checkbox)
Элемент типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name, однако каждый флажок имеет собственное значение. Основной синтаксис флажка:
Атрибут checked, как и в случае с переключателями, указывает, что данный флажок должен быть установлен по умолчанию при загрузке страницы. Данный атрибут может быть установлен одновременно для нескольких флажков группы. В следующем примере использование флажков заданы несколько выбранных по умолчанию вариантов ответа:
Пример: Использование переключателей
Какие музыкальные жанры Вы любите?
Кнопки подтверждения (submit) и очистки (reset)
Пример: Использование submit и reset
Подпишись на рассылку новостей:
После щелчка на кнопке Reset происходит сброс любых введенных пользователем данных.
Атрибут action.
Главным для элемента
Атрибут method
Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST. Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET. Рассмотрим применение каждого из них.
Метод POST
Метод POST упаковывает данные формы и отсылает их серверу незаметно для пользователя, поскольку данные содержатся в теле сообщения. Веб-браузер, при использовании метода POST отправляет на сервер запрос, состоящий из специальных заголовков за которыми следуют данные формы. Так как содержимое этого запроса доступно только серверу, метод POST применяется для передачи конфиденциальных данных, таких как пароли, реквизиты банковских карт и другая персональная информация пользователей. Метод POST также подходит для отправки больших объемов информации, так как в отличие от метода GET, у него нет ограничений по количеству передаваемых символов.
Метод GET
Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET, ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET, давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:
Элемент-переключатель
Добавьте нужные элементы в HTML-код, чтобы в результате получилась форма, приведенная в задании. В качестве имени для всех элементов установите name=»genre», а значения (value) соответственно: «rock», «pop» и «jazz».
Однострочное поле ввода текста
Добавьте нужные элементы в HTML-код, чтобы в результате получилась форма, приведенная в задании. В качестве имени (name) текстовых полей установите по порядку:»firstname», «lastname» и «login».
Значения по умолчанию
Для текстовых полей, приведенных в форме добавьте значения по умолчанию соответственно: «Ваше имя», «Ваша фамилия» и «до 10 знаков» как показано в задании.
Кнопки отправки данных и сброса
Разместите кнопки отправки данных и сброса в нижней части формы. По умолчанию на кнопке отправки данных отобразите надпись «Отправить запрос», а на кнопке сброса «Начать заново».
Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.
Необходимые знания:
Базовое представление о компьютерах и базовое понимание HTML.
Цель:
Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.
Что такое Веб-форма?
Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).
В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (валидация форм), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.
Проектирование формы
Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.
Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:
В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.
Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.
Активное обучение: Реализация HTML-формы
Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: :
Рис. 1. Улучшенные веб-формы с помощью HTML5
