Npm

Инструменты для оценки и проверки универсального доступа

Color contrast

Этот инструмент позволяет проверить контрастность и яркость цветов на переднем и заднем фоне всех DOM-элементов. Правильное сочетание цветов гарантирует, что текст будет виден даже людям с плохим зрением. AccessColor также помогает найти оптимальное сочетание цветов для HTML и CSS-документов.

Web accessibily evaluation tool-WAVE

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

Accessibility with style

HERA – инструмент для проверки доступности веб-страниц и их соответствия спецификации Web Content Accessibility Guidelines. HERA выполняет необходимый набор тестов на каждой странице, и автоматически определяет проблемные места.

Adobe PDF conversion

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

Функции

CSS HTML Validator включает в себя редактор HTML , валидатор для HTML , XHTML , полиглот разметки , CSS , PHP и JavaScript ( с помощью JSLint или JSHint ), проверки ссылок (найти мертвые и неработающие ссылки ), проверку орфографии , доступность проверки и поисковую оптимизацию (SEO) проверка. Встроенный веб-браузер позволяет разработчикам просматривать веб-страницы, пока страницы проверяются автоматически.

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

Инструмент Batch Wizard, включенный в некоторые выпуски программного обеспечения, может проверять целые веб-сайты, части веб-сайтов или список локальных веб-документов. Batch Wizard создает отчеты в формате HTML или XML. Отчеты можно просматривать с помощью стандартного веб-браузера.

Средство проверки доступности включает поддержку поправки к разделу 508 Закона о реабилитации 1973 года и рекомендаций по обеспечению доступности веб-контента (как WCAG 1.0, так и WCAG 2.0 / 2.1).

Используя версию HTML Tidy с поддержкой HTML5 и Pretty Print & Fix Tool, CSS HTML Validator может автоматически исправить некоторые общие проблемы с документами HTML и XHTML . Однако некоторые проблемы не могут быть исправлены (или исправлены правильно) с помощью автоматизированных инструментов и требуют ручного просмотра и ремонта.

Проверка сайта на валидность

Валидаторы кода это онлайн-сервисы, способные выполнить проверку сайта на валидность, то есть соответствие всех элементов его установленным правилам и стандартам.

При проверке на валидность, в качестве валидатора может быть использован, например, сервис W3C. На нем есть три основных вкладки.

1. На первой вкладке – Проверить URL, можно сразу же ввести адрес сайта или отдельной страницы для проверки.

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

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

Все настройки сначала можно оставить по умолчанию и нажимаем Проверить. Получаем список ошибок и предупреждений.

Предупреждения выделены желтым цветом, а ошибки — красным. Рассмотрим, как выводятся предупреждения и ошибки при проверке на валидность:

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

В данном случае можно открыть страницу и найти там строку 70, колонка 93.

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

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

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

Как проверить сайт на валидность

Для проверки безукоризненности кода чаще всего используют очень полезный сайт валидатор «Markup Validation Service», расположенный по адресу: http://validator.w3.org, созданный компанией W3C.

HTML

Здесь перед Вами три варианта валидации:

• ввести URL-адрес страницы;
• загрузить файл с кодом со своего компьютера;
• вставить готовый код в форму.

Сервис указывает не только на ошибки html кода и их расположение, но и даёт советы по исправлению. Если код уже имеется в Сети, то можно произвести валидацию путём введения её URL-адреса в форму «Validate by URL» и нажатия кнопки Check. Валидатор HTML включит считывание кода и сообщит об итогах.

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

В этом видео наглядно объяснён процесс проверки с помощью валидатора:

Проверка локальных файлов

По этому же адресу http://validator.w3.org можно проверить код, выбрав вкладку «Validate by File Upload» и загрузив документ с прописанным код.

Выбираем путь к необходимому файлу и жмём Check. Далее всё происходит аналогично.

Использование формы для ввода кода

Иногда удобней вставить сразу код страницы и проверить его онлайн: выбираем вкладку «Validate by Direct Input» и отправляем весь код на сервер.

