Формы в HTML5. HTML5: атрибут формы required

Перевод: Влад Мержевич

Каждый знает о веб-формах, не так ли? Вставляем тег , несколько , может быть , завершаем это все кнопкой и готово.

Вы не знаете и половины об этом. HTML5 определяет более десятка новых типов полей, которые вы можете использовать в своих формах. И когда я говорю «использовать», я имею в виду что их можно использовать прямо сейчас - без каких-либо прокладок, хаков или обходных путей. Не волнуйтесь сильно, я не хочу сказать, что все эти новые захватывающие возможности на самом деле поддерживаются в любом браузере. Совершенно нет, я не имею в виду, что всеми. В современных браузерах, да, ваши формы покажут все, на что они способны. Но в старых браузерах ваши формы по-прежнему будут работать, хотя и не в полной мере. То есть эти возможности элегантно деградируют в каждом браузере. Даже в IE6.

Подсказывающий текст Поддержка подсказывающего текста

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
-	4.0+	4.0+	4.0+	11.0+	4.0+	-

Первое улучшение HTML5 относительно форм это возможность установки подсказывающего текста в поле ввода. Такой текст отображается в поле ввода, если поле пустое и у него нет фокуса. Как только вы щелкните в поле ввода (или перейдете к нему через Tab ) подсказывающий текст исчезает.

Вы, наверное, видели подсказывающий текст ранее. Например, Mozilla Firefox включает подсказывающий текст в адресной строке с надписью «Поиск в закладках и журнале».

Когда вы щелкаете по адресной строке, подсказывающий текст исчезает.

Вот как вы можете включить подсказывающий текст в свои формы.

Браузеры, которые не поддерживают атрибут placeholder , его просто игнорируют. Без вреда и нарушений.

Спроси профессора Маркапа

☞ В. Могу я использовать HTML разметку для атрибута placeholder ? Я хочу вставить картинку или, может, изменить цвета.

О. Атрибут placeholder может содержать только текст, никакого HTML-кода. Однако есть специальные расширения CSS, которые позволяют вам установить стиль текста в некоторых браузерах.

Поля с автофокусом Поддержка автофокуса

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
-	-	4.0+	3.0+	10.0+	-	-

Сайты могут использовать JavaScript для автоматического получения фокуса в первом поле формы. К примеру, на главной странице Google.com автофокус есть у поля для ввода поисковых ключевых слов. Хотя это и удобно для большинства людей, но может раздражать опытных пользователей и людей с особыми потребностями. Если вы нажмете пробел в ожидании прокрутки страницы, прокрутки не будет, потому что фокус находится в поле ввода формы (будет набираться пробел в поле вместо прокрутки). Если вы перевели фокус на другое поле ввода, пока страница загружается, скрипт автофокуса на сайте может «услужливо» переместить фокус обратно на исходное поле ввода, прерывая ваш набор и заставляя вводить текст в неверном месте.

Поскольку автофокус работает через JavaScript, могут быть сложности для обработки этих крайних вариантов и мало возможностей для тех людей, которые не хотят, чтобы веб-страница «похищала» их фокус.

Для решения этих проблема HTML5 вводит атрибут autofocus для всех элементов форм. Атрибут autofocus делает именно то, как и звучит: как только страница загружается, перемещает фокус в указанное поле. Но поскольку это всего лишь разметка, а не сценарий, поведение будет постоянным для всех сайтов. Кроме того, производители браузеров (или авторы расширений) могут предложить пользователям способ отключить автофокус.

Вот как вы можете установить поле формы с автофокусом.

Браузеры, которые не поддерживают атрибут autofocus , будут его игнорировать.

Что такое? Говорите, что желаете, чтобы автофокус работал везде, а не только в вычурных HTML5-браузерах? Вы можете оставить текущий скрипт с автофокусом, просто сделайте два небольших изменения:

• добавьте атрибут autofocus в код HTML;
• проверьте, поддерживает ли браузер атрибут autofocus , и если нет, запустите собственный скрипт.

Автофокус с альтернативой

if (!("autofocus" in document.createElement("input")) ) {
document.getElementById("q").focus();
}

Устанавливайте фокус как можно раньше

Многие веб-страницы ждут, пока сработает window.onload и устанавливают фокус. Но событие window.onload не сработает, пока все изображения не загрузятся. Если на вашей странице много изображений, такие наивные скрипты потенциально изменят фокус после того, как пользователь начал взаимодействовать с другой частью вашей страницы. Вот почему опытные пользователи ненавидят скрипты автофокуса.

Например, в предыдущем разделе скрипт автофокуса размещен сразу после поля формы, на который он ссылается. Это оптимальное решение, но оно может оскорбить ваши чувства ставить блок кода JavaScript в середине страницы (или более приземлено, ваша система может быть не настолько гибкой). Если вы не можете вставить скрипт в середине страницы, вы должны установить фокус через пользовательское событие, как $(document).ready() в jQuery вместо window.onload .

Автофокус через jQuery

$(document).ready(function() {

$("#q").focus();
}
});

Пользовательское событие jQuery срабатывает, как только DOM доступен - то есть ждет, пока загрузится текст страницы, но не ждет, пока все изображения загрузятся. Это не оптимальный подход - если страница необычно большая или сетевое соединение медленное, пользователь может по-прежнему взаимодействовать со страницей перед тем, как выполнится скрипт с фокусом. Но все же это намного лучше, чем ждать, пока произойдет событие window.onload .

Если вы согласны и готовы вставить скрипт с одним оператором в код вашей страницы, это компромисс, который менее противный, чем первый вариант и лучше чем второй. Вы можете использовать пользовательские события jQuery для задания собственных событий, скажем autofocus_ready. Тогда вы можете вызывать это событие вручную, сразу после доступности поля с автофокусом. Спасибо Е. М. Штенбергу за обучение меня этой технике.

Автофокус с альтернативным пользовательским событием

$(document).bind("autofocus_ready", function() {
if (!("autofocus" in document.createElement("input"))) {
$("#q").focus();
}
});





$(document).trigger("autofocus_ready");

Это решение оптимальное, как и первый подход. Фокус будет установлен в поле формы, как только это станет технически возможно, в то время как текст страницы все еще грузится. Часть логики приложения (фокус в поле формы) перенесена из тела страницы в раздел . Этот пример основан на jQuery, но концепция пользовательских событий не является уникальной для jQuery. Другие JavaScript-библиотеки вроде YUI и Dojo предлагает аналогичные возможности.

Подведем итоги.

• Правильная установка фокуса это важно.
• Если это возможно, пусть браузер использует атрибут autofocus в том поле, где вы желаете фокус.
• Если вы используете альтернативный код для старых браузеров, определяйте поддержку атрибута autofocus , чтобы скрипт выполнялся только в старых браузерах.
• Устанавливайте фокус как можно раньше. Вставьте скрипт с фокусом в код сразу же после поля формы. Если это не задевает вас, вставьте JavaScript-библиотеку, которая поддерживает пользовательские события, и вызывайте событие в коде сразу же после поля формы. Если это невозможно, используйте событие вроде $(document).ready() из jQuery.
• Ни при каких обстоятельствах не ждите, пока window.onload установит фокус.

Адреса электронной почты

Уже более десяти лет формы содержат всего несколько видов полей. Наиболее распространенные следующие.

Все эти типы полей по-прежнему работают в HTML5. Если вы «обновитесь до HTML5» (возможно сменой !DOCTYPE ), вам не придется делать ни единого изменения в ваших формах. Ура обратной совместимости!

Однако HTML5 определяет 13 новых типов полей и нет никаких причин не начать их использовать.

Первый из этих новых типов адрес электронной почты. Выглядит примерно так.

Я собирался написать предложение, которое началось «в браузерах, которые не поддерживают type="email" ...», но остановился. Почему? Потому что не уверен, что браузеры не поддерживают type="email" . Все браузеры «поддерживают» type="email" . Они могут не делать нечто специальное, но браузеры, которые не распознают type="email" будут относиться к нему как type="text" и отобразят как обычное текстовое поле.

Я подчеркну насколько это важно. В Интернете миллионы форм, которые просят ввести адрес электронной почты и все из них используют . Вы видите текстовое поле, вводите свой адрес электронной почты в него и все тут. И вот появляется HTML5, который определяет type="email" . Браузеры сходят с ума? Нет. Каждый браузер на Земле воспринимает неизвестный атрибут type как type="text" - даже IE6. Так что вы можете «обновить» ваши формы используя type="email" прямо сейчас.

Что случится, если скажем, браузер поддерживает type="email" ? Ну, это может означать что угодно. Спецификация HTML5 не требует какого-либо конкретного пользовательского интерфейса для новых типов полей. Опера дополняет поле формы небольшой иконкой. Другие HTML5-браузеры как Safari и Chrome отображают как текстовое поле - такое же, как type="text" - так что ваши пользователи не заметят разницу (пока не посмотрят исходный код).

И еще есть iPhone.

iPhone не имеет физической клавиатуры. Весь «набор» осуществляется нажатием по экранной клавиатуре, всплывающей в соответствующее время, например, когда вы перешли в поле формы на веб-странице. Apple сделал нечто хитрое в браузере iPhone-а. Он распознает некоторые новые поля HTML5 и динамически меняет экранную клавиатуру для оптимизации ввода.

