HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
2. Группировка элементов формы
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
4. Текстовые поля ввода
Таблица 4. Атрибуты элемента
7. Кнопки
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Тег form добавляет контейнер для размещения элементов управления, с которыми пользователи могут взаимодействовать, чтобы отправить информацию на сервер. Форма используется для сбора информации о посетителях сайта, комментариев, мнений и многого другого. А также для авторизации на некоторых сайтах.
Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:
Формы являются мощным инструментом, который не только помогает собирать ценную информацию о пользователях, но и позволяет разработчикам создавать сложные приложения.
Примеры
В следующих примерах мы рассмотрим некоторые из атрибутов тега form с несколькими элементами управления.
В нашем первом примере создается простая форма авторизации с тремя элементами: текстовое поле, поле для ввода пароля и кнопка отправки данных. Тег form action и method указывают местоположение скрипта, отвечающего за обработку данных формы, и метод, используемый для их отправки.
Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.
Обратите внимание, что мы используем для атрибута method значение « GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.
Кроме этого, наша форма должна содержать поле для выбора загружаемого файла через проводник.
Атрибуты
Специальные атрибуты тега form :
ACCEPT-CHARSET
Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.
AUTOCOMPLETE
Одно из двух значений этого атрибута тега form указывают браузеру, должен ли он отображать варианты для поля ввода элемента управления. Браузеры обычно выполняют это действие, извлекая данные из базы, содержащей введенные ранее. Возможно два значения, оба не зависят от регистра:
ENCTYPE
Значение, указывающее метод, который будет использоваться для кодирования данных при отправке формы. Возможны три значения, которые не зависят от регистра:
METHOD
Метод, который должны использовать браузеры для отправки данных формы. Возможны три значения, без учета регистра:
Имя формы. Это значение не может быть пустой строкой и должно отличаться от имен других форм.
ACCEPT
Указывается разделенный запятыми список разрешенных типов контента. Это может быть полезно при загрузке файлов для фильтрации на стороне клиента типов файлов.
Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.
Необходимые знания:
Базовое представление о компьютерах и базовое понимание HTML.
Цель:
Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.
Что такое Веб-форма?
Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).
В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (валидация форм), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.
Проектирование формы
Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.
Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:
В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.
Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.
Активное обучение: Реализация HTML-формы
Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: :
HTML-формы это набор элементов управления который позволяет сделать документ интерактивным. Как правило, формы используются для отправки на сервер какой-либо информации, например форма обратной связи на сайте.
Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.
Форма обратной связи в HTML
Давайте для примера создадим наиболее полную форму обратной связи в которой будут кнопки, текстовое поле, возможность загрузки файла и не только, итак обо всем по порядку.
Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.
Для вставки пояснительного текста используется атрибут placeholder тега
Сделаем 100% ширину с помощью CSS.
Получим следующую форму.
Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.
Ввод текста в input
Элемент является универсальным, в отличии от элемента
. С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.
Изменим нашу форму.
Уже лучше, давайте добавим поле с адресом электронной почты.
Все хорошо, но не хватает нормальной группировки элементов.
Группировка элементов управления в HTML-форме
Давайте немного изменим форму, а именно:
Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.
Ну что же, уже лучше. Не хватает кнопок.
Кнопки в HTML-форме
Добавим две кнопки:
Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).
Кнопка «Очистить» будет очищать все введенные в форму данные.
Кнопка отправки формы
Кнопка очистки формы
Давайте дополним нашу форму.
Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?
Проверка заполнения формы
Валидация форм, или проверка заполнения — довольно важный момент при работе с сервером. Давайте разбираться как сделать простую проверку полей формы на заполнение.
Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.
Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».
Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:
Иные проверки (валидации) выполняются с помощью PHP или JS кода.
Другие популярные элементы
Продолжим дополнять нашу форму. Добавим несколько элементов.
Форма загрузки файлов
Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:
input type= «file» value=»Выберите файл»>
Дополним нашу форму. Создадим отдельную группу элементов.
Выбор даты
Добавим в нашу форму возможность выбора даты.
Выпадающий список
Выпадающий список создается с помощью тега select >, а элемент списка с помощью option >. Давайте создадим в нашей форме возможность указать адресата.
Переключатели
Переключатели бывают зависимые — можно выбрать только один вариант и независимые.
Зависимый переключатель
Зависимый переключатель создается с помощью тега input и его атрибута type= «radio». Соответственно в зависимом переключателе можно выбрать только один варинат.
Независимый переключатель
Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.
Добавим эти элементы на нашу форму.
На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.
Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.
Работа с формами HTML на сайтах веб-страницы ASP.NET (Razor)
В этой статье описывается обработка формы HTML (с помощью текстовых полей и кнопок) при работе на веб-сайте веб-страницы ASP.NET (Razor).
Что вы узнаете:
Ниже приведены основные понятия программирования ASP.NET, представленные в статье:
Версии программного обеспечения, используемые в этом руководстве
Этот учебник также работает с веб-страницы ASP.NET 2.
Создание простой HTML-формы
Создайте новый веб-сайт.
В корневой папке создайте веб-страницу с именем Form. cshtml и введите следующую разметку:
На этом этапе при нажатии кнопки Submit ничего не происходит. Чтобы сделать форму полезной, необходимо добавить код, который будет выполняться на сервере.
Чтение вводимых пользователем данных из формы
Для обработки формы необходимо добавить код, считывающий отправленные значения полей и выполняющий с ними какие-либо действия. В этой процедуре показано, как считывать поля и отображать вводимые пользователем данные на странице. (В рабочем приложении, как правило, вы выполняете более интересные действия с вводом данных пользователем. Это можно сделать в статье о работе с базами данных.)
В верхней части файла Form. cshtml введите следующий код:
Когда пользователь впервые запрашивает страницу, отображается только пустая форма. Пользователь (который будет вам) заполняет форму, а затем нажимает кнопку Отправить. Он отправляет (отправляет) входные данные пользователя на сервер. По умолчанию запрос переходит на ту же страницу (а именно, Form. cshtml).
При отправке страницы на этот раз введенные значения отображаются непосредственно над формой:
Значения формы хранятся в объекте Request.Form в виде строк. Поэтому, если необходимо работать со значением как с числом или с датой, так и с другим типом, необходимо преобразовать его из строки в этот тип. В этом примере метод AsInt Request.Form используется для преобразования значения поля Employees (который содержит число сотрудников) в целое число.
Откройте страницу в браузере, заполните поля формы и нажмите кнопку Отправить. На странице отображаются введенные значения.
Кодировка HTML для внешнего вида и безопасности
Рекомендуется использовать кодировку HTML при каждом отображении строк (входных данных), полученных от пользователя. В противном случае пользователь может попытаться получить веб-страницу для запуска вредоносного сценария или выполнить какие-либо другие действия, которые принарушат безопасность веб-сайта или не только то, что вам нужно. (Это особенно важно, если вы принимаете ввод пользователя, сохраняете его в любом расположении, — а затем отображаете его позже, например, в виде комментария к блогу, проверки пользователя или что-то вроде этого.)
Проверка введенного пользователем
Пользователи делают ошибки. Вы попросите их заполнить поле, и они забывают, или попросите их ввести число сотрудников, а вместо этого ввести имя. Чтобы убедиться в правильности заполнения формы перед ее обработкой, проверьте входные данные пользователя.
В этой процедуре показано, как проверить все три поля формы, чтобы убедиться, что пользователь не оставляет их пустыми. Кроме того, проверяется, является ли значение количество сотрудников числом. При наличии ошибок отобразится сообщение об ошибке, сообщающее пользователю, какие значения не прошли проверку.
В файле Form. cshtml Замените первый блок кода следующим кодом:
Чтобы отобразить сообщения об ошибках проверки, можно вызвать HTML. ValidationMessage и передайте ему имя поля, для которого должно быть получено сообщение.
Запустите страницу. Оставьте поля пустыми и нажмите кнопку Отправить. Отображаются сообщения об ошибках.
Добавьте строку (например, «ABC») в поле » число сотрудников » и нажмите кнопку Отправить еще раз. На этот раз отображается ошибка, указывающая, что строка не имеет правильный формат, а именно целое число.
Восстановление значений форм после обратных передач
Проверив страницу в предыдущем разделе, вы могли заметить, что при возникновении ошибки проверки все введенные вами данные (не только недопустимые) были потеряны, и пришлось повторно вводить значения для всех полей. Это иллюстрирует важный момент: когда вы отправляете страницу, обрабатываете ее, а затем снова отображаете страницу, страница повторно создается с нуля. Как вы видели, это означает, что все значения, которые были на странице при отправке, теряются.
Откройте страницу в браузере, заполните поля формы или оставьте их пустыми и нажмите кнопку Отправить. Отобразится страница, на которой отображаются отправленные значения.
Рис. 1. Улучшенные веб-формы с помощью HTML5