CSS

Проверка валидности кода CSS может быть пройдена также онлайн валидатором: https://jigsaw.w3.org/css-validator/

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

Снова можно выбрать — указать URL, загрузить свой файл или вставить код.

Осуществляется проверка сайта на ошибки, как и в случае с HTML, и — получаем ответ от сервера. Настроек проверки не имеется, однако можно изучить предлагаемый сгенерированный валидный код, расположенный после списка недостатков кода.

Пример:

Изучаем полученный код и приводим исходный к нужному виду.

Расширения для браузеров

Для браузеров существуют всевозможные расширения для проверки валидации. Для Google Chrome есть проверяющий валидность кода плагин HTML Tidy Browser Extension, для Opera — расширение Validator, для Safari — Zappatic, для Firefor — HTML Validator.

Остановимся на последнем более детально. Он осуществляет ту же проверку, что и validator, только оффлайн. Взять его можно здесь http://users.skynet.be/mgueury/mozilla/

Устанавливаем расширение, перезагружаем браузер — и можно сразу работать. В случае возникновения заморочек с установкой, можно написать в саппорт Mozilla Firefox или полистать форум http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Подробное видео об установке HTML Validator и его использовании:

При загрузке любого URL расширение автоматически включается и считывает код. Результат виден в правом верхнем углу.

Выглядит результат как небольшая картинка с итогом валидации:

Щёлкнув по результату, можно открыть:
— исходный код;
— ошибки — в левом нижнем блоке (или сообщение о валидности);
— подсказки по исправлению ошибок — в правом нижнем.

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

Мы хотим провернуть фокус с :valid и :invalid, но мы не хотим опережать события и считать поле невалидным до того, как оно было заполнено.

Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty, но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент <p></p> не содержит в себе ничего. Поля ввода и так пусты по умолчанию.

Трюк в том, чтобы проверить поле на видимость атрибута placeholder:

CSSinput:not(:placeholder-shown) { }

Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:

<input placeholder=” “>

:placeholder-shown супер полезен для нас! Это в целом секретный селектор, позволяющий проверить, есть ли в поле значение или нет.

IE и Firefox пока его, что немного осложняет задачу. Обычно спасителем является новая функция @supports, но…

CSS/* Это не сработает */@supports (input:placeholder-shown) {  input:not(:placeholder-shown) {  }}

Вы не можете использовать @supports для селекторов, только для свойства/значения (например @supports (display: flex)).

Проверить плейсхолдер при помощи JavaScript довольно легко:

JavaScriptvar i = document.createElement(‘input’);if (‘placeholder’ in i) { }

Но это не кажется самым простым способом имитации :placeholder-shown. Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.

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

