Правильно ли блок <div> внутри <label>?

Я использую Bootstrap, это демо горизонтальной формы:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1">
    </div>
  </div>
</form>

но я не хочу создавать идентификатор для каждого <input>, поэтому

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="block">
      <span class="col-lg-2 control-label">Email</span>
      <div class="col-lg-10">
        <input type="email" class="form-control">
      </div>
    </label>
  </div>
</form>

но display:block не может находиться внутри display:inline, поэтому я использую CSS

.block {
  display: block;
}

он работает, но правильно ли это? потому что я слышал, что мы не должны помещать элемент display:block в элемент display:inline (label)

Ответы

Ответ 1

Нет, HTML не позволяет <label> содержать <div>.

Смотрите спецификацию для элемента label:

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

Где формулировка контента ссылается на:

Содержимое фразы - это текст документа, а также элементы, которые размечают этот текст на уровне внутри параграфа. Запускает формулировку абзацев содержания.

a abbr area (если это потомок элемента карты) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr text