| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 5.0 + | 7.0 + | 1.0 + | 4.0 + | 1.2 + | 1.0 + | 1.0 + | 1.0 + |
Специфікація
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Опис
Тег <label> встановлює зв'язок між певною міткою, в якості якої зазвичай виступає текст, і елементом форми ( <input> , <select> , <textarea> ). Такий зв'язок необхідна, щоб змінювати значення елементів форми при натисканні курсором миші на текст. Крім того, за допомогою <label> можна встановлювати гарячі клавіші на клавіатурі і переходити на активний елемент подібно посиланнях.
Існує два способи зв'язування об'єкта і мітки. Перший полягає у використанні ідентифікатора id всередині елемента форми і надання його імені в якості атрибута for тега <label> . При другому способі елемент форми поміщається всередину контейнера <label> .
Синтаксис
<input id="ідентифікатор"> <label for="ідентифікатор"> Текст </label> <label> <input type="..."> Текст </label>
Атрибути
- accesskey
- Доступ до елементів форми за допомогою гарячих клавіш.
- for
- Ідентифікатор елемента, з яким варто встановити зв'язок.
Закриваючий тег
Обов'язковий.
Приклад
HTML5 IE Cr Op Sa Fx
<!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" id="check1"> <label for="check1"> Lorem </label> <Br> <input type="checkbox" id="check2"> <label for="check2"> Ipsum </label> <Br> <input type="checkbox" id="check3"> <label for="check3"> Dolor </label> <Br> <input type="checkbox" id="check4"> <label for="check4"> Sit amet </label> </p> </form> </body> </html>
Браузери
IE6 не дозволяє активувати поле форми при натисканні по тексту, коли поле з текстом знаходиться всередині тега <label> .
IE до версії 8.0 включно коректно працює з <label> тільки при наявності в ньому тексту. Якщо додати зображення ( <label> <img src="pic.jpg" alt=""> </label> ), то активувати поле форми клацанням по картинці можна.