Оглавление

Возможность заполнения формы для пользователей текстовых устройств

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

 

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

 

Элемент label связывает ярлык с соответствующим ему полем формы. Его использование решает описанную проблему. Подобно другим элементам, стиль label можно с легкостью задать с помощью CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Регистрация пользователей</title>
<meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="textonly.css" />
</head>
<body>
<h1>Форма регистрации пользователей</h1>
<form method="post" action="textonly.html" id="form1">
  <table>
    <tr>
      <td><label for="fullname">Имя:</label></td>
      <td><input type="text" name="fullname" id="fullname" class="txt" /></td>
    </tr>
    <tr>
      <td><label for="email">Email:</label></td>
      <td><input type="text" name="email" id="email" class="txt" /></td>
    </tr>
    <tr>
      <td><label for="password1">Пароль:</label></td>
      <td><input type="password" name="password1" id="password1" class="txt" /></td>
    </tr>
    <tr>
      <td><label for="password2">Повторите пароль:</label></td>
      <td><input type="password" name="password2" id="password2" class="txt" /></td>
    </tr>
    <tr>
      <td><label for="level">Уровень членства:</label></td>
      <td><select name="level">
          <option value="silver">серебро</option>
          <option value="gold">золото</option>
        </select></td>
    </tr>
  </table>
  <p>
    <input type="submit" name="btnSubmit" id="btnSubmit" 
           value="Зарегистрироваться!" class="btn" />
  </p>
</form>
</body>
</html>

 

 

h1 {
  font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 200px;
}
input.btn {
  color: #00008B;
  background-color: #ADD8E6;
  border: 1px outset #00008B;
}
label {
  font : bold 0.9em  Arial, Helvetica, sans-serif;
}


Результат применения этих правил стилей показан на рис. 6.7,
Помимо улучшения параметров юзабилити для текстовых броузеров и экранных дикторов, эти правила стилей обеспечивают размещение курсора в соответствующем поле, когда пользователь щелкает по ярлыку при просмотре сайта в обычном визуальном броузере. Таким образом, от использования label выигрывают все!

 

Отображение формы в браузере

Рис. 6.7. Отображение формы в броузере (DEMO)

 

Обсуждение
С помощью элемента label можно точно указать, какого рода информацию пользователь должен ввести в поле. Как мы уже говорили, четкое указание на назначение каждого поля особенно важно для пользователей экранных дикторов. Использование label особенно актуально для форм, созданных с помощью таблицы, где ярлык располагается в одной ячейке, а соответствующее ему поле – в другой. (Чуть ниже я расскажу, как создать форму такой структуры без использования таблиц.)

 

Связь между элементом label и соответствующим полем формы обеспечивается с помощью атрибута for тега <label>. Значением атрибута служит ID поля:

    <tr>
      <td><label for="fullname">Имя:</label></td>
      <td><input type="text" name="fullname" id="fullname" class="txt" /></td>
    </tr>

 

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

label {
  font : bold 0.9em  Arial, Helvetica, sans-serif;
}

 

Предупреждение
Использование явных ярлыков. Вместо использования элемента label можно указать ярлык явно. Для этого элемент формы должен стать дочерним для элемента label (что указывает на их связь); при этом не нужно использовать атрибут for, например:
<label> Имя: <input type=”text” name=”fullname” id=”fullname”
class=”txt” /></label>
Такая верстка считается валидной, однако использовать такой прием не рекомендуется, поскольку некоторые программы специальных возможностей обрабатывают такой код некорректно. Во избежание недоразумений всегда пользуйтесь атрибутом for.
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити