Почему не работает label вне формы?

Question

[dasda123]

Всех приветствую, мне необходимо по работе разработать HTML страницу.
У меня 3 радиокнопки, если я нажимаю кнопку 1, то у меня внутри формы отображается, что был выбран вариант 1, тоже самое работает, если я выберу кнопку 2, но если я нажму на кнопку 3, то у меня информация не отобразиться, что я был выбран вариант 3, как сделать, чтобы отображалось, что я выбрал 3 вариант именно за пределами формы, а не в форме??

<form
	<fieldset>
 	<legend>Выберите вариант</legend>	
       <input type = "radio" name = "query" id="r-1" value = "query_1"  onclick="foo(this)">Вариант 1
        <br>
        <input type = "radio" name = "query" id="r-2" value = "query_2" onclick="foo(this)">Вариант 2
        <br>
        <input type = "radio" name = "query" id="r-3" value = "query_3" onclick="foo(this)">Вариант 3
<label for="r-1" class="label l-1">Вариант был выбран 1</label>
<label for="r-2" class="label l-2">Вариант был выбран 2</label>
         </fieldset>
         </form>
         <label for="r-3" class="label l-3">Вариант был выбран 3</label>

Comments

[dollar]

Тег label вообще для других целей нужен.

Answer 1

[ReActor Дмитрий Вершанский]

Потому, что элеметны формы - это определенная группа, которая должна физически находится внутри тега form. Поставьте 3-тий label аналогично двум предыдущим, а для выноса отображения результат визуально сделайте следующее в css:

.label.l-3 {
display: inline-block;
position: absolute;
top: 75px;
right: 0px;
left: 0px:
}

Для точечного позиционирования подберите свои значения top, right или top, left конкретно в вашем случае. Таким образом вы извлечете этот элемент из нормального потока и расположите его где вашей душе вздумается!)

Answer 2

[Андрей]

Всё работает
Единственная ошибка которая есть - в первой строчке не закрыт тег (но вряд ли в этом проблема)
Напишите конкретнее что именно не работает.

Других не слушайте, они несут глупости про спецификации. Спецификация (1, 2) не запрещает связывать с формой и при этом помещать label куда угодно на странице. Они даже соответствующий атрибут (form) у label убрали из спецификации за ненадобностью.

Labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they're associated.

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute’s value must be the ID of a labelable element in the same Document as the label element.

Answer 3

[Дмитрий Шмаков]

Тег label устанавливает связь с элементами формы, как он обратится к форме, если он не внутри неё? По спецификации этот тег работает только внутри формы.

Comments

[Андрей]

По спецификации этот тег работает где угодно.