Валидация форм средствами html5

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Описание

Тег <input> является одним из разносторонних
элементов формы и позволяет создавать разные элементы интерфейса и обеспечить
взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей
и флажков. Хотя элемент <input> не требуется
помещать внутрь контейнера <form>, определяющего
форму, но если введенные пользователем данные должны быть отправлены на сервер,
где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских
приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий
вид элемента — type. Он позволяет задавать
следующие элементы формы: текстовое поле (text),
поле с паролем (password), переключатель (radio),
флажок (checkbox), скрытое поле (hidden),
кнопка (button), кнопка для отправки формы (submit),
кнопка для очистки формы (reset), поле для отправки
файла (file) и кнопка с изображением (image).
Для каждого элемента существует свой список атрибутов, которые определяют его
вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Атрибуты

accept: Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
accesskey: Переход к элементу с помощью комбинации клавиш.
align: Определяет выравнивание изображения.
alt: Альтернативный текст для кнопки с изображением.
autocomplete: Включает или отключает автозаполнение.
autofocus: Устанавливает фокус в поле формы.
border: Толщина рамки вокруг изображения.
checked: Предварительно активированный переключатель или флажок.
disabled: Блокирует доступ и изменение элемента.
form: Связывает поле с формой по её идентификатору.
formaction: Определяет адрес обработчика формы.
formenctype: Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod: Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate: Отменяет встроенную проверку данных на корректность.
formtarget: Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list: Указывает на список вариантов, которые можно выбирать при вводе текста.
max: Верхнее значение для ввода числа или даты.
maxlength: Максимальное количество символов разрешенных в тексте.
min: Нижнее значение для ввода числа или даты.
multiple: Позволяет загрузить несколько файлов одновременно.
name: Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern: Устанавливает шаблон ввода.
placeholder: Выводит подсказывающий текст.
readonly: Устанавливает, что поле не может изменяться пользователем.
required: Обязательное для заполнения поле.
size: Ширина текстового поля.
src: Адрес графического файла для поля с изображением.
step: Шаг приращения для числовых полей.
tabindex: Определяет порядок перехода между элементами с помощью клавиши Tab.
type: Сообщает браузеру, к какому типу относится элемент формы.
value: Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx6

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в браузере

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Пример 1. Форма html с кнопками

Преобразуется на странице в следующее:

Пояснения к примеру

action=»» — говорит о том, что обработка данных будет происходить на этой же странице.
<input type=»radio» name=»answer» value=»»> — атрибут type=»radio» говорит о том, что нужно отобразить текст после этого кода, как кнопку выбора. Атрибут name и value в данном теге для нас сейчас играют маленькую роль, т.к. мы не изучаем сейчас php (см. уроки php).
<input type=»text» name=»poletext» value=»»> — атрибут type=»text» говорит о том, что это будет текстовое поле. Здесь так же есть два важных атрибута: name (для php) и value (значение по умолчанию).
<input type=»textarea» name=»opisanie» value=»»> — атрибут type=»textarea» говорит о том, что это будет большое текстовое поле. Разница от предыдущего случая лишь в том, что он позволяет записывать большой объем текста.
<input type=»submit» value=»»> — атрибут type=»submit» говорит о том, что это кнопка. В атрибуте value пишется то, что будет написано на кнопке.

Более подробно про все эти элементы можно прочитать в 15 уроке: элементы тега <form>, где рассмотрены радиокнопки, списки, флажки, текстовые поля, кнопки.

Теперь рассмотрим подробно все атрибуты тега <form>.

Как сделать поля в форме обязательными для заполнения за 1 минуту в HTML

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

До недавнего времени самым популярным способом было использование jаvascript. Очень удобной библиотекой является jquery validation. Данный способ является современным, но для его интеграции в форму на сайте нужны некоторые навыки работы и время.

С появлением html 5 и его повсеместной интеграцией на современные сайты можно отказаться от использования jаvascript. При этом для того, чтобы сделать поле в форме обязательным для заполнения нужно только добавить атрибут required.

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

А для создания таких полей потребуется не больше минуты.

Итак, допустим есть небольшая форма:

Вот так она выглядит в браузере:

Теперь делаем некоторые поля в форме обязательными для заполнения:

Вот и все. Мы сделали все поля обязательными для заполнения меньше, чем за 1 минуту. Если не заполнять обязательные поля, то мы увидим следующие сообщения:

