Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием 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-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
2. Группировка элементов формы
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
4. Текстовые поля ввода
Таблица 4. Атрибуты элемента
7. Кнопки
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
После обновлений, внесенных в Dreamweaver Creative Cloud, поддержка HTML-элементов формы была расширена. См. сведения в разделе Расширенная поддержка элементов форм в HTML5.
Когда посетитель вводит данные в форму, отображенную в веб-браузере, и нажимает кнопку «Отправить», эти данные отправляются на сервер, где обрабатываются серверным сценарием или приложением. Сервер отвечает, отправляя обработанные сведения обратно пользователю (или клиенту) или выполняя некоторые действия с содержимым формы.
Имеется возможность создавать формы для передачи данных на большинство серверов приложений, в том числе сервера PHP, ASP и ColdFusion. При использовании ColdFusion в формы можно также добавлять элементы управления, специфические для ColdFusion.
Данные формы также можно отправить непосредственно получателю электронной почты.
Объекты формы
В Dreamweaver элементы ввода данных в форме называются объектами формы. Объекты формы позволяют пользователю вводить данные. В форму можно добавить следующие объекты формы.
Позволяют вводить любой буквенно-цифровой текст. Текст может отображаться как одна строка, несколько строк, а также в виде поля для ввода пароля, в котором введенный текст заменяется звездочками или жирными маркерами, чтобы скрыть текст от посторонних.
Пароли и другие данные, отправляемые через поле для ввода пароля, не шифруются. Переданные данные можно перехватить и прочитать в виде буквенно-цифрового текста. По этой причине всегда необходимо обеспечивать шифрование данных, которые нужно сохранить конфиденциальными.
Содержат сведения, введенные пользователем, такие как имя, адрес электронной почты или настройки отображения, которые используются потом, когда пользователь посещает сайт в следующий раз.
При нажатии запускают выполнение действия. Можно добавить специальное имя или метку для кнопки или использовать одну из заранее определенных меток «Отправить» или «Сброс». Кнопку можно использовать для передачи данных формы на сервер или сброса значений формы. Также можно назначить другие задачи обработки, определенные в сценарии. Например, при нажатии кнопки может подсчитываться общая стоимость выбранных предметов на основании указанных значений.
Позволяют выбрать несколько вариантов в группе. Пользователь может выбрать любое число вариантов. В следующем примере показаны три установленных флажка: «Серфинг», «Катание на горном велосипеде» и «Рафтинг».
Позволяют выбрать только один вариант. Выбор элемента в группе переключателей отменяет выделение всех остальных элементов в этой группе (группа состоит из двух или большего числа кнопок с одним названием). В приведенном ниже примере выбран вариант Рафтинг. Если нажать Серфинг, кнопка Рафтинг автоматически очищается.
Содержат значения параметра в списке с прокруткой, из которых можно выбрать несколько вариантов. При выборе варианта «Список» в меню отображаются значения параметра, из которых можно выбрать только один элемент. Используйте меню при ограниченном пространстве, когда необходимо отобразить много элементов или контролировать значения, возвращаемые на сервер. В отличие от текстовых полей, в которые можно ввести любой текст, включая некорректные данные, здесь определяются конкретные значения меню.
Всплывающее меню в HTML-форме отличается от графического всплывающего меню. Дополнительные сведения о создании, редактировании, а также отображении и скрытии графического всплывающего меню указаны в ссылке в конце этого раздела.
Представляют собой навигационные списки или всплывающие меню, которые позволяют вставить меню, в котором каждый пункт связан с документом или файлом.
Позволяют находить файл на компьютере и загружать его в виде данных формы.
Позволяют вставить изображение в форму. Поля изображения можно использовать для создания графических кнопок, таких как «Отправить» или «Сброс». Чтобы использовать изображение для задачи, отличной от передачи данных, нужно добавить к объекту формы поведение сервера.
Создание HTML-формы
(Только для пользователей Creative Cloud): в рамках поддержки HTML5 на панели «Свойства» для элементов формы были добавлены новые атрибуты. Кроме того, четыре новых элемента формы (адрес электронной почты, поиск, телефон, URL-адрес) были добавлены в раздел «Формы» панели «Вставка». См. дополнительные сведения в разделе Расширенная поддержка элементов форм в HTML5.
В представлении «Дизайн» формы обозначены красным пунктирным контуром. Если этот контур не отображается, выберите меню «Просмотр» > «Вспомогательные элементы» > «Невидимые элементы».
Свойства HTML-формы отображаются в инспекторе свойств («Окно» > «Свойства»):
а. Чтобы выбрать форму, щелкните контур формы в окне документа.
б. В поле «Имя формы» введите уникальное имя, по которому можно будет идентифицировать форму.
Присвоив форме имя, вы сможете ссылаться на нее или контролировать ее, используя язык сценариев, например JavaScript или VBScript. Если не присвоить форме имя, Dreamweaver автоматически генерирует имя, используя синтаксис formn, увеличивая значение n для каждой добавляемой на страницу формы.
в. В поле «Действие» укажите страницу или сценарий, в котором будут обрабатываться данные формы, указав путь или щелкнув значок папки, чтобы перейти на нужную страницу или в нужный сценарий. Пример: processorder.php.
г. Во всплывающем меню «Метод» укажите метод передачи данных формы на сервер.
Задайте любой из следующих параметров.
По умолчанию — для отправки данных формы на сервер будет использована настройка браузера по умолчанию. Как правило, значение по умолчанию — метод GET.
GET — добавляет значение в URL-адрес, запрашивающий страницу.
POST — вставляет данные формы в HTTP-запрос.
Не используйте метод GET для отправки длинных форм. Длина URL-адреса ограничена 8192 символами. Если объем отправленных данных слишком велик, данные будут обрезаны, что приведет к неожиданным результатам или сбою обработки.
Динамические страницы, созданные параметрами, которые передаются методом GET, можно пометить закладками, потому что все значения, необходимые для повторного создания страницы, содержатся в URL-адресе, отображаемом в поле «Адрес» браузера. А динамические страницы, созданные параметрами, которые передаются методом POST, пометить закладкой невозможно.
При сборе имен пользователей и паролей, номеров кредитных карт или других конфиденциальных сведений метод POST является более безопасным, чем метод GET. Однако данные, передаваемые методом POST, не шифруются и могут быть легко перехвачены хакерами. Для защиты данных используйте безопасное подключение к безопасному серверу.
д. Во всплывающем меню «Тип шифрования» укажите MIME-тип кодировки данных, которые отправляются на сервер для обработки (необязательно).
Параметр по умолчанию application/x-www-form-urlencode обычно используется вместе с методом POST. При создании поля для загрузки файла укажите тип MIME multipart/form-data.
е. Во всплывающем меню «Назначение» укажите окно, в котором нужно отображать данные, которые возвращаются вызываемой программой (необязательно).
Если названное окно не открыто, открывается новое окно с этим именем. Задайте любое из следующих значений целевого объекта.
_blank — открывает целевой документ в новом неименованном окне.
_parent — открывает целевой документ в родительском окне окна, в котором отображается текущий документ.
_self — открывает целевой документ в том же окне, где была отправлена форма.
_top — открывает целевой документ в основной части текущего окна. Это значение можно использовать для того, чтобы целевой документ занимал все окно, даже если оригинал документа отображался во фрейме.
Вставьте объекты формы в страницу:
а. Поместите курсор вставки в то место формы, где должен отображаться объект формы.
b. Выберите объект в меню «Вставка» > «Форма» или выберите категорию «Формы» на панели «Вставка».
в. Заполните поля в диалоговом окне «Атрибуты специальных возможностей тегов Input». Для получения дополнительных сведений нажмите кнопку «Справка» в этом диалоговом окне.
Если диалоговое окно «Атрибуты специальных возможностей тегов Input» не видно, возможно, причина заключается в следующем: при вставке объекта формы курсор вставки был в представлении кода. Убедитесь, что курсор вставки находится в представлении конструктора, и повторите попытку. Дополнительные сведения по этой теме см. в статье Дэвида Пауэрса Создание HTML-форм в Dreamweaver.
г. Задайте свойства объектов.
д. Укажите имя объекта в инспекторе свойств.
Каждый объект текстового поля, невидимого поля, флажка и меню со списком должен иметь уникальное имя, которое определяет объект в форме. Названия объектов формы не могут содержать пробелов или специальных символов. Можно использовать любое сочетание букв, цифр и знака подчеркивания ( _ ). Надпись, назначенная объекту, является именем переменной, в которой хранится значение (введенные данные) поля. Это значение отправляется на сервер для обработки.
Все переключатели в группе должны иметь одинаковое имя.
е. Чтобы пометить текстовое поле, флажок или переключатель на странице, щелкните рядом с объектом и введите метку.
Для форматирования форм используйте разрывы строк, разрывы абзацев, предварительно форматированный текст или таблицы. Нельзя вставлять форму в другую форму (это значит, что теги не могут пересекаться), однако на странице можно разместить несколько форм.
При разработке форм не забывайте присваивать полям формы метки с описательным текстом, чтобы пользователь мог понять, на какие вопросы он отвечает. Например, укажите метку «Введите свое имя» для поля с запросом имени.
Руководство по созданию форм можно найти по адресу www.adobe.com/go/vid0160_ru.
Руководство по форматированию форм с помощью CSS можно найти по адресу: www.adobe.com/go/vid0161_ru.
Свойства объекта текстового поля
Выберите объект текстового поля и задайте следующие параметры в инспекторе свойств:
Определяет максимальное число знаков, которые могут отображаться в поле. Это значение может быть меньше, чем «Максимальное число знаков», определяющее максимальное число символов, которые можно ввести в поле. Например, если «Ширина знака» равна 20 (значение по умолчанию), а пользователь вводит 100 символов, в текстовом поле будут видны только 20 из этих символов. Хотя не все символы видны в поле, они распознаются объектом поля и отправляются на сервер для обработки.
Макс. число символов
Определяет максимальное число символов, которые можно ввести в поле для однострочных текстовых полей. Используйте параметр «Максимальное число знаков» для ограничения длины почтовых индексов пятью символами, ограничения паролей десятью символами и т. д. Если поле «Максимальное число знаков» не заполнено, пользователь может ввести текст любой длины. Если длина текста превышает ширину символов поля, то текст будет прокручиваться. Если пользователь превышает максимальное количество символов, форма издает предупредительный сигнал.
(Доступно, если выбран вариант «Многострочное») Задает высоту поля для многострочных текстовых полей.
Формы являются неотъемлемой частью Интернета, так как они предлагают сайтам метод сбора информации от пользователей и обработки запросов, а также элементы управления практически для любого мыслимого применения. С помощью элементов управления или полей, формы могут запросить небольшой объём информации — часто это поисковый запрос, имя пользователя или пароль. Или большой объём информации — возможно, данные о посылке, платёжная информация или предложение работы.
Мы должны знать как создавать формы чтобы получить входные данные от пользователя. В этом уроке мы обсудим, как использовать HTML для разметки формы, какие элементы использовать для захвата разных типов данных и как стилизовать формы с помощью CSS. Мы не станем слишком углубляться в то, как информация из формы обрабатывается на стороне сервера. Обработка форм представляет собой глубокую тему, вне области этой книги; здесь мы будем придерживаться создания и стилизации форм.
Инициализация формы
Чтобы добавить форму на страницу мы будем использовать элемент
Демонстрация формы для входа
На практике
С пониманием того как строить формы, давайте создадим страницу регистрации для нашего сайта Styles Conference, чтобы мы могли начать собирать интерес и продавать билеты на мероприятие.
Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента с классом row чуть ниже вступления и вложенный элемент
Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:
Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.
В нашем элементе с классом col-2-3 код должен выглядеть следующим образом:
В данный момент наш маркированный список не содержит маркеры списка. Все стили браузера по умолчанию были выключены сбросом CSS, мы добавили всё обратно в уроке 1. Давайте создадим несколько пользовательских стилей специально для этого списка.
Чтобы сделать это, добавим класс why-attend к маркированному списку.
Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:
Раздел нашей страницы Регистрация завершён, так что теперь пришло время обратиться к регистрационной форме. Начнём с добавления атрибутов action и method к элементу
Далее, внутри элемента
Для поля комментариев используется элемент
В разделе Регистрация нашего файла main.css мы хотим добавить следующие стили:
Вы заметите, что большинство из этих свойств и значений вращаются вокруг блочной модели, которую мы рассмотрели в уроке 4. Мы, прежде всего, настроили размеры разных полей формы, гарантируя, что они располагаются должным образом. Помимо добавления некоторых стилей блочной модели, мы настроили color и font-weight у нескольких элементов.
Теперь наша кнопка для отправки делит некоторые общие стили с кнопкой на главной странице. Мы воспользуемся классом btn-default чтобы применить некоторые новые стили конкретно к нашей кнопке.
Возвращаясь назад к разделу с кнопками в нашем файле main.css, добавим следующее:
Эти новые стили определяют размер и фон нашей кнопки, затем комбинируются с существующими стилями класса btn и создают финальную презентацию нашей кнопки.
Наша страница Регистрация закончена и посетители теперь могут начать бронировать билеты.
Рис. 10.07. Наша страница регистрации с формой
Демонстрация и исходный код
Ниже вы можете скачать исходный код сайта на данный момент.
Резюме
Формы играют большую роль в том, как пользователи взаимодействуют с сайтами, предоставляют им информацию и работают с ними. Мы предприняли все правильные шаги, чтобы не только узнать как создавать формы, но и как их стилизовать.
Напомним быстро, что мы обсудили в этом уроке:
Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.
Рис. 1. Улучшенные веб-формы с помощью HTML5
