Ранее в этом блоге размещался обзор HTML 5 . Давайте подробнее рассмотрим одну из более полезных функций HTML5: текст-заполнитель. Текст-заполнитель — это краткая подсказка, призванная помочь пользователю понять, каким должен быть ввод данных. Это не текст по умолчанию.
Раньше для этого требовался некоторый JavaScript; теперь это очень просто. Просто добавьте атрибут placeholder к элементу input.
<form action="myform"> <label for="first_name">First name:</label> <input name="first_name" placeholder="Your first name..." type="text"/> </form>
Заполнитель текста имеет некоторые реальные преимущества. Это означает, что вы предоставляете пользователю больше информации, но больше не занимаете ценное пространство на странице. Теперь справедливо сказать, что есть некоторые очень популярные графические интерфейсы, которые не используют заполнитель текста. Например, экран входа в систему для Gmail не.
 |
| вход в Gmail |
Возникает вопрос, когда с точки зрения юзабилити, когда имеет смысл его использовать и когда его лучше избегать? Давайте подумаем немного больше о случае с gmail, и это поможет ответить на вопрос.
По умолчанию текстовое поле имени пользователя gmail
получает фокус, когда вы заходите на сайт www.gmail.com. Это имеет смысл. Текстовое поле Имя пользователя — это
умный начальный пунктдля этой страницы. Это логичное место для пользователя, чтобы начать свое взаимодействие. Теперь, когда текстовое поле имеет фокус любого текста-заполнителя, оно всегда стирается. В противном случае пользователь будет видеть смесь того, что он печатает, и того, что представляет собой текст-заполнитель. Это было бы просто ужасно! Итак, поскольку текстовое поле имени пользователя имеет фокус по умолчанию для gmail.com, имеет смысл, что когда вы приедете, текстовое поле имени пользователя будет пустым. Как насчет случая, когда пользователь ничего не печатает в текстовом поле имени пользователя и смещает фокус на что-то другое? Будет ли добавление текста заполнителя добавить смысл или сбить пользователя с толку? Я бы сказал, что это смутило бы их. Помимо внезапного мерцания, являющегося раздражением, пользователь мог подумать, что он что-то сделал, чтобы текст был помещен туда. Это будет сбивать с толку, а не разъяснять! Что касается поля пароля,хорошо у них вообще нет текста заполнителя — по очевидным причинам. Так что Gmail здесь умный. Там нет заполнителя текста, но по логическим причинам.
Таким образом, текст-заполнитель великолепен, но возникает вопрос, когда его следует и не следует использовать, не следует избегать.
Теперь давайте углубимся в удобство использования. Спецификация W3C
гласит, что placeholderатрибут : «
не должен использоваться в качестве альтернативы
label». Я бы также предложил, чтобы текст заполнителя не повторял метку. Какой смысл говорить одно и то же дважды? Там нет смысла в дублировании, но почти всегда есть причины для выяснения. Хорошим примером является
панель поиска Firefox, Это текстовая строка в верхнем правом углу окна Firefox, которую можно использовать для поиска в популярных поисковых системах без непосредственного доступа к ним пользователя. Ряд различных поисковых систем могут быть выбраны. Во всех случаях для движка есть значок, который выступает в качестве ярлыка для поисковой системы. Кроме того, в текстовом поле поиска рядом с меткой значка есть текст-заполнитель. Это объясняет, что обозначает значок метки. Например, для Википедии мы видим значок Wikipedia, а затем текст-заполнитель:
Wikipedia (en)
 |
| Википедия выбрана |
Что действительно умно здесь, так это использование очень эффективного использования недвижимости. Значок очень маленький, и если он неясен, это означает, что википедия объясняет этот вопрос. Мы видим то же самое, если выбран Google.
 |
| Google выбрал |
Так что да, текст-заполнитель —
отличная функция. Он прост в использовании, но использует его в нужное время и требует продуманной работы. Все сводится к простому вопросу: добавит ли текст-заполнитель информацию для пользователя или нет?
Таким образом, любой браузер предостерегает? Ну, не все браузеры поддерживают атрибут placeholder. Например IE 9
нет . Но, к счастью, если атрибут placeholder не понят, он игнорируется. Нет никаких неприятных исключений или сообщений об ошибках. Просто взгляните на эту веб-страницу в IE 9. Как всегда, если вы хотите поддерживать резервный режим,
используйте библиотеку Modenizer . Есть несколько
примеров, доступныхиспользование Javascript / JQuery, если вы хотите, чтобы в браузерах не было текста-заполнителя, который не поддерживает этот простой способ сделать это с помощью HTML 5.
Ссылки:
1. HTML5 spec: http://dev.w3.org/html5/spec/Overview .html
2. Спецификация заполнителя HTML5: http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
3. Сайт для проверки поддержки вашего браузера HTML5: http://html5test.com/
4 Сайт для проверки поддержки вашего браузера для поддержки атрибутов типа ввода: http://miketaylr.com/code/input-type-attr.html
От http://dublintech.blogspot.com/2012/01/html-5-placeholder-text.html