Главная / Блог / Полезная информация / Как повысить эффективность html-форм: часть 1

20 мая 16

Как повысить эффективность html-форм: часть 1

как повысить эффективность html форм
Автор: admin Категория: Полезная информация

Специалисты компании «ПРОФИ» специально для наших читателей разобрали несколько простых примеров, благодаря которым вы сможете создавать эффективно работающие HTML-формы.

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

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

Полезные советы по составлению форм

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

  • не получается разобраться, какие данные необходимо разместить в поле;
  • возникли проблемы с форматом ввода;
  • трудно понять, какая информация обязательна к указанию.

Бесполезно писать к каждой форме развернутую инструкцию – ее читать все равно не будут. Намного эффективнее использовать специальные инструменты.

Label

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

  • С неявной связью, выглядит это так:
  • <label><input type="radio" name="confirm" value="yes">Yes</label>
  • С явной связью, для которой характерно использование атрибута и идентификатора (for и id, соответственно). Код в этом случае может быть таким:
  • <label for="name">Your Name</label>
    <input id="name" ...>

Второй способ позволяет изменять стили переключателей (radio) и флажков (checkbox) вне зависимости от оформления остальных элементов ввода. При этом не возникает потребности в использовании селекторов атрибутов – она работают не во всех браузерах.

Применение тега label дает два преимущества:

  • Автоматическое распознавание голосовыми браузерами.
  • Возможность активизации ассоциированного элемента. Если объяснять по-простому, активным будет не только флажок или переключатель, но и текст, который к ним относится. Такие формы лучше воспринимаются пользователями.

Тег label в первую очередь нужен для того, чтобы сделать интерфейс более дружественным к посетителям сайта.

Placeholder

Этот атрибут служит для вывода текста внутри поля формы. Прежде подобная функция реализовывалась посредством скриптов, с появлением Placeholder все стало существенно проще:

<input type="text" placeholder="имя" ...>

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

Ассоциированные подсказки

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

<label for="date">date</label>
<input id="date" aria-describedby="date-note" ...>
<em id="date-note" class="note">Укажите, пожалуйста, дату Вашего рождения</em>

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

Теги: ,

Комментарии:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>