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

Логический атрибут 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; }

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

Пока нам удалось создать несколько интересных версий сайта. Мы еще не охватили формы, в которых пользователи могут вводить данные. Формы широко используются по всему Интернету: поисковые системы вроде Google или Bing, поля статуса в Facebook, редактор писем в Gmail позволяют набирать или отправлять информацию.

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

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

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

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

Форма

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

Форма

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

Ваше имя:

Здесь у нас есть элемент , который описывает имя и элемент для ввода текста. Тег содержит три атрибута: type со значением text , name со значением nickname и id также со значением nickname . Значение атрибута type означает, что это короткое текстовое поле.

Ниже показано, как это поле выглядит для таких типов полей.

Вы будете использовать в коде для указания, что пользователь может набирать текст в этом поле. Обратите внимание, что текстовые поля могут быть оформлены с помощью CSS. Мы можем изменить рамку, ширину или расстояние между текстом и границей текстового поля. Грубый пример показан ниже.

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

Отметим также взаимосвязь между значением id и значением атрибута for атрибута в .

Ваше имя:

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

Давайте сделаем другую форму, теперь для поля email.

Ваше имя: Ваш e-mail:

Единственная разница в том, что атрибут type имеет значение email . Смысл его, конечно, в том, что пользователь может ввести свою электронную почту. Обратите внимание, что набирается в поле email должно быть проверено на правильность адреса электронной почты. Если это некорректный адрес, то браузер отобразит сообщение об ошибке и не станет отправлять форму.

Следующим полем для добавления является место для комментария. Для длинных текстов мы используем тег .

Ваше имя: Ваш e-mail: Содержание:

Обратите внимание, что мы использовали два новых атрибута: rows и cols . Атрибут rows применяется для установки количества строк текста, которые могут быть введены в поле, пока не появится полоса прокрутки. cols применяется для определения количества символов в каждой строке. Попробуйте самостоятельно изменить значения и посмотреть, как всё поле расширяется или сжимается соответственно.

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

Ваше имя: Ваш e-mail: Содержание:

Элемент содержит атрибут type равный submit . То что вы напишите в атрибуте value будет отображаться как текст на кнопке.

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

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

Всем привет!
Эта статья будет полезна для всех начинающих веб-мастеров. Изучив материал статьи, вы с легкостью сможете при помощи некоторых атрибутов 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» позволит создать поле для выбора времени (в формате

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