К примеру, адрес электронной почты это текст, правильно? Конечно, но это особый вид текста. Так, практически все адреса электронной почты содержат символ @ и, по крайней мере, одну точку (.), но они вряд ли содержат пробел. Поэтому, когда вы используете iPhone и переходите к элементу , вы получите экранную клавиатуру, которая содержит пробел меньше обычного, а также выделенные клавиши для символов. и @.

Подведу итог. Нет никаких недостатков для немедленного перевода всех ваших полей с электронными адресами в type="email" . Практически никто этого не заметит, кроме пользователей iPhone, которые, вероятно, тоже этого не заметят. Но те, кто заметят, тихо улыбнутся и поблагодарят вас за то, что их работа стала немного легче.

Веб-адреса

Веб-адрес - которые зубрилы стандартов называли URL, за исключением нескольких педантов, которые называли URI - это еще один тип специализированного текста. Синтаксис веб-адреса ограничивается соответствующим стандартом Интернет. Если кто-то просит вас ввести веб-адрес в форму, он ожидает что-то вроде «http://www.google.com/», а не «125 Фарвуд Роуд». Косые линии являются общими - даже у главной страницы Google их три. Точки также распространены, но пробелы запрещены. И каждый веб-адрес имеет суффикс домена как «.com» или «.org».

И вот... (барабанная дробь, пожалуйста)... . На iPhone это выглядит следующим образом.

iPhone изменил свою виртуальную клавиатуру, как это сделал для адреса электронной почты, но теперь оптимизировал ее для набора веб-адреса. Пробел полностью заменен тремя виртуальными клавишами: косая линия, точка и «.com» (вы можете удерживать нажатой клавишу «.com», чтобы выбрать другой суффикс вроде «.org» или «.net»).

Браузеры, которые не поддерживают HTML5, будут относиться к type="url" как к type="text" , так что нет недочетов по использованию этого типа для всех полей, где нужно вводить веб-адрес.

Числа как счетчики

Следующий шаг: числа. Запрос числа более сложен, чем запрос адреса электронной почты или веб-адреса. Прежде всего, числа сложнее, чем вы думаете. Быстро выберите число. -1? Нет, я имел в виду число между 1 и 10,7 ½? Нет, нет, не дробь, тупица. π? Теперь вы просто выбрали иррациональное число.

Хочу заметить, у вас не часто спрашивают «просто число». Более вероятно, что будут просить число в определенном диапазоне. Вы можете только захотеть, чтобы в пределах этого диапазона были определенные типы чисел - может быть, целые числа, но не дроби или десятичные числа или что-то более экзотическое, например, кратные 10. HTML5 все это охватывает.

Выбрать число, почти любое

Рассмотрим по одному атрибуту.

• type="number" означает, что это числовое поле.
• min="0" указывает минимально допустимое значение для этого поля.
• max="10" является максимально допустимым значением.
• step="2" в сочетании с минимальным значением определяет допустимые числа в диапазоне: 0, 2, 4 и так далее, вплоть до максимального значения.
• value="6" значение по умолчанию. Должно выглядеть знакомым, этот же атрибут всегда используется для определения значений полей формы. Я упоминаю здесь об этом для отправной точки, что HTML5 основывается на предыдущих версиях HTML. Вам не нужно переучиваться, чтобы делать то, что вы уже делали.

Это код числового поля. Имейте в виду, что все эти атрибуты являются необязательными. Если у вас задан минимум, но не максимум, можете указать атрибут min , но не max . По умолчанию значение шага равно 1 и вы можете опустить атрибут step , пока не понадобится другое значение шага. Если нет значения по умолчанию, то атрибут value может быть пустой строкой или даже вообще опущен.

Но HTML5 не останавливается на достигнутом. За ту же самую низкую, низкую цену свободы вы получаете эти удобные методы JavaScript.

• input.stepUp(n) повышает значение поля на n.
• input.stepDown(n) понижает значение поля на n.
• input.valueAsNumber возвращает текущее значение как число с плавающей точкой (свойство input.value это всегда строка).

Проблемы с отображением? Ну, правильный интерфейс по управлению числами в браузерах реализован по-разному. На iPhone, где набор имеет сложности, браузер опять оптимизирует виртуальную клавиатуру для ввода чисел.

В настольной версии Оперы поле type="number" отображается как счетчик с небольшими стрелками вверх и вниз, которые можно нажать для изменения значений.

Опера уважает атрибуты min , max и step , поэтому вы всегда добьетесь приемлемого числового значения. Если вы увеличите значение до максимума, стрелка вверх в счетчике становится серой.

Как и со всеми другими полями ввода, что я обсуждал в этой главе, браузеры, которые не поддерживают type="number" , будут относиться к нему как к type="text" . Значение по умолчанию будет отображаться в поле (так как оно хранится в атрибуте value ), но другие атрибуты, такие как min и max будут игнорироваться. Вы можете свободно реализовать их самостоятельно или использовать JavaScript-фреймворк, который уже реализует управление счетчиком. Вначале проверьте , как здесь.

if (! .inputtypes.number) {
// нет встроенной поддержки для поля type=number
// может попробовать Dojo или другой JavaScript-фреймворк
}

Числа в виде ползунка

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

Теперь вы также можете иметь ползунок в форме. Код выглядит странно похожим на поле счетчика.

Все доступные атрибуты такие же, как и у type="number" - min , max , step , value - и означают то же самое. Единственное отличие состоит в пользовательском интерфейсе. Вместо поля для ввода, браузеры, как ожидается, отображают type="range" в виде ползунка. На момент написания последние версии Safari, Chrome и Opera работали с этим. К сожалению, iPhone отображает в виде простого текстового поля, он даже не оптимизирует свою экранную клавиатуру для ввода чисел. Все остальные браузеры просто рассматривать поле как type="text" , поэтому нет никаких причин начать использовать этот тип немедленно.

HTML 4 не включает выбор даты через календарь. JavaScript-фреймворки позволяют это обойти (Dojo , jQuery UI , YUI , Closure Library), но, конечно, каждое из этих решений требует «внедрения» фреймворка для любого встроенного календаря.

HTML5, наконец, определяет способ включить встроенный выбор даты без всяких скриптов. В действительности, их шесть: дата, месяц, неделя, время, дата + время и дата + время с часовым поясом.

Пока поддержка... скудна.

Поддержка выбора даты Тип Opera Другие браузеры

type="date"	9.0+	-
type="month"	9.0+	-
type="week"	9.0+	-
type="time"	9.0+	-
type="datetime"	9.0+	-
type="datetime-local"	9.0+	-

Вот как Opera отображает :

Если вам нужно время вместе с датой, Opera также поддерживает :

Если вам нужен месяц плюс год (например, срок действия кредитной карты), Opera может отобразить :

Менее распространенным, но доступным является выбор недели в году через :

Последнее, но не менее важное, это выбор времени с :

Выбор даты с альтернативой

...

var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
// Нет встроенной поддержки выбора даты:(
// Используйте Dojo/jQueryUI/YUI/Closure для ее создания,
// затем динамически замените элемент
}

Вероятно, другие браузеры в конечном итоге будут поддерживать эти типы. Подобно type="email" и другим типам, эти поля формы будут отображаться в виде обычного текста в тех браузерах, которые не распознают type="date" и его варианты. Если вы хотите, то можете просто использовать , чем сделаете пользователей Opera счастливыми, и подождите, пока другие браузеры наверстают упущенное. Более реально это использовать , но проверить, имеет ли браузер встроенную поддержку выбора даты, и включить альтернативное решение в виде скрипта по вашему выбору (Dojo , jQuery UI , YUI , Closure Library или другие варианты).

Окно поиска

Итак, поиск. Не только поиск от Google или Yahoo (ну, те тоже). Подумайте о любом окне поиска, на любой странице, на любом сайте. Амазон имеет окно поиска, Яндекс имеет окно поиска, большинство блогов тоже. Как они сделаны? , как и любое другое текстовое поле в сети. Давайте это исправим.

Поиск нового поколения

В некоторых браузерах вы не заметите никакого отличия от обычного текстового поля. Но если вы используете Safari на Mac OS X, это будет выглядеть так.

Нашли разницу? Поле ввода имеет закругленные углы! Я знаю, знаю, вы вряд ли можете сдержать свои чувства. Но подождите, это еще не все! Когда вы начнете вводить в поле type="search" Safari вставит небольшую кнопку «x» с правой стороны окна. Нажатие на «x» очищает содержимое поля. Google Chrome, который имеет под капотом ту же технологию, ведет себя так же. Обе эти маленькие хитрости выглядят и ведут себя аналогично родному поиску в iTunes и других клиентских приложениях Mac OS X.

Apple.com использует для поиска по своему сайту, чтобы помочь сайту передать «маколюбное» ощущение. Но здесь нет ничего специфичного для Маков. Это просто код, так что каждый браузер на любой платформе может выбрать, как отображать в соответствии с соглашениями платформы. Как и со всеми другими новыми типами, браузеры, которые не признают type="search" будут относиться к нему как type="text" , так что нет абсолютно никаких причин не начать использовать type="search" для всех ваших окон поиска прямо сегодня.

Профессор Маркап говорит

По умолчанию Safari не применяет к большинство стилей. Если вы хотите заставить Safari понимать поле для поиска как обычное текстовое поле (чтобы применить собственные стили), добавьте это правило к вашей таблице стилей.

input {
-webkit-appearance: textfield;
}

Спасибо Джону Лейну за обучение меня этому трюку.

Выбор цвета

HTML5 также определяет поле , которое позволяет выбрать цвет и возвращает его в шестнадцатеричном представлении. Ни один браузер выбор цвета не поддерживает, что является позором, потому что я всегда любил палитры Mac OS. Может быть, когда-нибудь.

Прим. переводчика. Opera 11 поддерживает эту возможность.

Валидация форм

В этой главе я говорил о новых элементах форм и новых возможностях, таких как автофокус, но я не упомянул, пожалуй, самую захватывающую часть форм HTML5: автоматическую проверку входных данных. Рассмотрим общие проблемы ввода адреса электронной почты в форме. Вероятно, у вас есть проверка на стороне клиента через JavaScript, после чего идет проверка на стороне сервера через PHP, Python или другой серверный язык. HTML5 никогда не сможет заменить проверку на стороне сервера, но он может когда-нибудь заменить проверку на стороне клиента.

Есть две большие проблемы, связанные с проверкой адреса электронной почты на JavaScript:

Некоторое количество ваших посетителей (вероятно, около 10%) не включают JavaScript.

Вы получите адрес неправильно.

Серьезно, вы получите адрес неправильно. Определение того, что набор случайных символов это корректный адрес электронной почты невероятно сложно . Чем сильнее вы смотрите, тем сложнее становится. Я уже говорил, что это очень, очень сложно ? Не проще ли повесить эту головную боль на ваш браузер?

Opera проверяет type="email"

Вот скриншот из Opera 11, хотя функциональность присутствует с Opera 9. Код включает в себя установку значения email для атрибута type . Когда пользователь Оперы пытается отправить форму с , браузер автоматически проверяет адрес почты, даже если скрипты отключены.

HTML5 также предлагает проверку веб-адресов с полем и чисел с . Проверка чисел принимает во внимание значения атрибутов min и max , поэтому браузеры не позволят вам отправить форму, если вы вводите слишком большое число.

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

Не проверяй меня

Браузеры медленно включают поддержку проверки форм в HTML5. Firefox 4 будет иметь полную поддержку. К сожалению, Safari и Chrome реализуют лишь частично: они проверяют элементы форм, но не выводят никаких видимых сообщений, когда поля формы не проходит проверку. Другими словами, если вы введете неверную (или неправильно составленную) дату в type="date" , Safari и Chrome не отправит форму, но и не будет говорить вам, почему это не сделали. Они будут устанавливать фокус на поле, которое содержит недопустимое значение, но не отображать сообщение об ошибке, как Opera или Firefox 4.

Обязательные поля Поддержка

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
-	4.0+	-	-	9.0+	-	-

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

Код для обязательных полей прост, насколько это возможно.

Браузеры могут изменить внешний исходный вид обязательного поля. Вот к примеру, как это выглядит в Mozilla Firefox 4.0.

Кроме того, если вы пытаетесь отправить форму без заполнения обязательного значения, Firefox выведет информационную панель, говорящую, что поле является обязательным и не может быть пустым.

Логический атрибут required HTML сообщает браузеру о возможности отправки данных формы только при заполнении обязательных полей. Это значит, что поле нельзя оставить пустым, и что в зависимости от других атрибутов или типов полей приниматься могут только конкретные типы значений. Чуть позже мы поговорим о том, как сообщать браузерам о необходимости отправки определенные типы данных.

Если обязательные поля остаются пустыми, форма не будет отправлена. Opera , Firefox , Internet Explorer 10+ и Chrome выдают пользователю сообщение об ошибке. Например, «Заполните это поле » или «Нужно заполнить пустые поля ».

В терминологии Javascript событие focus запускает элемент формы, когда на нее переключается фокус, когда фокус переходит на другой элемент или она теряет фокус.

В CSS можно использовать псевдокласс :focus для стилизации элементов, которые выделены в данный момент.

Атрибут required применим для любого типа элемента ввода, за исключением button , submit , image , color и hidden . У всех этих элементов имеется значение по умолчанию, поэтому дополнительный атрибут будет лишним. Синтаксис данного атрибута просто required или required=»required» , если вы используете XHTML-синтаксис .

Добавим атрибут HTML input required к форме регистрации. Сделаем поля имени, адреса электронной почты, пароля и даты подписки обязательными:

• Моё имя:
• Мой email:
• Мой вебсайт:
• Мой будущий пароль:

  (как минимум 6 символов, без пробелов)

• Мои знания HTML от 1 до 10:
• Хочу, чтобы моя подписка начиналась с:
• Я бы хотел получать копии книг The HTML5 Herald
• Также хочу подписаться на The CSS3 Chronicle

На скриншотах, приведенных ниже, можно видеть, что делает атрибут required HTML при попытке подтвердить форму:

Сообщение об обязательных полях в Firefox

Та же ситуация в Opera…

и в Google Chrome

Стилизация обязательных полей в форме

Вы можете стилизовать обязательные поля в формах при помощи псевдокласса :required,:optional или отрицательного псевдокласса :not(:required)) . Также можно стилизовать валидные и не валидные поля с помощью псевдоклассов :valid и :invalid . При помощи этих псевдоклассов HTML input required можно показывать пользователям, какие поля обязательны к заполнению:

input { background-position: 0% 50%; background-repeat: no-repeat; padding-left: 15px; } input:required { background-image: url("../images/required.png"); } input:focus:invalid { background-image: url("../images/invalid.png"); } input:focus:valid { background-image: url("../images/valid.png"); }

В данном случае мы добавляем фоновое изображение (звёздочку ) к обязательным полям формы. В input-элементы нельзя включать генерируемый контент. Поэтому лучше будет использовать фоновое изображение. Кроме этого валидные и не валидные поля можно выделить разными фоновыми картинками. Изменения будут заметны, только если пользователь выделил соответствующий элемент формы.

Предупреждение : Firefox стилизует не валидные элементы

Учтите, что браузер Firefox применяет к не валидным элементам собственную стилизацию (красную тень ), как было показано на одной из картинок выше. Чтобы отключить этот эффект для required HTML , воспользуйтесь следующим CSS-кодом :

:invalid { box-shadow: none; }

Подсказка : таргетированная стилизация для устаревших браузеров

Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами - здесь описано множество новых атрибутов и плюшек!

HTML формы могут казаться простыми, но они необходимы для большинства веб-сайтов и приложений. В HTML4 типы полей ввода были ограничены следующим списком:

• input type="text"
• input type="checkbox"
• input type="radio"
• input type="password"
• input type="hidden" - для данных, невидимых пользователю
• input type="file" - для загрузки файлов
• textarea - для ввода больших объемов текста
• select - для выпадающих списков
• button — обычно используется для отправки данных формы, но также можно использовать input type="submit" и input type="image"

К тому же:

• возможности стилизации с помощью CSS ограничены
• расширенные элементы, вроде элементов для выбора даты и цвета нужно реализовывать самостоятельно, с помощью кода
• валидация на стороне клиента требует JavaScript

Дополнительные типы полей

В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода

Тип	Описание
email	ввод email-адреса
tel	ввод телефонного номера - нет строгого синтаксиса, но разрывы строк будут удалены
url	ввод URL
search	поле поиска с разрывами строк автоматически удаляется
number	число с плавающей точкой
range	элемент управления для ввода примерного значения, обычно представляемого с помощью слайдеров
date	ввод дня, месяца и года
datetime	ввод дня, месяца, года, часа, минуты, секунды и микросекунды относительно текущей временной зоны
datetime-local	ввод даты и времени без временной зоны
month	ввод месяца и года без временной зоны
week	ввод номера недели без временной зоны
time	ввод времени без временной зоны
color	выбор цвета

Атрибуты полей ввода

Кроме перечисленных выше, поля ввода могут иметь любой из специфичных для формы атрибутов. Некоторые из них булевого типа, что означает, что они не требуют значений, например:

конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например

Атрибут	Описание
name	имя поля ввода
value	изначальное значение
checked	делает флажок или переключатель выбранным
maxlength	Максимальная длина вводимой текстовой строки. В HTML5 также может быть применена и для полей textarea
minlength	Минимальная длина строки. Данная возможность документирована, но на момент написания поддержка браузерами слабая, и HTML валидаторы ругаются. Альтернативный вариант использования - pattern=".{3,}", что проверит на наличие минимум трех символов во вводимой строке
placeholder	ненавязчивая подсказка внутри поля
autofocus	устанавливает фокус на указанный элемент (видимый) при загрузке страницы
required	указывает, что в поле должно быть введено значение (не пустое поле)
pattern	проверяет значение на соответствие регулярному выражению
min	минимальное разрешенное значение (числовое и дата)
max	максимальное разрешенное значение (числовое и дата)
step	шаг изменения значения. Например, input type="number" min="10" max="19" step="2" разрешит только значения 10, 12, 14, 16 или 18
autocomplete	указывает браузеру подсказку к автодополнению, например “расчетный счет”, или может быть выставлен в значение “on” или “off”, для включения/отключения овтозаполнения
inputmode	указывает способ ввода. Наиболее полезные возможности: verbatim - содержимое с дословной передачей смысла, например имена пользователей latin - латиница, например, поля поиска latin-name - имена, то есть с заглавной первой буквой latin-prose - содержимое с не дословной передачей смысла, например сообщения, твиты, прочее. numeric - числовые значения, где не подходят типы number и range , например, номера кредитных карт
size	размер в количестве символов для полей типа text или password, или количество пикселей для полей типа email, tel, url или search. Наверное, стоит избегать, и использовать стилизацию посредством CSS
rows	Количество текстовых строк (только для textarea)
cols	количество рядов символов (только для textarea)
list	ссылается на список опций
spellcheck	установить в true или false, чтобы включить/отключить проверку привописания для поля
form	идентификатор форму, которой принадлежит данное поле. Вообще-то поля должны размещаться внутри формы, но этот атрибут позволяет разместить поле за пределами формы, в любом месте страницы
formaction	указывает URI, переопределяющее действие формы при отправке данных (только для кнопок отправки/изображений)
formmethod	задает GET или POST, переопределяет атрибут формы method (только для кнопок отправки/изображений)
formenctype	указывает тип содержимого при отправке (text/plain, multipart/form-data или application/x-www-form-urlencoded, толкьо для кнопок отправки и изображений)
formtarget	указывает целевое окно/фрейм для переопределения атрибута формы target при отправке (только для кнопок отправки / изображений)
readonly	значение поля не может быть изменено, хотя оно будет отвалидировано и отправлено
disabled	отключает поле ввода - нет валидации, и данные не будут отправлены

Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max.

Следующий пример показывает поле, требующее обязательного ввода email, заканчивающегося на @mysite.com, на которое смещается фокус при загрузке страницы.

Списки данных

Список данных содержит набор подходящих значений для любого типа поля, например:

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

Возможно указывать значения и текстовые пояснения к значениям, например:

Internet Explorer

но стоить помнить, что реализация отличается в различных браузерах. Например, Firefox производит автодополнение по тексту (Internet Explorer), тогда как Chrome - по значениям (IE), а текст указывает уменьшенным серым шрифтом:

Списки данных можно заполнять с помощью JavaScript, если вы хотите получать их по AJAX.

Отключение валидации

Отключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы.

Запомните, что выставление полю атрибута disabled отключит валидацию этого поля.

Поля вывода

Ранее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации

• output - результат вычисления пользовательских действий
• progress - полоса прогресса (атрибуты value и max задают состояние)
• meter - шкала, которая может менять свой цвет между зеленым, желтым и красным в зависимости от установленных значений атрибутов value, min, max, low, high и optimum

Разделение и подпись полей

Согласно спецификации , каждый элемент формы считается параграфом, и отделяется от остальных частей элементом

Итересно. Я в целях разделения использую div, хотя сомневаюсь, что это имеет большое значение. Тег p короче, разве что вам нужно будет применять дополнительный стиль, чтобы убрать поля.

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

Имя

Фамилия

Email адрес

Подпишитесь на рассылку

Элементы управления не стандартизированы

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

Поддержка браузерами

Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.

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

Всегда используйте правильный тип!

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

Рассмотрим даты. Поддержка в браузерах неоднородна, и это приводит к проблемам при внедрении.

Стандартное поле date всегда возвращает дату в формате YYYY-MM-DD, независимо от того, какой формат даты используется в вашем регионе.

IE и Firefox откатятся до стандартного поля text, а вашим пользователям нужно вводить даты в английском формате MM-DD-YYYY, или в европейском DD-MM-YYYY

JavaScript плагин, как в jQuery UI позволяет определять собственный формат - да хоть YYYY-MM-DD - но вы не можете гарантировать, что JavaScript будет включен на машине пользователя.

Простым решением будет отказ от использования HTML5 поля date, вернутья к полю text, и реализовать свой элемент управления датами. Не делайте этого. Вы никогда не создадите нормальный элемент для выбора даты, который работает на всех устройствах, на всех разрешениях экрана, поддерживает клавиатуру, мышь и сенсорный ввод, и продолжает работать при отключенном JavaScript. К тому же, в мобильных браузерах есть свои инструменты обработки элементов управления с заточкой под сенсорное управление.

За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется...

Валидация на серверной стороне

Валидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome, то и тогда вы не сможете избежать:

• багов браузера или ошибок в JavaScript, пропускающих неверные данные
• пользователей, изменяющих DOM или скрипты с помощью инструментов браузера
• отправка данных с систем, которые вы не контролируете
• перехват данных на пути от браузера к серверу (обычно по HTTP)

