Последнее обновление: 08.04.2016
Итак, в нашем распоряжении имеются различные элементы, которые мы можем использовать на форме. Мы можем вводить в них различные значения. Однако нередко пользователи вводят не совсем корректные значения: например, ожидается ввод чисел, а пользователь вводит буквы и т.д. И для предупреждения и проверки некорректного ввода в HTML5 существует механизм валидации.
Преимущество использования валидации в HTML5 заключается в том, что пользователь после некорректного ввода может сразу получить сообщение об ошибке и внести соответствующие изменения в введенные данные.
Для создания валидации у элементов форм HTML5 используется ряд атрибутов:
required : требует обязательного ввода значения. Для элементов textarea, select, input (с типом text, password, checkbox, radio, file, datetime-local, date, month, time, week, number, email, url, search, tel)
min и max : минимально и максимально допустимые значения. Для элемента input с типом datetime-local, date, month, time, week, number, range
pattern : задает шаблон, которому должны соответствовать вводимые данные. Для элемента input с типом text, password, email, url, search, tel
Атрибут required
Атрибут required требует обязательного наличия значения:
Если мы не введем в эти поля никаких данных, оставив их пустыми, и нажмем на кнопку отправки, то браузер высветит нам сообщения об ошибке, а данные не будут отправлены на сервер:
В зависимости от браузера визуализация сообщения может несколько отличаться. Также границы некорректного поля ввода могут окрашиваться в красный цвет. Например, поведение при отправке пустых сообщений в Firefox:
Атрибуты max и min
Для ограничения диапазона вводимых значений применяются атрибуты max и min:
Атрибут pattern
Атрибут pattern задает шаблон, которому должны соответствовать данные. Для определения шаблона используется язык так называемых . Рассмотрим самые простейшие примеры:
Здесь для ввода номера телефона используется регулярное выражение \+\d-\d{3}-\d{3}-\d{4} . Оно означает, что первым элементом в номере должен идти знак плюс +. Выражение \d представляет любую цифру от 0 до 9. Выражение \d{3} означает три подряд идущих цифры, а \d{4} - четыре цифры подряд. То есть это выражение будет соответствовать номеру телефона в формате "+1-234-567-8901".
Если мы введем данные, которые не соответствуют этому шаблону, и нажмем на отправку, то браузер отобразит ошибку:
Отключение валидации
Не всегда валидация является желаемой, иногда требуется ее отключить. И в этом случае мы можем использовать либо у элемента формы атрибут novalidate , либо у кнопки отправки атрибут formnovalidate :
Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
size
The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font ( font settings in use).
This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the attribute.
Non-standard attributes
The following non-standard attributes are available to telephone number input fields. As a general rule, you should avoid using them unless it can"t be helped.
| Attribute | Description |
|---|---|
| Whether or not to allow autocorrect while editing this input field. Safari only. | |
| A string indicating the type of action that will be taken when the user presses the Enter or Return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. Firefox for Android only. |
autocorrect
A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are:
On Enable automatic correction of typos, as well as processing of text substitutions if any are configured. off Disable automatic correction and text substitutions.
mozactionhint
A Mozilla extension, supported by Firefox for Android, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field. This information is used to decide what kind of label to use on the Enter key on the virtual keyboard.
Permitted values are: go , done , next , search , and send . The browser decides, using this hint, what label to put on the enter key.
Using tel inputs
Telephone numbers are a very commonly collected type of data on the web. When creating any kind of registration or e-commerce site, for example, you will likely need to ask the user for a telephone number, whether for business purposes or for emergency contact purposes. Given how commonly-entered phone numbers are, it"s unfortunate that a "one size fits all" solution for validating phone numbers is not practical.
Fortunately, you can consider the requirements of your own site and implement an appropriate level of validation yourself. See , below, for details.
Custom keyboards
One of the main advantages of is that it causes mobile browsers to display a special keyboard for entering phone numbers. For example, here"s what the keypads look like on a couple of devices.
| Firefox for Android | WebKit iOS (Safari/Chrome/Firefox) |
|---|---|
 |
A simple tel input
In its most basic form, a tel input can be implemented like this:
There is nothing magical going on here. When submitted to the server, the above input"s data would be represented as, for example, telNo=+12125553151 .
Placeholders
Sometimes it"s helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn"t offer descriptive labels for each element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent."> . This is where placeholders come in. A placeholder is a value that demonstrates the form the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element"s value is "" . Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.
Here, we have an tel input with the placeholder 123-4567-8901 . Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.
Controlling the input size
You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.
Physical input element size
The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the tel edit box is 20 characters wide:
Element value length
The size is separate from the length limitation on the entered telephone number. You can specify a minimum length, in characters, for the entered telephone number using the minlength attribute; similarly, use maxlength to set the maximum length of the entered telephone number.
The example below creates a 20-character wide telephone number entry box, requiring that the contents be no shorter than 9 characters and no longer than 14 characters.
Offering suggested values
Taking it a step farther, you can provide a list of default phone number values from which the user can select. To do this, use the list attribute. This doesn"t limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. This also offers hints to autocomplete . The list attribute specifies the ID of a element contains a set of
With the element contains a set of
Here"s a screenshot of what that might look like:
Validation
As we"ve touched on before, it"s quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. So what can we do? Let"s consider some options.
Important : HTML form validation is not a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database. It"s far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It"s also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.
Making telephone numbers required
You can make it so that an empty input is invalid and won"t be submitted to the server using the required attribute. For example, let"s use this HTML:
And let"s include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:
Div { margin-bottom: 10px; position: relative; } input { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: "✖"; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: "✓"; padding-left: 5px; color: #009000; }
The output looks like this:
Pattern validation
If you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the pattern attribute, which takes as its value a regular expression that entered values have to match.
In this example we"ll use the same CSS as before, but our HTML is changed to look like this:
Div { margin-bottom: 10px; position: relative; } input { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: "✖"; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: "✓"; padding-left: 5px; color: #009000; }
Notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won"t be accepted. Neither will 800-MDN-ROCKS. However, 865-555-6502 will be accepted. This particular pattern is obviously only useful for certain locales - in a real application you"d probably have to vary the pattern used depending on the locale of the user.
Examples
In this example, we present a simple interface with a element represents a control that provides a menu of options">
Each input has a placeholder attribute to show a hint to sighted users about what to enter into it, a pattern to enforce a specific number of characters for the desired section, and an aria-label attribute to contain a hint to be read out to screenreader users about what to enter into it.
The JavaScript is relatively simple - it contains an onchange event handler that, when the
Var selectElem = document.querySelector("select"); var inputElems = document.querySelectorAll("input"); selectElem.onchange = function() { for(var i = 0; i < inputElems.length; i++) { inputElems[i].value = ""; } if(selectElem.value === "US") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "Area code"; inputElems.pattern = "{3}"; inputElems.placeholder = "First part"; inputElems.pattern = "{3}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "Second part"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } else if(selectElem.value === "UK") { inputElems.parentNode.style.display = "none"; inputElems.placeholder = "Area code"; inputElems.pattern = "{3,6}"; inputElems.placeholder = "Local number"; inputElems.pattern = "{4,8}"; inputElems.setAttribute("aria-label","Local number"); } else if(selectElem.value === "Germany") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "Area code"; inputElems.pattern = "{3,5}"; inputElems.placeholder = "First part"; inputElems.pattern = "{2,4}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "Second part"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } }
The example looks like this:
This is an interesting idea, which goes to show a potential solution to the problem of dealing with international phone numbers. You would have to extend the example of course to provide the correct pattern for potentially every country, which would be a lot of work, and there would still be no foolproof guarantee that the users would enter their numbers correctly.
It makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. But this choice is yours to make.
Div { margin-bottom: 10px; position: relative; } input { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: "✖"; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: "✓"; padding-left: 5px; color: #009000; }
Specifications
| Specification | Status | Comment | |||||||
|---|---|---|---|---|---|---|---|---|---|
| HTML Living Standard The definition of "" in that specification. | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet |
| type="tel" | Chrome Full support Yes | Edge Full support Yes | Firefox Full support Yes | IE
Full support
10
|
Эта подборка полезных сниппетов, использующих HTML5, может помочь вам улучшить ваш сайт.
Автозаполнение в текстовых полях
Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!Поля ввода email, url и tel
В HTML5 появилось множество новых типов для полей ввода, и среди них email , url и tel . Они позволяют писать более красивый код, делают за вас всю работу по валидации контента, а так же заставляют мобильные браузеры отображать сенсорную клавиатуру со специальными кнопками (вроде @ и.com) при заполнении этих полей.
Шаблоны на соответствие полей формы регулярному выражению
Раньше вам приходилось использовать JavaScript для валидации контента на фронтэнде. Теперь, с HTML5-атрибутом pattern , вы можете просто указать регулярное выражение, которому должны соответствовать вводимые данные!Кастомное контекстное меню
HTML5 позволяет добавлять элементы в контекстное меню (это то самое меню, которое появляется, если кликнуть правой кнопкой мыши где-нибудь на вашей странице).На момент написания статьи, элемент ContextMenu совместим только с Firefox, но можно надеяться, что другие браузеры добавят его поддержку в самое ближайшее время.
Да, можно кликнуть правой кнопкой прямо здесь.
Видео на HTML5, с резервным Flash-проигрывателем.
Одна из самых больших новых возможностей HTML5, безусловно, его способность воспроизводить видео без использования Flash. Но для старых браузеров, не совместимых с HTML5, вы должны реализовать флэш-проигрыватель, как запасной вариант. В следующем примере показано, как вставить mp4 и ogv видео в HTML5, с резервным проигрывателем для старых браузеров.Скрытые элементы в HTML5
В HTML5 появился атрибут hidden , который можно применить к любому элементу. Его действие аналогично CSS-свойству display:none .Вы не увидите этот текст
Автофокус для текстовых полей
Аттрибут autofocus позволяет вам установить фокус на определенный элемент при загрузке страницы. Полезно, например, для страниц поиска, авторизации или регистрации.Предварительная загрузка в HTML5
Jean-Baptiste Jung написал о предварительной загрузке в HTML5. Если в кратце - то это простой способ уведомить браузер о том, какие ресурсы скоро могут понадобиться, чтобы он загрузил их заранее (например картинки, подгружаемые аяксом). В приведенном ниже коде реализуется предварительная загрузка изображения.Воспроизведение аудиофайлов на HTML5
HTML5 может воспроизводить видео и, конечно, он также может воспроизводить аудиофайлы, например, в формате mp3 . В коде ниже реализуется минималистичный но функциональный аудиоплеер.Чаще всего в формах используется тег . Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге и задается с помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута type .
Атрибуты тега
type Основной атрибут, задающий тип элемента. Если атрибут не указан, то по умолчанию используется значение text .Возможные значения:
Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип .
Как организовать поддержку старых браузеров описано на примере даты .
Autocomplete="off"
Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п.
.setAttribute("autocomplete","off");
autofocus
Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
...
...
...
Пример эмуляции свойства автофокус для старых браузеров .
disabled
Делает элемент недоступным. Недоступные элементы не передаются на сервер.
name
Имя поля. Каждое создаваемое поле ввода должно
иметь собственное уникальное имя, иначе сценарий
не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно
соответствовать имени, которое описано для него в программе обработки.
value
Значение поля по умолчанию или надпись на кнопке.
size
Размер поля типа .
maxlength
Ограничение на количество символов, которые можно ввести в поле типа .
readonly="readonly" или ""
Запрещает изменение элемента.
required
Автоматически проверяет заполнено ли поле.
Для подсветки правильно заполненного обязательно поля можно использовать следуюшую конструкцию style:
min
Минимальное значение числа в поле типа number
.
max
Максимальное значение числа в поле типа number
.
step
Шаг изменения числа в поле типа number
.
pattern
Шаблон поля ввода. Проверка корректности ввода данных. Примеры шаблонов для html5 form input pattern .
placeholder
Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса.
Пример настройки стиля подсказки:
В IE и Firefox (до 18 версии) placeholder считается псевдоклассом, а в остальных – псевдоэлементом.
РЕЗУЛЬТАТ:
List
Список вариантов, которые можно выбирать при наборе в текстовом поле.
Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
Типы элемента INPUT
Кнопка BUTTON
Кнопка BUTTON предназначена для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция. Атрибут value задает надпись на кнопке. Атрибут onclick задает JavaScript-обработчик, который вызывается при щелчке на кнопке. Атрибут name служит для JavaScript-именования кнопки (на сервер не передается).
Пример
РЕЗУЛЬТАТ:
Кнопка SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки . Сама она не передается, а служит только для управления.
Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit , заданный в теге . Ведь чтобы передать введенные в форму данные, в общем случае совсем не обязательно нажимать на кнопку SUBMIT . Можно просто нажать на клавиатуре клавишу ENTER , находясь в любом текстовом поле ввода. При этом произойдет передача данных.
Пример
РЕЗУЛЬТАТ:
Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
РЕЗУЛЬТАТ:
Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.
Пример
РЕЗУЛЬТАТ:
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.
Совет: осторожно относитесь к выбору надписи на кнопке RESET . Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.
Пример
РЕЗУЛЬТАТ:
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и
главнейшим элементом форм. Этот тип используется тегом
по умолчанию, его можно не указывать,
чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input
,
то тогда атрибут type="text"
пропускать нельзя.
Имя поля, задаваемое атрибутом name
, всегда обязательно, так как
базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
РЕЗУЛЬТАТ:
Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку , то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.
Поле ввода чисел NUMBER
Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.
Пример
РЕЗУЛЬТАТ:
Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как положительным, так и отрицательным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
РЕЗУЛЬТАТ:
Для задания любого шага используйте step="any" .
Пример
РЕЗУЛЬТАТ:
Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion , которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple , при этом для разделения адресов используется запятая (,)
