Формы HTML5. Формы (form) на HTML5
Пока нам удалось создать несколько интересных версий сайта. Мы еще не охватили формы, в которых пользователи могут вводить данные. Формы широко используются по всему Интернету: поисковые системы вроде Google или Bing, поля статуса в Facebook, редактор писем в Gmail позволяют набирать или отправлять информацию.
Давайте сделаем простую форму, что позволит пользователям комментировать нашу статью. Мы хотим, чтобы форма выглядела как на следующем рисунке:
Теперь выберем отдельные компоненты, которые составляют форму. Мы будем использовать выделение одинаковым цветом для элементов, выполняющих аналогичные функции.
Как видите, синий цвет указывает на имена или описание каждого поля. Зелёные элементы показывают места, где вы можете ввести однострочный текст. Оранжевая область позволяет вводить длинные куски текста, а фиолетовый цвет используется для кнопки отправки формы. Для каждой группы мы будем использовать один и тот же тег.
Для имен задействуем
Мы должны включить соответствующий тег, который говорит браузеру: «Эй, форма начинается здесь!». Это очень похоже на тег
Теперь мы хотим добавить первое описание: «Ваше имя». Начиная отсюда мы будем рассматривать фрагменты кода, которые содержатся в разделе
Здесь у нас есть элемент
Ниже показано, как это поле выглядит для таких типов полей.
Вы будете использовать в коде для указания, что пользователь может набирать текст в этом поле. Обратите внимание, что текстовые поля могут быть оформлены с помощью CSS. Мы можем изменить рамку, ширину или расстояние между текстом и границей текстового поля. Грубый пример показан ниже.
Атрибут name используется для именования каждого поля. Это полезно, когда вы посылаете форму на сервер, помогает определить, какое значение из какого поля приходит.
Отметим также взаимосвязь между значением id и значением атрибута for атрибута в
В атрибуте for вы должны использовать идентификатор поля, описание которого находится в
Давайте сделаем другую форму, теперь для поля email.
Единственная разница в том, что атрибут type имеет значение email . Смысл его, конечно, в том, что пользователь может ввести свою электронную почту. Обратите внимание, что набирается в поле email должно быть проверено на правильность адреса электронной почты. Если это некорректный адрес, то браузер отобразит сообщение об ошибке и не станет отправлять форму.
Следующим полем для добавления является место для комментария. Для длинных текстов мы используем тег
Обратите внимание, что мы использовали два новых атрибута: rows и cols . Атрибут rows применяется для установки количества строк текста, которые могут быть введены в поле, пока не появится полоса прокрутки. cols применяется для определения количества символов в каждой строке. Попробуйте самостоятельно изменить значения и посмотреть, как всё поле расширяется или сжимается соответственно.
Последнее, что нам нужно добавить, это кнопка для отправки формы.
Элемент содержит атрибут type равный submit . То что вы напишите в атрибуте value будет отображаться как текст на кнопке.
От автора: вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.
В нашей форме регистрации используется 4 из 10 типов, которые вы все знаете: checkbox, text, password и submit. Ниже приведен полный список доступных в HTML5 типов поля input:
В спецификации HTML5 говорится про еще 9 дополнительных типов, с помощью которых можно создавать специфичные UI-элементы, а также проводить нативную валидацию данных:
В HTML5.1 и WHATWG HTML Living Standard включены еще четыре типа, связанных с датой, три из которых довольно хорошо поддерживаются в современных браузерах:
datetime (не поддерживается ни в одном браузере)
Давайте детально разберем каждый новый тип, а также посмотрим, как их можно использовать.
Search
Тип инпута search (type=”search”) – это поисковое поле, однострочный инпут для ввода одной или более поисковых фраз. Из спецификации:
«Разница между текстовым типом и типом поиска чисто стилистическая: на платформах, где поля поиска отличаются от обычных текстовых полей, поисковой тип приведет input в соответствие со стилями платформы.»
Множество браузеров стилизуют поисковые поля под манер браузерных или поисковых блоков операционной системы. Chrome, Safari, Opera и IE добавили функцию удаления текста по клику на иконку «х», которая появляется, как только начинается ввод текста (см. на Рисунке 4.5). В Chrome и Opera также очищаются поля даты/времени, а IE11 добавляет иконку «х» почти ко всем типам, в том числе и к текстовым.
Рисунок 4.5. поле типа search стилизовано под поисковые поля операционной системы
На устройствах кампании Apple поисковые поля имеют скругленные углы по умолчанию в Chrome, Safari и Opera, что дублирует внешний вид поисковых полей в самой операционной системе. На планшетах с динамической клавиатурой кнопка «Перейти» отображается в виде иконки поиска или слова «искать». Все зависит от устройства. Если добавить нестандартный атрибут, то в Chrome и Opera появится иконка лупы.
Можно по-старому использовать type=”text”, однако новый тип search – это визуальная подсказка пользователям, куда им нужно нажать, чтобы найти сайт. Кроме того, новый тип очень похож на стандартные поля поиска, к которым привыкли пользователи. На сайте The HTML5 Herald нет поиска, но он мог быть таким:
< form id = "search" method = "get" > < label for = "s" > Search < / label > < input type = "search" id = "s" name = "s" / > < input type = "submit" value = "Search" / > < / form > |
В браузерах без поддержки тип search отображается в виде обычного текстового поля, поэтому нет причин не использовать его там, где это подходит.
Email адреса
Не удивительно, но тип email (type=”email”) используется для установки одного или нескольких email адресов. Он поддерживает Булев атрибут multiple, с помощью которого через запятую (с пробелом) можно указать несколько адресов.
Давайте изменим нашу форму, поставим type=”email” на поля с электронной почтой:
< label for = "email" > My email address is < / label > < input type = "email" id = "email" name = "email" / > |
Если поменять тип с text на email, не произойдет никаких визуальных изменений. Input все так же выглядит, как обычное текстовое поле. Однако они отличаются.
Изменения можно посмотреть на сенсорном устройстве. Когда поле email получает фокус, на большинстве сенсорных устройств (например, iPad или Android телефон с Chromium) отобразится клавиатура, оптимизированная для ввода адреса электронной почты. На клавиатуре появится символ @, точка, пробел, но не будет запятой, как показано на Рисунке 4.6.
Рисунок 4.6. поле типа email с пользовательской клавиатурой на устройстве под управлением iOS
В браузерах Firefox, Chrome, Opera и Internet Explorer 10 при неправильном вводе почты выскакивает сообщение об ошибке. Это происходит, когда вы пытаетесь отправить форму с текстом, который не распознался как один или несколько адресов. Стандартное сообщение об ошибке показано на Рисунке 4.7.
Рисунок 4.7. сообщение об ошибке о неправильном вводе адреса электронной почты в браузере Opera (слева) и Firefox (справа)
Заметка: пользовательские сообщения о проверке
Не нравится стандартное сообщение об ошибке в браузере? Установите свое с помощью.setCustomValidity(errorMsg). SetCustomValidity принимает лишь один параметр – сообщение об ошибке. Если установлено свое сообщение о проверке, то после правильного ввода необходимо очистить строку с сообщением (значение false), чтобы форма отправилась:
function setErrorMessages(formControl) { var validityState_object = formControl.validity; if (validityState_object.valueMissing) { formControl.setCustomValidity("Please set an age (required)"); } else if (validityState_object.rangeUnderflow) { formControl.setCustomValidity("You\"re too young"); } else if (validityState_object.rangeOverflow) { formControl.setCustomValidity("You\"re too old"); } else if (validityState_object.stepMismatch) { formControl.setCustomValidity("Counting half birthdays?"); } else { //если ввод валидный, должно быть false, или будет ошибка formControl.setCustomValidity(""); } }
function setErrorMessages (formControl ) { var validityState_object = formControl . validity ; if (validityState_object . valueMissing ) { formControl . setCustomValidity ("Please set an age (required)" ) ; } else if (validityState_object . rangeUnderflow ) { formControl . setCustomValidity ("You\"re too young" ) ; } else if (validityState_object . rangeOverflow ) { formControl . setCustomValidity ("You\"re too old" ) ; } else if (validityState_object . stepMismatch ) { Формы HTML-формы - это простые элементы управления HTML, которые применяются для сбора информации от посетителей веб-сайта. К ним относятся текстовые поля для ввода данных с клавиатуры, списки для выбора предопределенных данных, флажки для установки параметров и т. п. Существует бесчисленное количество способов использования HTML-форм, и если вы побродили по просторам Интернета всего лишь несколько дней, то, несомненно, использовали их для разных целей - от регистрации на каком-либо форуме или получения почтового ящика до просмотра биржевого курса или покупки товара в интернет-магазине. HTML-формы существовали с самых ранних времен языка HTML, и с тех пор они нисколько не изменились, несмотря на определенные серьезные усилия. Разработчики веб-стандартов несколько лет колдовали над стандартом XForms , который должен был заменить HTML-формы, но его постиг такой же провал, как и стандарт XHTML 2. Хотя стандарт XForms позволял легко и элегантно решать некоторые задачи, он также имел и значительные недостатки. Например, код XForms был очень объемистый, и для работы с ним нужно хорошее знание стандарта XML. Но самое большое препятствие состояло в том, что стандарт XForms не был совместим с HTML-формами ни в каких отношениях. Это означало, что разработчикам нужно было бы бросаться в неизведанные воды новой модели без вспомогательных плавсредств, а лишь со слепой верой и огромным мужеством. Но так как разработчики основных браузеров никогда не заморачивались с реализацией XForms в своих продуктах по причине его слишком большой сложности и небольшого использования, сообщество веб-разработчиков так никогда и не сделало этот прыжок. Стандарт HTML5 предлагает другой подход. Вместо того чтобы начинать с нуля, как в XForms, он совершенствует уже существующую модель HTML-форм. Это означает, что HTML5-формы могут работать и на старых браузерах, лишь без новых примочек и наворотов. HTML5-формы также позволяют применять новые возможности, которые уже используются разработчиками в настоящее время. Эти возможности более доступны, не требуют написания страниц сценариев JavaScript или применения инструментариев JavaScript сторонних разработчиков. Что такое форма?Скорее всего, вам приходилось работать с формами раньше. Но если нет или вы порядочно подзабыли эту тему, следующий материал позволит вам получить необходимые сведения для более углубленного изучения этой области веб-дизайна. Веб-форма - это набор текстовых полей, списков, кнопок и других активизируемых щелчком мыши элементов управления, посредством которых посетитель страницы может предоставить ей тот или иной вид информации. Формы в Интернете повсюду - благодаря формам мы можем создавать учетные записи электронной почты, просматривать и покупать товары в интернет-магазинах, осуществлять финансовые транзакции и многое другое. Самая простая форма - это одинокое текстовое поле поисковых систем, таких как Google: Все основные веб-формы работают одинаково. Пользователь вводит определенную информацию, а потом нажимает кнопку, чтобы отправить введенную информацию на веб-сервер. По прибытию на веб-сервер эта информация обрабатывается каким-либо приложением, которое потом предпринимает соответствующий очередной шаг. Перед тем как отослать новую страницу назад браузеру, серверная программа может обратиться к базе данных, чтобы извлечь или сохранить информацию. Сложность этого процесса состоит в том, что существуют сотни разных способов реализации серверного приложения, которое обрабатывает поступившие из формы данные. Некоторым разработчикам может быть достаточно элементарных сценариев для манипулирования полученными данными, в то время как другие могут использовать средства высшего уровня, которые упаковывают данные из формы в аккуратные программные объекты. Но в любом случае, задача перед этими приложениями стоит, по большому счету, одинаковая - исследовать данные из формы, выполнить какие-либо действия с ними, а потом на основе полученных результатов отправить браузеру новую страницу. Модернизация традиционной HTML-формыЛучший способ обучения работе с формами HTML5 - это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент Пожалуйста, заполните форму. Обязательные поля помечены * Добавьте немного стилей CSS: Body { font-family: "Palatino Linotype", serif; max-width: 600px; padding: 0px 30px; } h1 { margin-bottom: 0px; } p { margin-top: 0px; } fieldset { margin-bottom: 15px; padding: 10px; } legend { padding: 0px 3px; font-weight: bold; font-variant: small-caps; } label { width: 110px; display: inline-block; vertical-align: top; margin: 6px; } em { font-weight: bold; font-style: normal; color: #f00; } input:focus { background: #eaeaea; } input, textarea { width: 249px; } textarea { height: 100px; } select { width: 254px; } input { width: 10px; } input { width: 170px; padding: 10px; } И вот результат: Как и во всех формах, большая часть работы в нашем примере выполняете универсальным элементом , который собирает данные и создает флажки, переключатели и списки. Для ввода одной строки текста применяется элемент , а для нескольких - элемент ; элемент
Одним из ограничений HTML-форм является то, что разработчик не может контролировать каким способом браузер отображает элементы управления формы. Например, если вы хотите заменить унылое серое поле флажка большим черно-белым полем с жирной красной галочкой, вам этого не удастся. (Одно из решений этой проблемы - создать с помощью JavaScript элемент с поведением, подобным флажку, иными словами, элемент меняет свой внешний вид, когда на нем щелкают.) Это ограничение сохранилось и в HTML5 и распространяется на все новые элементы управления, которые мы рассмотрим. Это означает, что формы не подойдут для разработчиков, которым нужен полный контроль над внешним видом своих страниц в общем и требуются элементы управления с особым внешним видом в частности. Теперь, когда у нас есть форма, с которой можно работать, настало время улучшить ее с помощью HTML5. Начнем мы это в следующих разделах с добавления подстановочного текста подсказок и поля с автоматическим фокусом. Добавление подсказокОбычно поля новой формы не содержат никаких данных. Для некоторых пользователей такая форма может быть не совсем понятной, в частности, какую именно информацию нужно вводить в конкретное поле. Поэтому часто поля формы содержат пример данных, которые нужно ввести в них. Этот подстановочный текст также называется "водяным знаком", так как он часто отображается шрифтом светло-серого цвета, чтобы отличить его от настоящего, введенного содержимого. Пример такого подстановочного текста показан на рисунке: Вверху, когда поле пустое, в нем отображается подстановочный текст. Внизу, когда пользователь щелкает мышью в поле (устанавливая в нем фокус), подстановочный текст исчезает. Если пользователь переходит в другое поле, не введя ничего в первое, то поле снова заполняется подстановочным текстом. Подстановочный текст для поля создается с помощью атрибута placeholder : ... Браузеры, не поддерживающие подстановочный текст, просто не обращают внимания на атрибут placeholder; особенно грешит этим Internet Explorer. К счастью, это не такая уж и большая проблема, т.к. подстановочный текст - всего лишь приятная примочка, не обязательная для функционирования формы. В настоящее время не существует стандартного, единообразного способа изменить внешний вид подстановочного текста, например, выделить его курсивом или шрифтом определенного цвета. Со временем разработчики браузеров создадут требуемые для этого обработчики. Но пока либо нужно применять специфические для браузера CSS-псевдоклассы (а именно -webkit-input-placeholder и -moz-placeholder ), либо смириться с таким порядком вещей. А вот псевдокласс focus обеспечивается лучшей поддержкой, и его можно использовать, чтобы изменять внешний вид текстового поля при получении фокуса. Например, сделать фон поля более темным, чтобы оно выделялось среди остальных, можно следующим образом: Input:focus { background: #eaeaea; } ФокусТак как форма предназначена для ввода информации, первым делом после ее загрузки пользователи захотят вводить эту информацию. К сожалению, делать это они не смогут до тех пор, пока не щелкнут мышью по первому полю или выделят его с помощью клавиши Пользователю можно помочь в этом, установив фокус на нужном начальном поле автоматически. Это можно сделать с помощью JavaScript, вызывая метод focus() требуемого элемента . Но этот подход требует лишней строки кода и иногда может вызывать раздражающие неувязки. Например, особо проворные пользователи могут опередить вызов метода focus(), щелкнуть в каком-либо другом поле и начать вводить в нем, а когда метод, наконец, вызовется, пользователь грубо выдвинется из выбранного им поля и переместится в поле, выбранное методом. Но если управлять фокусом может браузер, он может быть несколько более смышленым и перемещать фокус только в том случае, если пользователь еще не выбрал другое поле. На этой идее основан новый HTML5-атрибут autofocus , который можно вставить в элемент или
Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за исключением Internet Explorer. Но опять же, эта проблема легко решается. Проверить поддержку атрибута autofocus конкретным браузером можно с помощью инструмента Modernizr (который мы обсуждали в статье "Поддержка браузерами HTML5") и, если необходимо, запускать собственный код для автоматического фокуса. Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями. Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега Рассмотрим пример использования: В этом примере мы:
В браузере оба варианта (метода) использования текстовых меток выглядят идентично: Подсказка для полей вводаДавайте рассмотри пример использования: Password: type = "password" name = "password" placeholder = "Введите ваш пароль" > В данном примере мы указали для элемента с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода. Результат нашего примера: Вопросы и задачи по темеПеред тем как перейти к изучению следующей темы пройдите практическое задание:
Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу. После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
Популярное в рубрике:
|