Валидация на стороне клиента никогда не была и не будет заменой валидации на стороне сервера. Валидация пользовательских данных на стороне сервера имеет большое значение. Валидация на стороне клиента - дополнительная полезная возможность.

И, наконец, помните, что даты могут быть получены в различных форматах, будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости.

В этой статье я рассказал о многих аспектах разметки HTML5 форм. В следующей статье мы рассмотрим CSS-свойства, относящиеся к формам.

От автора: приветствую вас, дорогие читатели, на нашем блоге о сайтостроении. Продолжаю тему спецификации htm5, сегодня я предлагаю поговорить о формах и о том, какие новые возможности появились в этом отношении. К сожалению, на данный момент все еще не все браузеры поддерживают эти возможности, однако html5 формы все равно начинают использовать.

Нововведения

В html5 появилось так много возможностей для расширения функциональности форм, что им бы стоило посвятить отдельный раздел в книге, а не статью. Сегодня же мы рассмотрим лишь некоторые новые возможности.

Новые поля ввода

Появилось очень много новых типов полей. Все они задаются с помощью элемента input с различным type. Некоторые из них:
Type = “email” – с виду это обычное текстовое поле, но на самом деле в него встроена автоматическая валидация. Если браузер не находит знак @, который является основным атрибутом любого email-адреса, то он просто не пропускает такую форму на отправку. Давайте проверим это в последней версии Chrome, где все это отлично поддерживается.

< form > < input type = "text" value = "Введите что-то" > < input type = "email" value = "Введите email" > < input type = "submit" value = "Готово" > < / form >

Создали простейшую форму. Откройте такой код в браузере и вы увидите два абсолютно одинаковых элемента для ввода и кнопку отправки. Что ж, а ну-ка попробуйте ввести во второе поле что-то наобум и отправить форму. Ничего не получится, браузер показывает, что в нем обязательно должен присутствовать значок @.

Вот так вот, и отныне никакой валидации с помощью javascript и не нужно. Это относится к тем браузерам, которые поддерживают html5 в должной мере.

Type = “tel” – для ввода номера телефона. В общем-то, в нем нет такой валидации, но интересно, что если заполнять такую форму с мобильных устройств, то при нажатии на нее может изменится раскладка клавиатуры (будут показываться цифры). То же самое происходит и в случае с type = email.

Type = “color” – сюда ничего вводить не нужно. Интересует нас по той причине, что тут можно выбрать цвет, причем сделать это в интуитивно понятной палитре, такой, как в paint. Вот так это выглядит:

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

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

Type = date. Поле для выбора календарной даты. Если оно поддерживается браузером, то появляются очень удобные инструменты, в которых вы можете определить дату, а при клике на треугольничек даже разворачивается календарь.

Собственно, есть такие же поля datetime и datetime-local. Они предназначены для того, чтобы определять в них время (и время с указанием явного часового пояса, соответственно).

Поддержка браузерами

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

В этом плане Google Chrome и Opera подают всем пример, потому что поддерживают абсолютно все новые значения. К сожалению, от них серьезно отстают Mozilla и IE. В Explorer только с десятой версии поддерживаются пару новых полей.

Выбор обязательных полей

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

В html5 обязательные поля формы достаточно отметить этим атрибутом, никаких скриптов применять не нужно. Если бы это поддерживалось во всех браузерах, то были бы вообще прекрасно.

< input type = "date" required >

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

Подсказка

Раньше, если какой-то текст нужно было поместить в поле ввода по умолчанию, его туда вписывали с помощью атрибута value. Мы тоже сейчас так сделали. Но есть одна проблема – этот текст пользователю придется самостоятельно стирать, если он хочет написать что-то другое, а это не очень удобно.

Если вместо value написать атрибут placeholder, то текст будет сам исчезать, когда пользователь начнет вводить свое значение. Это более удобно.

Список возможных значений

С помощью тега datalist можно указать список возможных значений для текстового поля. Это реализовывается так:

< input type = "text" placeholder = "Имя" list = "names" > < datalist id = "names" > datalist >

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

Проверяем все в работе. Теперь обладатели данных имен являются счастливчиками – им не придется вручную писать свое имя)))

Также просто осуществить в html5 валидацию формы. Для этого есть атрибут pattern, который можно добавить к любому полю ввода на странице. Он определяет, какие символы допустимо вводить в поле и если что-то нарушено, не пропускает ее отправку.

Описывать сейчас все значения атрибута pattern очень долго. Вы можете сами посмотреть их в справочнике .

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

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

Итог

Соответственно, когда все это будет лучше поддерживаться (хотя и сейчас уже неплохо), можно будет говорить о том, что 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» позволит создать поле для выбора времени (в формате