Используем тег Label для усовершенствования форм
+1

Тег LabelТег label в HTML позволяет привязать определенную метку с элементом формы. В качестве элемента формы могут выступать: <input>, <textarea>, <select>. После такой привязки щелчок
пользователем на метке будет активировать элемент формы. Кроме того, существует возможность назначить горячие клавиши, и, с их помощью, переходить к активному элементу.
Bcе современные браузеры полностью поддерживают работу с данным элементом.

У данного тега есть некоторые атрибуты:

accesskey — для назначения горячих клавиш
и
for — для связи с элементом формы (указывается идентификатор элемента).

Связать элемент формы с меткой можно двумя способами:

  1. Поместить элемент формы врутрь label
    <label><input type="…"> метка элемента </label>
  2. указав в качестве значения атрибута for для label идентификатор элемента формы
    <input id="идентификатор"><label for="идентификатор"> метка элемента </label>

Пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Используем тег LABEL для создания форм</title>
</head>
<body>
<div class="label">
<h3>Форма с использованием тега LABEL (связь с помощью атрибута for)</h3>
<p>При щелчке на названии поля активируется поле формы</p>
<form  method="post" action="#" >
    <p><label for="username"  >Пользователь</label>
        <input  type="text" id="username" name="username" />
    </p>
    <p><label  for="password" >Пароль</label>
        <input  type="password" id="password" name="pass" />
    </p>
    <p><input  type="submit" value="Отправить" /></p>
</form>
</div>
<div class="button">
  <form action="script.php">
   <h3>Применяем Label к "checkbox" (label врутри input)</h3>
   <p><input type="checkbox" id="check1"><label for="check1">Радиокнопка 1</label><Br>
   <input type="checkbox" id="check2"><label for="check2">Радиокнопка 2</label><Br>
   <input type="checkbox" id="check3"><label for="check3">Радиокнопка 3</label><Br>
  </form> 
</div>
</body>
</html>

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

И еще пару слов об атрибуте accesskey.

Как я уже говорил, этот атрибут служит для того, чтобы назначить горячие клавиши для активирования элемента формы. В качестве значения атрибута могут выступать цифры от 0 до 9

, а также латинские буквы от a до z.

Браузеры для перехода по горячим клавишам используют различные комбинации:

  • IE, Chrome, Safari — Alt + назначенная клавиша
  • Opera — Shift + Esc + назначенная клавиша
  • Firefox — Shift + Alt + назначенная клавиша.
+1
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: HTML теги: , . Прямая ссылка на запись.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *