Формы (form) на HTML5. Отправка данных формы

Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега . Значение атрибута for должно соответствовать значению глобального атрибута того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент будет находиться внутри элемента .

Рассмотрим пример использования:

Пример использования тега Да Нет
Да Нет

В этом примере мы:

• Внутри первой формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя , значения мы указали разные. Для первой checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes ). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.
  • Разместили два элемента , которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for , чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута необходимой нам радиокнопки.
• Внутри второй формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no ). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
  • Разместили два элемента , внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты (идентификатор для элемента), а для текстовых меток использовать атрибут for , чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Подсказка для полей ввода

Давайте рассмотри пример использования:

Пример использования атрибута placeholder Login:

Password:
Далее

В данном примере мы указали для элемента с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Используя полученные знания составьте следующую форму оформления заказа:

Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор...» (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).

Рис. 1. Вид поля для загрузки файла в Firefox

При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.

Синтаксис поля для отправки файла следующий.

Атрибуты перечислены в табл. 1.

Прежде, чем использовать данное поле, в форме необходимо сделать следующее:

задать метод отправки данных POST (method="post" );

установить у атрибута enctype значение multipart/form-data .

Форма для загрузки файла продемонстрирована в примере 1.

Пример 1. Создание поля для отправки файла

HTML5 IE Cr Op Sa Fx

Отправка файла на сервер

Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.

Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает , несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

• audio/* - выбор музыкальных файлов любого типа;
• image/* - графические файлы;
• video/* - видеофайлы.

В табл. 2 показаны некоторые допустимые значения атрибута accept .

Использование дополнительных атрибутов показано в примере 2.

HTML5 IE 10+ Cr Op Sa Fx

Загрузите ваши фотографии на сервер

Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept , Safari не поддерживает accept , а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg . Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept .

Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали о новых структурных элементах в HTML5. В данной статье я бы хотел рассказать, что нового принёс нам HTML5 при работе с формами. В первую очередь это проверка полей на соответствие некоторым условиям, без использования Javascript. Раньше мы все поля для ввода задавали тегом с атрибутом type="text" . Затем javascript’ом проверяли, чтобы поле было непустым, удовлетворяло определенным требованиями (например, e-mail пользователя). С приходом HTML5 вся эта процедура упростилась. Давайте начнём разбираться на примере. Давайте создадим форму и добавим тег с новым атрибутом type="email" (данный атрибут не даст нам отправить форму, пока не будет введен корректный адрес электронной почты):

Формы в HTML5

В данном случае мы указали тип поля email , и по сути, пока мы не введем корректный адрес электронной почты, форма не должна отправляться. Яндекс — браузер выводит очень интересную подсказку, когда мы вводим какую-нибудь ерунду в данное поле. Я ввел "123" и попробовал отправить. Вылезло сообщение о том, что необходим символ "@"

Т.е. если я введу "@" , то форма у нас должна отправится. Что собственно и произошло. Поэтому данным типом поля я не рекомендую пользоваться, если только не добавить в него ещё один атрибут — pattern .

Данный атрибут проверяет соответствие того, что мы ввели, тому что находится в pattern . Здесь необходимо знание регулярных выражений. Давайте сделаем, чтобы наша форма отправлялась только после того, как мы введем НОРМАЛЬНЫЙ адрес электронной почты, а не только строку, содержащую "@" :

Электронная почта:

Если вы не знаете, что такое регулярные выражения, то не беда. В одной из следующих статей они будут рассмотрены.

Вот теперь у нас поле работает нормально.
Атрибут required нужен для того, чтобы нельзя было отправить пустое выражение (required — обязателен к заполнению).

Также появился атрибут type со значением tel , который позволяет ввести телефон:
Здесь же опять необходимо указывать pattern , чтобы данное поле работало нормально, ведь формат телефонов у всех же разный. К примеру вот такой формат:

Телефон: Пример корректного номера 937-12-12

Пока телефон не будет введен правильным способом, форма никуда не отправится. Также отмечу, что pattern можно использовать и в простых текстовых полях (type="text" ).

Ещё один новый атрибут type со значением url , который позволяет проверить действительно ли введен url. Пример:

Url:

. В яндекс-браузере работает корректно.

Ещё один новый элемент — это ползунок, который задаётся атрибутом type со значением range .

У данного элемента есть минимальное и максимальное значение, которые затем можно куда-то передавать. Сразу домашнее задание:

Создайте рядом с этим ползунком текстовое поле, в которое будет выводиться значение ползунка при его изменении.

Если возникнут трудности, то код можно посмотреть ниже:

Работа с ползунком в HTML5

|

var range = document.getElementById("myrange"); var text = document.getElementById("mytext"); range.addEventListener("change", function(){ //подписываем на событие change text.value = range.value; });

Следующий новый элемент — это number . Сразу приведу пример и всё станет понятно:

В данном случае мы можем выбрать элементы от 5 до 100 с шагом 5. Данный элемент далек от совершенства. Мало того, что он в разных браузерах выглядит по-разному, так в него можно вручную внести значение (некоторые браузеры это обрабатывают). Хотя мой браузер вполне нормально обработал данное поле (пользуюсь яндекс-браузером). Использовать его пока не рекомендую, если только не делать проверки на Javascript. Ещё одно домашнее задание (на этот раз кода не будет):

Сделайте проверку на Javascript, что введенное значение в данное поле должно было кратно 5 (использовать событие change ).

Пока мы разобрали только один атрибут required . Но есть ещё и другие:

Атрибут autofocus служит для того, чтобы при переходе на данную страницу, фокус попал именно в данное поле.

Атрибут placeholder служит для подсказки. Как только вы что-то начнете вводить, подсказка исчезнет. Для примера:

Электронная почта:

В данной статье вы узнали какие новые элементы по работе с формами появились в HTML5 . Это была 1 часть статьи, в следующей статье мы рассмотрим другие элементы по работе с формами, подпишитесь, чтобы не пропустить.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Формы

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 - это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент .

Элемент удерживает вместе все элементы управления формы, которые также называются полями. Кроме этого, он также указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предоставляя URL в атрибуте action . Но если вся работа будет выполняться на стороне клиента сценариям JavaScript, то для атрибута action можно просто указать значение #.

Хорошо спроектированная форма разделяется на логические фрагменты с помощью элемента . Каждому разделу можно присвоить название, для чего используется элемент . В следующем листинге приводится разметка формы:

Пожалуйста, заполните форму. Обязательные поля помечены *

Контактная информация Имя *
Телефон
Email *
Персональная информация Возраст*
Пол Женщина Мужчина
Перечислите личные качества Выберите ваших любимых животных Зебра Кошак Анаконда Человек Слон Антилопа Голубь Краб

Добавьте немного стилей 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-элемент Описание

Однострочное текстовое поле		Выводит однострочное текстовое поле для ввода текста. Если для атрибута type указано значение password, вводимые пользователем символы отображаются в виде звездочек (*) или маркеров-точек ( )
Многострочное текстовое поле	...	Текстовое поле, в которое можно ввести несколько строчек текста
Флажок		Выводит поле флажка, который можно установить или очистить
Переключатель		Выводит переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить. Обычно создается группа переключателей с одинаковым значением атрибута name, вследствие чего можно выбрать только один из них
Кнопка		Выводит стандартную кнопку, активизируемую щелчком мыши. Кнопка типа submit всегда собирает информацию с формы и отправляет ее для обработки. Кнопка типа image делает то же самое, но позволяет вместо текста на кнопке вставить изображение. Кнопка типа reset очищает поля формы от введенных пользователем данных. А кнопка типа button сама по себе не делает ничего. Чтобы ее нажатие выполняло какое-либо действие, для нее нужно добавить сценарий JavaScript
Список	...	Выводит список, из которого пользователь может выбирать значения. Для каждого значения списка добавляем элемент

Одним из ограничений 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") и, если необходимо, запускать собственный код для автоматического фокуса.

Всем привет!
Эта статья будет полезна для всех начинающих веб-мастеров. Изучив материал статьи, вы с легкостью сможете при помощи некоторых атрибутов HTML5 вывести функциональные поля для формы, например, календарь, поле для выбора цвета, поле для выбора даты и времени, бегунок для выбора числа из диапазона и т.д.
Ну что, приступим

Дополнительные поля для формы

○ Поле « color »

Поле «color» поможет пользователю выбрать необходимый цвет. При нажатии на квадратик, откроется окно для выбора цвета:

Результат:

○ Поле « email »

Поле «email» специально создано для ввода адреса электронной почты. Это поле будет автоматически проверять, есть ли там знак «@ »:

○ Поле « url »

Поле «url» специально создано для ввода адреса сайта. Это поле будет проверять автоматически, есть ли там «https:// »:

○ Поле « range »

С помощью поля «range» можно определить значение нужного интервала. Это поле выглядит как ползунок, который перетаскивается мышкой. Диапазон чисел можно задать с помощью атрибута min (минимально допустимое число) и max (максимально допустимое число). С помощью атрибута step можно задать шаг допустимых чисел, например, если шаг равен 3 , то в поле будут выводиться числа 0,3,6,9,12 и т.д.

Результат:

○ Поле « search »

С помощью поля «search» можно сделать форму поиска по сайту.

○ Поле с выпадающим списком. Элемент «datalist» и атрибут «list»

Вы сможете создать форму с выпадающим списком, а также в этой же форме дать возможность пользователю написать свой вариант, если из предложенного списка ничего не подошло:

Результат:

○ « file »

С помощью «file» можно создать кнопку для отправки файлов из вашего компьютера.

Результат:

○ « placeholder »

С помощью «placeholder» можно в форме сделать текстовую подсказку для пользователя, что нужно вводить в поле.

Результат:

○ « required »

С помощью «required» можно указать поле в форме обязательное для заполнения.

Поля для выбора даты

○ Поле «date»

Поле «date» позволит вам создать поле для выбора даты. При нажатии в поле на треугольник, откроется календарь, где посетителю будет очень легко сориентироваться в дате и выбрать необходимое число, месяц и год (в формате 05.05.2015 ). Такую форму можно применить на сайте для заказов номеров гостиницы, билетов на поезд и т.д.

Результат:

○ Поле «datetime-local»

Поле «datetime-local» позволит вам создать поле для выбора даты и времени (в формате 05.05.2015 00:00 ).

Результат:

○ Поле «time»

Поле «time» позволит создать поле для выбора времени (в формате