SCSSform {  > div {    > input,    > input,    > input {      // Когда поле ввода…      // 1. НЕ пустое      // 2. НЕ в фокусе      // 3. НЕ валидно      &:invalid:not(:focus):not(:placeholder-shown) {        // Покажем напоминание        background: pink;        & + label {          opacity: 0;        }      }    // Когда в невалидное поле устанавливается фокус (и оно по прежнему не пустое)    &:invalid:focus:not(:placeholder-shown) {      // Покажем более настойчивое напоминание       & ~ .requirements {        max-height: 200px;        padding: 0 30px 20px 50px;      }    }  }  // <input> ~  // <label> ~   // <div class=”requirements”>  .requirements {    padding: 0 30px 0 50px;    color: #999;    max-height: 0;    transition: 0.28s;    overflow: hidden;    color: red;    font-style: italic;  } }}

Different browsers interpret invalid HTML differently

Valid HTML is the only contract you have with the browser manufacturers. The HTML specification says how you should write it, and how they should interpret your document. In recent times, standards compliance of browsers has reached the point where, as long as you write valid code, all the major browsers should interpet your code the same. This is almost always the case for HTML anyway, with other standards having a few more differences in support here and there.

But what if you pass a browser invalid code? What happens then? The answer is that the browser error handling comes into play to work out what to do with the code. It basically says “ok, this code doesn’t validate, so how do we present this page to the end user? Let’s fill in the gaps like this!”

It sounds great doesn’t it? If you leave a few errors in your page, the browser will fill in the gaps for you? Not so, as each browser does things differently. For example:

<p><strong>This text should be bold</p>
<p>Should this text be bold? How does the HTML look when rendered?</p>

<p><a href="#"></strong>This text should be a link</p>
<p>Should this text be a link? How does the HTML look when rendered?</p>

The errors are that the element is incorrectly nested across multiple block elements, and the anchor element is not closed. When you try to render this across different browsers, they interpret the code in very different ways:

• Opera makes the subsequent elements children of the bold element.
• Firefox adds extra bold elements between the paragraphs, which were not present in the markup.
• Internet Explorer puts the text “This text should be a link” outside the anchor tag that creates the link.

None of the different browsers’ behaviours is incorrect; they’re all trying to fill in the gaps of your incorrect code. The bottom line is, avoid invalid markup if at all possible in your page!

Note that HTML5 fixes this, as for the first time in the history of HTML it defines how browsers should handle badly-formed markup. At the time of writing however, support for this HTML5 error handling was not widespread across browsers, so you can’t yet rely on it.

Policy File Validation

Changes and known bugs:

• 2002/12/01
  In the «Vocabulary check» step, even when there are errors, the validator
  says «no error».
• 2002/11/04
  The validator does not check the expiration date of the P3P policy. Now it is fixed.
• 2002/08/27
  When the policy file is on the SSL site, the validator thinks the policy file
  does not exist. Now it is fixed.
• 2002/08/27
  The parameter of the header.pl is not correctly escaped. Now it is fixed.
• 2002/06/18
  If the policy reference file contains non-XML code, the validator
  fails to parse the PRF, and stops without any error messages.
• 2002/06/03
  In the HTTP response header, the policy ref directive (= policyref="/w3c/pref.xml") and the compact policy (= CP="NOI IND ..") must be seperated with a comma
  character. The validator does not report an error, when a comma is missing. Now it is fixed .
• 2002/05/16 When a compact policy includes NID element,
  the compact policy does not have to include compact-purpose / compact-retention /
  compact-recipient / compact-category tokens. However, the validator requires them.
  Now it is fixed.
• 2002/04/09 Validator did not recognize the compact
  policy LOC category. Now, it is fixed.
• 2002/03/26 When the target URI includes some special
  characters, the validator failed. Now it is fixed.
• 2002/03/22 URI patterns of the INCLUDE and
  EXCLUDE elements in the PRF were relative to the PRF URI.
  Now, they are relative to the target URI (See of the spec
  for the details ).
• 2002/03/20 HTTPS related bug. When PRF is https and
  the policy is http, the validator misunderstands that they are on the
  different web sites. Now it is fixed.
• 2002/03/20 Link check sequence does not work correctly,
  when the user uploads the P3P policy file. Now it is fixed.
• 2002/03/20 If user defined DATASCHEMA uses
  DATA-STRUCT element in the base data schema file, the validator
  does not correctly recognize it.
• 2002/03/20 The validator did not recognize
  DATASCHEMA embedded in the policy file, when the user upload the
  policy file. Now, fixed.
• 2002/03/14 Now, the validator supports https.
• 2002/02/21 The validator does not support https
  protocol at this point. It will be supported soon.
• 2002/02/21 «<link> element multiple line»
  bug fixed.
• 2002/02/20 «dot dot slash» bug fixed.
  Now, the validator recognizes that [http://example.com/../abc/cde] is
  equivalent to [http://example.com/abc/cde].
• 2002/02/19 «<POLICY> element» bug fixed.
  Now, the validator does not allows policy files starting with
  <POLICY> element.
• 2002/02/19 "http-equiv header" bug fixed.
• 2002/02/18 «Single quote bug» fixed. The values of policyref and
  CP in the P3P: http header must be quoted with double quotation marks
  ("). The validator allowed single quotation marks illegally.
• 2002/02/14 The validator recognizes http-equiv headers in HTML documents.
  This is not a bug. However, almost all HTML user agents do not recognize http-equiv
  headers. Therefore, I will make the validator not to recognize them.
  Details about this issue is here.
• 2002/01/28 The validator is compatible with
  the P3P PR (proposed recommendation) spec.

Notice:

• The detailed document about this validator is
  available.
• If you have a site you would like added to the P3P compliant sites list,
  please first check your website using the P3P validator, and send e-mail
  to Yuichi Koike. Please make sure that the e-mail includes your site’s URL and your site’s name.
• This validator is compatible with P3P spec from Sep 15, 2000 to Jan 29, 2002.
  Older version of P3P validator is available here.
• Policy files will be checked against P3P XML schema and
  Base data
  schema.
• Source code of this validator is available at
  http://dev.w3.org/cvsweb/p3p-validator/20020128/
• This is alpha version, and may have bugs and errors. Please report
  errors and bugs to koike_5@mmp.cl.nec.co.jp.

Yuichi
Koike

Оптимизация кода страниц для SEO

Ниже приведены базовые рекомендации по HTML-верстке страниц, которые оценят поисковые роботы:

Теги Title, Description и Keywords следует располагать сразу после открывающегося тега head,
CSS-стили и Java-скрипты необходимо выносить в отдельные файлы с расширением .css и .js

В противном случае технический код будет увеличивать объем страницы и негативно влиять на скорость ее загрузки.
Весь ненужный код – счетчики статистики (liveinternet, rambler top100, bigmir и т.п.), формы голосований и опросов, отправки заявки или поиска товара, логин-панель — следует закрыть от индексации.
Важно удалять из исходного кода комментарии верстальщиков к разным элементам, т.к. это увеличивает объем страницы и увеличивает скорость ее загрузки.
Из кода необходимо удалять все скрытые от поисковых систем средствами CSS-форматирования элементы

К наиболее часто встречающимся элементам этой категории относятся «display:none» и «visibility:hidden».
Прописывать атрибут alt для всех изображений
Правильно формировать парные теги – если тег был открыт, его обязательно нужно закрыть.
Устаревшие теги, которые уже не поддерживаются, следует исключить из кода, заменив на универсальный тег div. Примеры таких тегов: applet, acronym, bgsound, dir, frame, frameset, noframe, isindex, listing, xmp, nextid, noembed, plaintext, rb, strike, basefont, big, blink, center, font, marquee, multicol, nobr, spacer, tt, u.
Для атрибутов ширины и высоты в элементе img нужно указывать только цифры без «px»
Корректный конструкция тега noindex выглядит следующим образом: Текст или код, который нужно исключить из индексации. Не следует использовать конструкцию Текст или код, который нужно исключить из индексации.

Расширения Chrome для проверки HTML

Расширения Chrome предлагают отличный способ расширить ваш браузер с помощью инструментов, которые помогут вам в вашей повседневной работе веб-разработчика. Здесь представлены самые популярные расширения, которые помогут вам с проверкой HTML в Chrome.

Web Developer

Это расширение является обязательным для всех веб-разработчиков, поскольку оно предлагает хороший набор инструментов, которые помогут вам в вашей работе: отключение JavaScript, управление файлами cookie, настройка CSS, формы … а также ссылки для проверки текущей страницы в W3C Validator.

Расширение веб-разработчика предоставляет вам ссылки для проверки HTML (как с помощью URL-адреса, так и путем отправки локального HTML-кода в качестве текстового ввода), CSS, каналов, доступности на волне и проверки наличия неработающих ссылок.

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

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

Validity

Расширение Validity позволяет проверять HTML в устаревшем W3C Validator и отображает проблемы, обнаруженные в консоли JavaScript, вместо открытия новой вкладки. Показывает только строку, в которой находится проблема, и общее описание – без начальных и конечных строк и столбцов, без выдержек и ссылок для дополнительной помощи.

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

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

Минусы: Зависит от действующего валидатора, не может напрямую использовать Nu Validator. Вывод ограничен и грязен, поскольку использует консоль JavaScript.

HTML Validation Bookmarklet

Acid.JS Validator – это бесплатный букмарклет, который использует API синтаксического анализатора W3C SGML для проверки разметки страницы, на которой он вызывается.

Другие расширения которые не работали на момент написания статьи

• W3C Validator . Не является официальным расширением W3C, оно должно использовать устаревший API валидатора и отображать проблемы на консоли JS, но оно не работает.
• HTML валидатор . Это не работает, вероятно, потому что у него была опция автозапуска, которая могла привести к его запрету .
• Kingsquare HTML Validator . Предполагается, что он предлагает альтернативный способ проверки HTML с использованием библиотеки Tidy HTML вместо W3C Validator, он просто не работает.

Цель валидации

Цель валидации и компьютерной проверки документов HTML, XHTML и CSS — помочь убедиться, что документы синтаксически правильны и не содержат проблем. Проверенные документы HTML, XHTML и CSS с большей вероятностью:

рендеринг быстрее и с меньшим количеством проблем (пользовательским агентам не нужно «выяснять» и расшифровывать плохой синтаксис)
заставляют браузеры и пользовательские агенты создавать более согласованную объектную модель документа , что важно для CSS и JavaScript
быть совместимым с будущими версиями пользовательских агентов и браузеров («с учетом будущего»)
быть совместимым с текущими и будущими спецификациями HTML, XHTML и CSS
отображать как задумано на различных пользовательских агентах, включая мобильные устройства

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

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

Как проверить валидность HTML-кода

Проверка HTML-кода сайта на валидность осуществляется с помощью специального инструмента от W3C https://validator.w3.org/ Проверить код можно, указав URL сайта, загрузив часть кода или файл с ним.

HTML-валидатор произведет несколько проверок загруженного кода, например:

• Валидация синтаксиса — проверка на наличие синтаксических ошибок.
• Проверка вложенности тегов
• Валидация DTD — проверка соответствия кода указанному Document Type Definition. Она включает проверку названий тегов, атрибутов, и встраивания тегов.
• Проверка на посторонние элементы — проверка выявляет все, что есть в коде, но отсутствует в DTD. Например, пользовательские теги и атрибуты.

Сервис поддерживает IDN-домены и для их проверки не требуется переводить имя домена в Punycode.

Отчет, который предоставляет валидатор от W3C, содержит:

• Список ошибок и предупреждений, с указанием критичности,
• Строка тега с ошибкой,
• Рекомендации по исправлению.

Для исправления ошибок можно обратиться к специалистам либо исправить их самостоятельно

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

Plan and Vision

High-Level Objectives

• Provide the web with a one-stop service for Web Quality check
• Help raise quality for (m)any kind(s) of Web content
• Build a positive culture of Web Quality
• Future-proof our services (new formats, new usage)
• Leverage Communities energy
• Remain the trusted source by professionals
• Find the right balance between accuracy and user-friendliness

Roadmap

• New engine: The CSS validator is currently suffering from its usage of a relatively complex java engine for parsing and validation. With help, the engine could be rewritten using either java or a different technology (e.g javascript), while using the existing test suite and localization resources to keep the tool reliable and multilingual.
• move from a per-profile only validation to a checking of «all of CSS properties» by default, mirroring the current consensus in CSS Working Group that there is only «one CSS».
• Add major features, such as accessibility checker (color contrast analysis) and browser bug check (your CSS is valid, but these feature may cause trouble). These may be added directly to the validator, or plugged in together with the CSS validator into the Unicorn Framework.

Errors

In computer programming, there are broadly speaking two kinds of problems with code:

• syntactical errors — these are where a mistake in the writing of the code causes the computer to be unable to execute or compile the program properly.
• programming (or logic) errors — these are where the code does not completely reflect the intent of the programmer.

With most programming languages, the first error is incredibly easy to spot — your program will just refuse to run or compile until the error is fixed. This makes finding and fixing these types of bugs much easier in those general head-scratching moments of “So why isn’t it doing what I want?”

История версий

Проверка разметки полиглотов была добавлена ​​в CSE HTML Validator v12, а поддержка мобильной разработки (для HTML и CSS) была добавлена ​​в CSE HTML Validator v14 и улучшена в v15. В версии 15 добавлена ​​встроенная проверка синтаксиса для файлов манифеста кеша JSON и HTML5 . Версия 16 добавила линтинг JavaScript с помощью JSHint , инструмента статического анализа кода для проверки JavaScript, но также продолжает поддерживать JSLint . В версии 17 добавлена ​​поддержка проекта Accelerated Mobile Pages Project , который представляет собой тип HTML, оптимизированного для просмотра веб-страниц на мобильных устройствах, а также поддержка проверки DOM в реальном времени с помощью Google Chrome.

Версия 18 переименовала программное обеспечение в CSS HTML Validator 2018 и включает обновленную поддержку HTML5 и CSS. Версия 18 также добавила новый отчет «По сообщению» в мастере пакетной обработки и отказалась от поддержки Windows Vista и более ранних версий .

CSS HTML Validator 2019 / v19 включает обновленную поддержку HTML и CSS, добавляет поддержку WCAG 2.1, улучшает поддержку при работе под Wine (программное обеспечение) и является собственным 64-битным приложением (ранее выпуски были 32-битными). CSS HTML Validator 2020 / v20, впервые выпущенный в январе 2020 года, включает HTML, CSS, специальные возможности и другие обновления, включая улучшенную поддержку проекта Accelerated Mobile Pages . Также, начиная с 2020 / v20, версия Standard была переименована в версию Home. CSS HTML Validator 2021 / v21, впервые выпущенный в январе 2021 года, включает дополнительные обновления HTML, CSS, специальные возможности и другие обновления.

Онлайн-версия на основе CSS HTML Validator Pro, которая может проверять документы с помощью загрузки файлов, URL-адресов или фрагментов (прямой ввод текста), была прекращена в мае 2017 года в пользу настольной версии для Microsoft Windows.

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

Последнее обновление: 08.04.2016

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

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

Для создания валидации у элементов форм HTML5 используется ряд атрибутов:

• min и max: минимально и максимально допустимые значения. Для элемента input с типом datetime-local,
  date, month, time, week, number, range

Атрибут required

Атрибут required требует обязательного наличия значения:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="login">Логин:</label>
				<input type="text" required id="login" name="login" />
			</p>
			<p>
				<label for="password">Пароль:</label>
				<input type="password" required id="password" name="password" />
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

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

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

Атрибуты max и min

Для ограничения диапазона вводимых значений применяются атрибуты max и min:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="age">Возраст:</label>
				<input type="number" min="1" max="100" value="18" id="age" name="age"/>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Атрибут pattern

Атрибут pattern задает шаблон, которому должны соответствовать данные. Для определения шаблона используется язык так называемых
регулярных выражений. Рассмотрим самые простейшие примеры:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Телефон:</label>
				<input type="text" placeholder="+1-234-567-8901" 
						pattern="\+\d-\d{3}-\d{3}-\d{4}" id="phone" name="phone" />
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Здесь для ввода номера телефона используется регулярное выражение . Оно означает, что первым элементом в номере
должен идти знак плюс +. Выражение \d представляет любую цифру от 0 до 9. Выражение означает три подряд идущих цифры, а
— четыре цифры подряд. То есть это выражение будет соответствовать номеру телефона в формате «+1-234-567-8901».

Если мы введем данные, которые не соответствуют этому шаблону, и нажмем на отправку, то браузер отобразит ошибку:

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form novalidate method="get">
			<p>
				<label for="phone">Телефон:</label>
				<input type="text" placeholder="+1-234-567-8901" 
						pattern="\+\d-\d{3}-\d{3}-\d{4}" id="phone" name="phone" />
			</p>
			<p>
				<input type="submit" value="Отправить" formnovalidate />
			</p>
		</form>
	</body>
</html>

НазадВперед