И, немаловажное. Данная проверка работает во всех современных браузерах и только для спецификации html 5

Для непосвященных — в начале html кода нужно вставить тег .

Визуальное оформление HTML формы. Bootstrap

Styling valid/invalid inputs using CSS

While the code we’re using is slightly more complicated, this should
get you started:

The first set of styles can be used to mark an input box as
‘invalid’, by adding an icon, colouring the text or borders or similar.
It will apply to inputs that are required but empty, or to
inputs that have a required format/pattern which hasn’t yet been met.

The -moz-box-shadow style is there just to prevent Firefox
4 Beta from adding it’s default red border.

For inputs that are both required and ‘valid’ you can use the following:

Some of the articles below, particularly the first two, provide
other style/scripting options and solutions for supporting older
browsers.

Sample styling using images and sprites

As shown above, once you’ve added HTML5 attributes to your form
elements, they can be easily styled using CSS so that each input field
is clearly marked as valid or invalid.

Here you can see the above styles applied to a required input field:

This solution is still more complicated than it needs to be as it
requires two extra images to be loaded. Fortunately, we can assume that
all browsers supporting HTML5 form validation techniques will also
support images being replaced in the CSS by ‘Base64 encoded datasets’.

Using a service such as Spritebaker or other techniques, the above style
settings become:

The above code can now be copied directly to your CSS style sheet.
There’s no need to copy any images and, especially if your style-sheets
are gzip-compressed, there will be next to no impact on load times. In
a few minutes you could have your whole website updated.

For the browser-impaired, this is how the required input field will
appear in Safari with either the image or the Data URI
backgrounds:

The same styling can be extended to textarea elements, but
won’t work for checkboxes,
select elements, etc. For those you might want to place the
valid/invalid markers alongside the element or format the input
elements themselves using borders, background colours, etc.

Other HTML5 INPUT types

Other HTML5 input types include:

color
date
datetime
datetime-local
month
search
tel
time
week

The search input will, in some browsers, change the styles
to match the browser or operating system default search field format.
You can see this demonstrated in the Search input above.

The tel input type is handy for the iPhone as it selects a
different input keyboard. There is no pattern-matching set by default
so you would have to implement that yourself using the
pattern attribute to accept only certain characters.

The color input is meant to let you select a hex-code from
a colour wheel — or similar — but as yet doesn’t appear to have been
implemented in the wild.

The other date— and time-related options do have
an effect at least in Opera, with pop-up calendars and other devices
appearing to assist with input. While it would be great to see
something like this in every browser, for now you probably need to
stick with the ubiquitous JavaScript plugins.

Обязательные поля формы. Как сделать поля формы обязательными

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

Итак, перед нами есть простейшая форма с полями, каждое из которых мы хотим сделать обязательным к заполнению. Каждое поле формы имеет тип text и примерно следующий код:

<div>

<div>

</div>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Ранее для валидации формы на клиенте нельзя было обойтись без возможностей JavaScript. Есть множество плагинов, позволяющих гибко провести валидацию формы и, в частности, проверить, заполнены ли обязательные поля. Однако в HTML5 можно вовсе обойтись без JavaScript и провести валидацию только средствами HTML5. Давайте посмотрим, как это сделать.

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

А теперь попробуем отправить форму, не заполняя ее.

Как видим браузер не дает отправить форму, подсказывая, что поле не заполнено. Чтобы помочь и подсказать пользователю, какие поля являются обязательными, принято рядом ставить красную звездочку, примерно так:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

New text INPUT types

On the iPhone/iPad the different input types are associated with
different keyboards, making it easier for people to complete your
online forms. In other web browsers they can be used in combination
with the required attribute to limit or give advice on
allowable input values.

INPUT type=»email»

Note that for this example we’ve made use of another HTML5
attribute placeholder which lets us display a prompt or
instructions inside the field — something that previously had to be
implemented using messy onfocus and onblur JavaScript
events.

The above code displays an input box as follows:

Again, different browsers implement this differently. In Opera it’s
sufficient to enter just *@* for the input to be accepted. In
Safari, Chrome and Firefox you need to enter at least *@-.-.
Obviously neither example is very limiting, but it will prevent people
from entering completely wrong values, such as phone number, strings
with multiple ‘@’s or spaces.

Here is how it appears in Safari (with our CSS formatting to show the
(in)valid state):

INPUT type=»url»

Again, the input box appears as normal:

As mentioned above, we can improve on this by making use of the
pattern attribute which accepts a JavaScript regular
expression. So the code above becomes:

Now our input box will only accept text starting with http:// or https:// and at least one additional character:

If you’re not yet familiar with regular expressions, you really
should make it a priority to learn. For those already
familiar, note that the ^ and $ are already implicit
so the input has to match the entire expression. Pattern modifiers .

INPUT type=»number» and type=»range»

The number and range input types also accept
parameters for min, max and step. In most
cases you can leave out step as it defaults to 1.

Here you see an example including both a number input,
typically displayed as a ‘roller’ and a range input displayed
as a ‘slider’:

As with other HTML5 input types, browsers that don’t recognise the
new options will default to simple text inputs. For that reason it’s a
good idea to include a size for the input box.

The slider option is a bit bizarre in that no values are
displayed, but may be useful for more ‘analog’ inputs. There are some
bugs with the number input in that if you don’t set a
max value, clicking ‘down’ with the input blank will result in
a very large number.

Here is how the two inputs are displayed in Safari:

and in Opera:

They are currently not supported in Firefox 4 Beta.

If you want to restrict the input of a text field to numbers without
having the up/down arrows associated with the input box, you can always
just set the input type to text and use a pattern of
«\d+» (one or more numbers).

INPUT type=»password»

We have a separate article with details on validating passwords using
HTML5, including JavaScript code for customising the browser
generated alert messages.

Использование разделов CDATA

Внутри символьных данных в содержимом элемента нельзя помещать символы угловых скобок (например, <) или знак
амперсанда &. Одним из способов преодолеть это ограничение является использование ссылки на символ (<
или &). Другим способом является использование ссылки на предопределённый общий примитив (< или
&). Однако, в случае, если вам требуется многократно вставлять символы < и & (если, например, это
какой-либо исходный код или разметка HTML), использование ссылок неудобно и затрудняет восприятие данных. В этом
случае проще поместить текст, содержащий такие символы, в раздел CDATA.

Раздел CDATA начинается с символов <!]>. Между этими двумя ограничителями
вы можете поместить любые символы, кроме ]]>. В разделе CDATA не нужно использовать ссылки на символы или
предопределённые общие примитивы, т.к. синтаксический анализатор не будет замещать такую ссылку соответствующим
символом. Разделы CDATA не могут быть вложенными. Вы можете поместить раздел CDATA в любое место, занимаемое
символьными данными — т.е. внутри содержимого элемента, но не внутри XML-разметки:

Разделы CDATA отображаются браузером как содержимое элемента.

Атрибут required тега | HTML справочник

Значение и применение

Атрибут required (HTML тега <input>) является логическим атрибутом, который указывает, что поле ввода должно быть заполнено перед отправкой формы.

Атрибут не может быть использован с полями данных следующих типов (атрибут type):

button (элемент управления, который определяет кнопку).
hidden (элемент управления, который определяет скрытое поле ввода).
image (элемент управления, который определяет графическую кнопку «отправить форму»).

Синтаксис:

<input required>

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута required HTML тега <input></title>
</head>
<body>
	<form>
		Login: <input type = "text"  name = "login" required><br><br>  <!-- поле обязательно для заполнения -->
		Email: <input type = "email"  name = "email" required><br><br>  <!-- поле обязательно для заполнения -->
		<input type = "submit">
	</form>
</body>
</html>

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

Validating the data

Now that our users get prompted to complete required fields, we need to make sure that the data they submit is in the format we require.

We’ll want the ‘Name’ field to be submitted in the format ‘Firstname Lastname’, and to only contain letters and a space (NB in real world scenarios, you might need to take account of other locales – this example has been kept simple deliberately). We can achieve this by adding a pattern attribute to the ‘Name’ field, setting it’s value to the regular expression we want the data to be compared against:

When using the pattern attribute, the and for the start and end of the regular expression are implied and don’t need to be included.

You can help the user by including a title attribute that tells them the format you require:

The text in the title attribute is then appended to the built-in validation message:

Note that some screen reader / browser combinations might lead to the title attribute being read out in addition to the aria-describedby text, so watch out for this e.g. I found that using NVDA with IE10 caused the title attribute and the aria-describedby element’s text to be read out, but using NVDA with Chrome and Firefox didn’t exhibit this behaviour. Only the aria-describedby text was read. Later on we’ll revisit this and show you one solution using CSS3.

Использование примитивов

Термин «примитив» в широком смысле относится к любому из следующих типов единиц хранения информации для
XML-документов:

Собственно XML-документ как единое целое (файл).
Внешнее подмножество DTD (файл).
Внешний файл, определённый как внешний примитив в DTD и допускающий использование посредством ссылки (файл).
Строка в кавычках, определённая как внутренний примитив в DTD и допускающая использование посредством ссылки
(не файл).

Однако чаще термин «примитив» используется в узком смысле, а именно — в двух последних смыслах.

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

Примитивы классифицируются по трём признакам:

Общие и параметрические. Общий примитив включает текстовые или нетекстовые данные, которые вы можете
использовать внутри корневого элемента. Параметрический примитив содержит XML-текст, который может быть помещён в
DTD.
Внутренние и внешние. Внутренний примитив содержится внутри строки в кавычках. Внешний примитив содержится в
отдельном файле.
Разбираемые и неразбираемые. Разбираемый примитив содержит XML-текст (символьные данные, разметка или и то, и
другое). Когда вы вставляете ссылку на разбираемый примитив в документ, ссылка замещается содержимым примитива.
Синтаксический анализатор разбирает содержимое примитива точно так же, как он сканирует текст, непосредственно
введённый в документ. Неразбираемый примитив может содержать как XML-данные, так и не XML-данные. Его содержимое
нельзя непосредственно вставить в документ посредством ссылки.

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

Общие внутренние разбираемые.
Общие внешние разбираемые.
Общие внешние неразбираемые.
Параметрические внутренние разбираемые.
Параметрические внешние разбираемые.

Примитив создаётся путём объявления его в DTD документа.

Простейший XML-документ

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

Объявление типа документа.
Одну или несколько инструкций по обработке.

XML-документ может содержать комментарии, начинающиеся с символов «<!—» и заканчивающиеся символами
«—>». Комментарий может содержать любой текст, за исключением символов «—«. Тексты комментариев доступны для
написанного внутри HTML-страницы кода сценария.

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

<?xml version=»1.0″?>
<!— Comment —>
<PRODUCTS>

     <PRODUCT>
          <TITLE> Product #1 </TITLE>
          <PRICE> 10.00 </PRICE>
     </PRODUCT>

     <PRODUCT>
          <TITLE> Product #2 </TITLE>
          <PRICE> 20.00 </PRICE>
     </PRODUCT>

</PRODUCTS>

Чтобы иметь возможность использовать в XML-документе символы кириллицы (как в символьных данных, так и в именах
элементов), вы можете указать кодировку в прологе:

<?xml version=»1.0″ encoding=»windows-1251″?>

The ‘required’ attribute

The simplest change you can make to your forms is to mark a text
input field as ‘required’:

This informs the (HTML5-aware) web browser that the field is to be
considered mandatory. Different browsers may mark the input box in
some way (Firefox 4 Beta adds a red box-shadow by default), display a
warning (Opera) or even prevent the form from being submitted if this
field has no value. Hopefully these behaviours will converge in
future releases.

For these examples we have created our own valid/invalid CSS
formatting to override the browser default. . That’s why you may see something like the following:

Before you type anything into the box a red marker is shown. As
soon as a single character has been entered this changes to a green
marker to indicate that the input is ‘valid’.

Using CSS you can place markers inside or alongside the input box,
or simply use background colours and borders as some browsers do by
default.

The required attribute can also apply to checkboxes
which we’ve covered separately.

Объявления атрибутов

Объявление списка атрибутов определяет имена атрибутов, устанавливает тип для каждого атрибута и задаёт
востребованность для каждого атрибута, в частности, может задавать значение атрибута по умолчанию. Объявление
списка атрибутов имеет следующую форму записи:

<!ATTLIST Имя ОпрАтр>

Здесь «Имя» — имя элемента, для которого задаются атрибуты. «ОпрАтр» — это одно или несколько определений атрибутов.
Определение атрибута имеет следующую форму записи:

Имя ОпрАтр ОбъявУмолч

Здесь «Имя» — имя атрибута. ОпрАтр представляет собой тип атрибута. ОбъявУмолч — это объявление значения по
умолчанию, которое указывает на востребованность атрибута и содержит некоторую дополнительную информацию. Пример
объявления:

<!ATTLIST PRODUCT Retail CDATA «retail» Title CDATA #REQUIRED>

Вышеприведённое объявление означает, что вы можете присвоить атрибуту Retail любую строку в кавычках (ключевое
слово CDATA); если этот атрибут опущен, ему будет присвоено значение по умолчанию «retail». Вы можете присвоить
атрибуту Title любую строку в кавычках; этот атрибут должен быть обязательно задан для каждого элемента PRODUCT
(ключевое слово #REQUIRED) и не имеет значения по умолчанию.

Объявления атрибутов просто включаются в DTD наряду с объявлениями типов элементов, например:

…
<!ELEMENT PRODUCT (#PCDATA)>
<!ATTLIST PRODUCT Retail CDATA «retail» Title CDATA #REQUIRED>
…

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

Строковый тип (ключевое слово CDATA, что означает символьные данные, Character Data).
Маркерный тип.
Нумерованный тип.

Вот список ключевых слов, которые вы можете использовать в определении маркерных типов атрибутов:

ID	Для каждого элемента атрибут должен иметь уникальное значение. Элемент может иметь только один атрибут типа ID. В объявлении значения по умолчанию такого атрибута должно фигурировать #REQUIRED или #IMPLIED.
IDREF	Значение такого атрибута является ссылкой на атрибут типа ID другого элемента .
IDREFS	Этот тип атрибута похож на IDREF, но его значение может включать ссылки на несколько идентификаторов — разделённых пробелами — внутри строки в кавычках.
ENTITY	Значение атрибута должно совпадать с именем примитива, объявленного в DTD. Такой примитив ссылается на внешний файл, обычно содержащий не XML-данные. Таким способом, например, определяют путь к файлу, содержащему графические данные (рисунок).
ENTITIES	Этот тип атрибута похож на ENTITY, но его значение может включать ссылки на несколько идентификаторов, разделённых пробелами — внутри строки в кавычках. Таким способом, например, определяют пути к файлам, содержащим графические данные (рисунки) в альтернативных форматах.
NMTOKEN	Элементарное имя.
NMTOKENS	Этот тип атрибута похож на NMTOKEN, но его значение может включать несколько элементарных имён, разделённых пробелами — внутри строки в кавычках..

Два способа, которые вы можете использовать в определении нумерованных типов атрибутов:

Если вы хотите ограничить значение атрибута «Mass» словами «net» и «gross», вы можете написать следующее:

<!ATTLIST PRODUCT Mass (net | gross) «net»>
Нумерованный тип можно определить с помощью ключевого слова NOTATION. Каждая из указанных нотаций должна точно
соответствовать имени нотации, объявленному в DTD. Нотация описывает формат данных или идентифицирует программу,
применяемую для обработки определённого формата данных:

<!ATTLIST PRODUCT Description NOTATION (HTML | SGML | RTF) #REQUIRED>

Объявление значения атрибута по умолчанию может иметь четыре формы:

#REQUIRED	Вы должны задать значение атрибута для каждого элемента.
#IMPLIED	Вы можете опустить атрибут, но никакое значение по умолчанию назначено не будет.
AttValue	Собственно значение по умолчанию. Вы можете опустить атрибут, и ему будет назначено это значение по умолчанию.
#FIXED AttValue	Вы можете опустить атрибут, и ему будет назначено это значение по умолчанию (AttValue). Если вы не опускаете атрибут, вы обязаны назначить ему это значение по умолчанию. При таком объявлении указывать атрибут в элементе имеет смысл только для того, чтобы сделать документ более понятным для восприятия.

HTML Справочник

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации

HTML Теги

<!—…—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Понятие о языке XML

XML — это расширяемый язык разметки (Extensible Markup Language), разработанный специально для размещения информации
в World Wide Web, наряду с HTML, который давно стал стандартным языком создания Web-страниц. В отличие от HTML,
вместо использования ограниченного набора определённых элементов вы имеете возможность создавать ваши собственные
элементы и присваивать им любые имена по вашему выбору. Примечание: подразумевается, что читатель данной статьи хотя
бы очень поверхностно знаком с языком HTML.

XML решает ряд проблем, которые не решает HTML, например:

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

В зависимости от уровня соответствия стандартам документ может быть «верно сформированным» («well-formed»), либо
«валидным» («valid»). Вот несколько основных правил создания верно сформированного документа:

Каждый элемент XML должен содержать начальный и конечный тэг (либо пустой тэг типа <TAG />, который может
нести информацию посредством своих атрибутов).
Любой вложенный элемент должен быть полностью определён внутри элемента, в состав которого он входит.
Документ должен иметь только один элемент верхнего уровня.
Имена элементов чувствительны к регистру.

Есть три основных способа сообщить браузеру, как отображать каждый из созданных вами XML-элементов:

Каскадная таблица стилей (Cascading Style Sheet — CSS) или расширяемая таблица в формате языка стилевых
таблиц (Extensible Stylesheet Language — XSL).
Связывание данных. Этот метод требует создания HTML-страницы, связывания с ней XML-документа и установления
взаимодействий HTML-элементов с элементами XML. В дальнейшем HTML-элементы автоматически отображают информацию
из связанных с ними XML-элементов.
Написание сценария. Этот метод требует создания HTML-страницы, связывания с ней XML-документа и получение
доступа к XML-элементам с помощью кода сценария JavaScript или VBScript.

Индивидуальный пользователь, компания или комитет по стандартам может определить необходимый набор элементов XML
и структуру документа, которые будут применяться для особого класса документов. Подобный набор элементов и описание
структуры документа называют XML-приложением или XML-словарём.

XML-приложение обычно определяется созданием описателя типа документа (DTD), который является допустимым
компонентом XML-документа. DTD устанавливает и определяет имена элементов, которые могут быть использованы в
документе, порядок, в котором элементы могут появляться, и доступные к применению атрибуты элементов. DTD обычно
включается в XML-документ и ограничивает круг элементов и структур, которые будут использоваться. Примечание:
приложение XML Schema позволяет разрабатывать подробные схемы для ваших XML-документов с использованием стандартного
синтаксиса XML и является альтернативой DTD.

Примеры

Пример Input

Форма HTML с обязательным заполненем полем ввода:

<form action=»/action_page.php»>
Имя пользователя: <input type=»text» name=»usrname» required>
<input type=»submit»>
</form>

Пример Select

Форма HTML с обязательным раскрывающимся списком:

<select required>
<option value=»»>Ничего</option>
<option value=»вольво»>Вольво</option>
<option value=»сааб»>Сааб</option>
<option value=»мерседес»>Мерседес</option>
<option value=»ауди»>Ауди</option>
</select>

Пример Textarea

Форма с требуемой текстовой областью:

Using CSS to highlight required fields and invalid data

In tandem with the new input types and attributes provided by HTML5, CSS3 gives us some new pseudo-classes we can use to provide visual clues to the user as to which form fields are required, which are optional, and which contain validation errors.

Required fields can use the pseudo-class:

Optional fields can use the pseudo-class:

The success or failure of form validation can be signified to the user through the use of the , , , and pseudo-classes:

Remember earlier when I mentioned certain screen reader / browser combinations can lead to the title attribute being read aloud in addition to the element’s text? Well, one way around this is to remove the title attribute from the input element, and make use of the CSS3 pseudo class to show the text:

Now, in addition to showing the help text when the input field receives focus, we’ll also show the help text when the input field’s value is invalid.

After making all these changes our HTML now looks like this:

Cross-browser?

The good news is that HTML form validation is supported by all the latest desktop browsers, and most mobile browsers. The bad news is that it is only partially supported in Safari, and isn’t supported at all on iOS Safari, or the default Android browser. If you need to support older versions of IE prior to IE10 you won’t find any of those support form validation either.

So, what can you do if you have to support browsers that don’t have support for form validation yet?

One option is to not do anything and rely on your server-side validation only. This would require no extra work on your part, but would the UX for those using unsupported browsers be satisfactory?

Another option would be to continue to use solely JavaScript for your client-side validation, and not add any of the new features discussed above.

A third approach is to use JavaScript to detect whether the browser supports form validation, use it if it does, and fall back to JavaScript-based validation if it doesn’t. Libraries such as Modernizr can help with HTML5 feature detection, but you can always write your own code if you don’t want to include another JavaScript library: