Содержание

Защита от дурака | htmlbook.ru

«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.

Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

  1. Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.
  2. На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.
  3. Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

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

Обязательное поле

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

Пример 1. Атрибут required

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обязательное поле</title>
 </head>
 <body>
  <form>
   <p>Логин: <input name="login" required></p>
   <p>Пароль: <input type="password" name="login" required></p>
   <p><input type="submit" value="Вход"></p>
  </form>
 </body>
</html>

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

Рис. 1. Обязательное поле не заполнено

Корректность данных

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

  • Веб-адрес (<input type=»url»>) должен содержать протокол (http://, https://, ftp://).
  • Адрес электронной почты (<input type=»email»>) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.

Пример 2. Корректность данных

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Корректность данных</title>
 </head>
 <body>
  <form>
   <p>Заполните форму (все поля  обязательны)</p>
   <p>Имя: <input name="name" required></p>
   <p>Email: <input type="email" name="email" required></p>
   <p>Сайт: <input type="url" name="site" required></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Opera проверяет элемент формы только при наличии атрибута name.[ 0-9]+$Любое количество цифр.\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}IP-адрес.[0-9]{6}Почтовый индекс.\d+(,\d{2})?Цена в формате 1,34 (разделитель запятая).\d+(\.\d{2})?Цена в формате 2.10 (разделитель точка).

В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

Пример 3. Шаблон ввода

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ввод цвета</title>
 </head>
 <body>
  <form>
   <p>Введите шестнадцатеричное значение цвета 
   (должно начинаться с #)</p>
   <p><input name="digit" required pattern="#[0-9A-Fa-f]{6}"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

На рис. 3 показано предупреждение в браузере Chrome.

Рис. 3. Введённые данные не соответствуют шаблону

Отмена валидации

Валидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate тега <form>. В примере 4 показано использование этого атрибута.

Пример 4. Отмена валидации

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут novalidate</title>
 </head>
 <body>
  <form novalidate>
   <p><input name="user" required placeholder="Ваше имя"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Для аналогичной цели применяется и атрибут formnovalidate, который добавляется к кнопке для отправки формы, в данном случае к тегу <input type=»submit»>. В этом случае форма из примера 4 будет иметь следующий вид.

<form>
  <p><input name="user" required placeholder="Ваше имя"></p>
  <p><input type="submit" value="Отправить" formnovalidate></p>
</form>

Валидность сайта, HTML страницы – сервисы проверки, валидный noindex

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

В принципе, особых проблем по созданию валидного HTML кода нет. В зависимости от используемого формата DOCTYPE определены те или иные правила. Чаще всего в блогах на WordPress идет тип документа XHTML 1.0 Transitional. Большинство шаблонов, найденных в сети, уже валидны, поскольку их создатели беспокоятся о правильности кода — с ошибками продать темы не получится. Да и вообще стандартам «там», по-моему, больше внимания уделяется.

Сервисы проверки валидности кода HTML

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

При наличии неточностей, в результатах вы получите список предупреждений и ошибок в коде. Иначе высветится приятная зеленая надпись «This document was successfully checked as XHTML 1.0 Transitional!»:)

Чтобы ускорить процесс можно использовать одну из функций модуля для firefox web developer, где кроме валидации есть куча других полезных мелочей.

Валидный noindex

Проблема валидности, как это не удивительно, часто подстерегает с использованием отечественных особенностей, например, счетчики различные и тег noindex. Он используется исключительно для Яндекса чтобы запретить индексацию информации, находящейся в нем. Точно также как для гугла закрываются от индексации ссылки через rel=»nofollow». Но проблема заключается в том, что в W3C вообще не знают или не воспринимают тег noindex, поэтому получить валидный HTML с его использованием нереально. Приходится применять маленькую хитрость в виде следующего кода:

<span><![CDATA[<noindex>]]></span>
Текст и ссылки, которые не индексируются
<span><![CDATA[</noindex>]]></span>

<span><![CDATA[<noindex>]]></span> Текст и ссылки, которые не индексируются <span><![CDATA[</noindex>]]></span>

Это для HTML, при этом в CSS пишите класс:

Данный метод можно найти на множестве сайтов и блогов, о нем не писал только ленивый. А я вот лишь сейчас только занялся валидацией, поэтому и обратил внимание. Использовал его на своем сайте — HTML валидация проходится успешно. При этом многие авторы (оптимизаторы) заявляют, что в процессе тестирования noindex продолжает корректно выполнять свои функции для Яндекса. То есть, походу данное решение позволяет получить валидный noindex.

Кроме того в коде часто бывают проблемы со счетчиками, где используется символ «&». Так вот для типа документа XHTML его нужно просто заменить набором символов «&amp;». Чтобы исправить другие ошибки, читайте пояснения валидатора.

Даже, если валидность HTML не влияет на восприятие сайта поисковиком google, то она может помочь выявить наличие ошибок в самом проекте. Некоторые браузеры (как firefox) часто закрывают глаза на небольшие нюансы — типа отсутствие закрывающей конструкции —> и т.п., в то время как IE будет выводить ошибочное содержимое страницы. Или div какой-то не закрыли, упустили — все это можно с большой вероятностью обнаружить при валидации документа HTML.

А вы что думаете по поводу валидности кода — соблюдаете или нет?

UPD 9.07. Почитав еще немного информации на сайтах и форумах, пришел к выводу, что конструция <![CDATA[<noindex>]]> ссылки от Яши не закроет, хотя валидность будет 100%. Поэтому, думаю, правильным будет соблюдение всех правил написания html кода, но с обычным использованием тега noindex без извращений.

UPD UPD 15.05.11 Неожиданно ответ по поводу валидного noindex был найден на сайте Яндекса, где в описании совершенно четко указано решение данной проблемы, позволяющее использовать noindex и не нарушающего никакие правила W3C (плюс, кстати, Яндекс теперь понимает rel=»nofollow»):

<!--noindex-->текст, индексирование которого нужно запретить<!--/noindex-->

<!—noindex—>текст, индексирование которого нужно запретить<!—/noindex—>

P.S. Постовой. Поисковое продвижение сайта, поисковая оптимизация сайтов.
Новые книги предлагает книжный интернет магазин Букля. Низкие цены, бесплатная доставка!
Машинки и паровозики — игрушки для детей.
Посетите наш цветочный салон и купите цветы, готовые букеты.

Проверить html код на ошибки

 

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

Если подробнее, то я в деталях опишу, как и какими программами проверить html код на ошибки, что такое Консорциум Всемирной паутины, который более известный под аббревиатурой W3C и дам определение важным терминам. Предоставляемая информация в статье поможет вам не только проверять страницы сайтов на корректность, а и конкретнее разобраться с понятием валидации в общем. Давайте начнем!

Каждой программе нужно двойное В: валидация и верификация

Каждый написанный программный код проходит проверку корректности семантики и логики связей объектов. Если использовать терминологию, то это называется валидация и верификация. Их используют во многих областях IT: программирование, сайтостроение, тестирование и т.д.

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

Итак, валидация – это проверка созданного документа с кодом на наличие ошибок в написании элементов, соответствие мировым единым стандартам, которые установлены в W3C, и прописанным спецификациям самого языка.

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

  • Неверно написанные теги, атрибуты или свойства;
  • Поставлены лишние скобки;
  • Обнаружен не закрытый элемент;
  • Не указан или неверно указан тип <!DOCTYPE>;
  • Ошибочно вложены теги;
  • Нет указания обязательных атрибутов.

Теперь рассмотрим верификацию.

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

С какой целью существует Консорциум Всемирной паутины?

W3 Консорциум – это целая организация, специализирующаяся на разработке и внедрении единых стандартов для интернет-ресурсов и Всемирной паутины в целом. Все принятые стандарты называются W3 рекомендациями и внедряются как во все технологические решения, так и в веб-сервисы.

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

W3C также выпускает свои пакеты программ, среди которых есть и validator.w3.org. Это один из наиболее известных сервисов для проверки валидности кода.

Сайт validator.w3.org поддерживает проверку программ в трех режимах: онлайн-режим проверки вписанного кода в диалоговое окно, валидация по ссылке на ресурс и проверка загруженного файла.

А теперь подробнее познакомимся с работой в данном сервисе.

 

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

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

Расширений мне, побольше!

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

Так, на сцене появляется HTML Validator для Firefox и Chrome. Так как данные браузер занимают почетные места среди лидеров, всемирная организация создала под них встраиваемый валидатор HTML Validator. Он разработан по принципу сайта validator.w3.org, однако имеет явное преимущество – функционирует без подключения к сети.

Установить представленное расширение можно тремя способами:

  1. Через привычную нам панель расширений;
  2. Через указания пути документа с расширением;
  3. Загрузкой «в лоб». В системных файлах нужно найти каталог Firefox (допустим C:\Program Files\Chrome или C:\Program Files\Mozilla Firefox), а в ней подкаталог extension, куда и копируется расширение.

После повторного запуска браузера, расширение вступит в силу.

HTML Validator очень прост в использовании. Он не работает на русском языке, однако обладает интуитивно понятным интерфейсом.

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

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

Еще немного программ для вадидации

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

А теперь я хочу добавить небольшой бонус в виде описания одного онлайн-сервиса, который проверяет код всех популярных веб-языков, снабжен конвертером и многими другими полезными вещами. Это сайт http://www.freeformatter.com. Он проверяет как html-текст, так и даже запросы на XPath.

Для проверки сайта стоит только или вставить текст документа, или ссылку на проверяемый ресурс.

На этом я закончу публикацию. Делитесь ссылкой на статью с друзьями и не забывайте подписываться на мои обновления. Желаю удачи! Пока-пока!

С уважентем, Роман Чуешов

 

 

Загрузка…

Прочитано: 513 раз

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

174

Веб-программирование — HTML5 — Валидация форм

Поля в форме предназначены для сбора информации от посетителей страницы. Но несмотря на все усилия и объяснения, получение правильной информации может оказаться трудным делом. Нетерпеливые или невнимательные посетители могут пропускать важные поля, заполнять поле или несколько полей не полностью, да и попросту нажимать неправильные клавиши. Заполнив таким образом форму, они нажимают кнопку «Отправить», и серверная программа получает набор данных, с которыми она не знает что делать (если не реализована валидация данных на серверной стороне).

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

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

Создатели HTML5 смогли увидеть эту надобность и изобрели способ привлечь браузеры на помощь, переложив задачу проверки с плеч веб-разработчиков на веб-обозреватели. Создатели HTML5 разработали систему проверки на стороне клиента, которая позволяет вставлять основные правила валидации в любое поле <input>. Лучшее в этой системе — это ее простота и легкость: все, что нужно сделать — так это вставить правильный атрибут.

Как работает проверка HTML5?

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

Например, допустим, что определенное поле нельзя оставлять пустым, и посетитель должен ввести в него хоть что-то. В HTML5 это осуществляется с помощью атрибута required в соответствующем поле (далее дорабатываем пример из предыдущей статьи):

<input placeholder="Иван Иванов" autofocus required>

О валидации кода w3c на Page-speed.ru

Что такое валидация HTML?

Валидация HTML является одним из основных факторов, влияющих на качество веб-дизайна.

Консорциум Всемирной паутины (W3C) — это международное сообщество, которое де-факто определило стандарты написания HTML кода на вашем веб-сайте. Эти правила были созданы для того, чтобы браузеры могли корректно обрабатывать код и правильно отображать веб-страницы. Было много версий стандартов HTML, последней версией является HTML5. Она добавила интересные функции, такие как хранение данных локально в браузерах пользователей, встроенная поддержка аудио и видео, поддержка векторной графики и прочее.

В Интернете доступно множество инструментов, которые специально созданы для проверки кода в соответствии со стандартами W3C. Для HTML5 самым популярным является Nu HTML Checker, а для вашего удобства вы можете им воспользоваться на нашем сайте.

На что влияет валидность кода

  •  Поддержка кроссбраузерности.
  •  Если ваш HTML-код валиден, он будет корректно отображаться во всех основных веб-браузерах (Chrome, Safari, Firefox, Opera, Edge/Explorer), а также будет выглядеть одинаково или почти одинаково в каждом из них.
  •  
  •  Оптимизация в поисковых системах.
  •  Это повысит вероятность правильной индексации содержимого вашей страницы поисковыми системами. Ваш контент должен соответствовать семантической верстке, и один из способов обеспечить это является проверка кода. Валидатор поможет убедиться, что все HTML-теги закрыты и вы их правильно используете, а так же покажет другие важные и распространенные проблемы, которые могут помешать нормальной индексации поисковыми роботами. По утверждению Google, правильность кода не влияет на позиции в поисковиках. Но при этом наличие ошибок в коде способно негативно повлиять на сканирование микроразметки и адаптивность под мобильные устройства.
  •  
  •  Возникновение ошибок в браузере.
  •  Бывают ситуации, когда владелец сайта недоумевает, почему один блок «съехал». Или почему в одном браузере все в порядке, а в другом верстка плывет. И пытается решить это при помощи CSS. Вместо этого в первую очередь следует проверить код на ошибки – высока вероятность того, что проблема кроется именно в этом.
  •  
  •  Чистый HTML-код.
  •  Если ваш код проверен и написан правильно, он сделает задачу по его обновлению и внесению изменений намного проще. Это значительно снизит шансы, что редактирование CSS или добавление фрагмента кода HTML приведет к нарушению вашей веб-страницы.
  •  
  •  Поддержка новейших версий веб-браузера.
  •  Браузеры часто обновляются и, как правило, стараются поддерживать и соблюдать стандарты HTML W3C. Если ваш код соответствует требованиям W3C, он должен снизить шансы на появление «сломанной» страницы в будущих версиях.

Частые вопросы

  •  Валидатор показывает ошибки на моем сайте, но он отображается нормально.
  •  Условно ошибки можно разделить на две категории: критические и не критические. И, несмотря на то, что современные браузеры стараются понимать такой код – это не дает гарантии корректного отображения во всех браузерах и устройствах. Помимо этого, некоторые из ваших материалов могут не индексироваться должным образом поисковыми системами.
  •  
  •  Валидатор ругается на нестанда

Валидатор CSS кода

Быстрый поиск инструмента

  • WEB-Tools