Html lable – asp.net mvc — What’s the difference between Html.Label, Html.LabelFor and Html.LabelForModel

Leave a Comment / Html / By /

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.0+7.0+1.0+4.0+1.2+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>. При втором способе элемент формы помещается внутрь контейнера <label>.

Синтаксис

<input><label for="идентификатор">Текст</label>
<label><input type="..."> Текст</label>

Атрибуты

accesskey
Доступ к элементам формы с помощью горячих клавиш.
for
Идентификатор элемента, с которым следует установить связь.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LABEL</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Lorem ipsum dolor sit amet...</b></p>
   <p><input type="checkbox"><label for="check1">Lorem</label><Br>
   <input type="checkbox"><label for="check2">Ipsum</label><Br>
   <input type="checkbox"><label for="check3">Dolor</label><Br>
   <input type="checkbox"><label for="check4">Sit amet</label></p>
  </form> 
 </body>
</html>

Браузеры

IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега <label>.

IE до версии 8.0 включительно корректно работает с <label> только при наличии в нём текста. Если добавить изображение (<label><img src=»pic.jpg» alt=»»></label> ), то активировать поле формы щелчком по картинке нельзя.

Тег | HTML справочник

HTML теги

Значение и применение

Тег <label> (англ. — метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
forelement_idОпределяеть к какому элементу формы относится текущая метка.
formform_id

Определяет форму/формы с которой будет связана метка. В качестве значения атрибута выступает идентификатор элемента <form> (<form id = «вот это значение»>). Этот атрибут позволяет размещать метки в произвольном месте конкретного документа, а не только внутри тега <form>. Этот атрибут был удален из спецификации HTML 28 апреля 2016 года, но скрипты имеют доступ только для чтения HTMLLabelElement.form (возвращает форму с которой связана метка, либо «0», если метка не связана с формой).

Пример использования

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <label></title>
	</head>
	<body>
		<form>
			<label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"-->
			<input type = "radio" id = "yes"name = "choice" value = "yes" checked> 
			<label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
			<input type = "radio"id = "no" name = "choice" value = "no">
		</form><br>
		<form>
			<label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
			<label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> 
		</form> 
	</body>
</html>

В этом примере мы:

  • Внутри первой формы:
    • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
    • Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
  • Внутри второй формы:
    • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
    • Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Пример использования HTML тега <label> (использование текстовой метки).

Отличия HTML 4.01 от HTML 5

В HTML 5 был введён новый атрибут form.

Значение CSS по умолчанию

label {
cursor : default;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

| HTML | WebReference

Элемент <label> (от англ. label — метка) устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при щелчке курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for элемента <label>. При втором способе элемент формы помещается внутрь контейнера <label>.

Синтаксис

<input><label for="<идентификатор>">Текст</label>
<label><input> Текст</label>

Закрывающий тег

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>LABEL</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Выберите напиток</b></p>
   <p><input type="checkbox"><label for="check1">Коньяк</label><br>
   <input type="checkbox"><label for="check2">Арманьяк</label><br>
   <input type="checkbox"><label for="check3">Кальвадос</label></p>
  </form> 
 </body>
</html>

Примечание

IE до версии 6.0 включительно не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри <label>.

IE до версии 8.0 включительно корректно работает с <label> только при наличии в нём текста. Если добавить изображение (<label><img src=»pic.jpg» alt=»»></label>), то активировать поле формы щелчком по картинке нельзя.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <label> (в переводе с англ. — метка) определяет текстовую метку для элемента <input>. По своему виду метка ничем не отличается от обычного текста, однако она позволяет пользователю выбрать элемент формы простым кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>. Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно быть эквивалентно значению атрибута id того элемента формы, к которому будет относится метка.

Атрибутом «for» можно не пользоваться, если элемент <input> будет находиться внутри элемента <label>.

Атрибуты

for:
Устанавливает связь с элементом формы, к которому будет относится метка. В качестве значения для атрибута выступает идентификатор целевого элемента. Пример »
form:
Определяет форму с которой будет связана метка. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать метки в произвольном месте документа, а не только в качестве потомка элемента <form>. Пример »

Тег <label> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


label {
    cursor: default;
}

Пример


<form>
  <label for="male">Male</label>
  <input type="radio" name="sex">
  <br>
  <label for="female">Female</label>
  <input type="radio" name="sex">
</form>

<p>или тоже самое только без использования атрибута for</p>

<form>
  <label>Male<input type="radio" name="sex"></label>
  <br>
  <label>Female<input type="radio" name="sex"></label>
</form>

Результат данного примера в окне браузера:

Пример использования тега <label>

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

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