78

I am using Bootstrap, it's demo of horizontal form:

<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>

but I don't want create ID for each <input>, so

<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>

but display:block can't be inside display:inline, so I use CSS

.block {
  display: block;
}

it's working, but is it correct? because I heard that we should not put display:block element into display:inline element (label)

Steely Wing
  • 16,239
  • 8
  • 58
  • 54
  • 8
    If you used the [validator](http://validator.w3.org/) you would get the error **Element div not allowed as child of element label in this context**. – Vucko Sep 04 '13 at 09:04
  • Has any way to do this without setting `id` ? – Steely Wing Sep 04 '13 at 09:06
  • Its Wrong to use div inside label element – Love Trivedi Sep 04 '13 at 09:08
  • 1
    Since `label` markup exists primarily for accessibility, it should be used in a manner that is most widely supported by browsers. This means using the `for` and `id` attributes to specify the connection between a label and a control. – Jukka K. Korpela Sep 04 '13 at 09:29

1 Answers1

90

No, HTML does not allow a <label> to contain a <div>.

See the specification for the label element:

Content model: Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.

Where phrasing content links to:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

a abbr area (if it is a descendant of a map element) 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

neaumusic
  • 10,027
  • 9
  • 55
  • 83
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 6
    Then what is alternative to it? I really need specific divs to check radio button when they are clicked. – Kunok Dec 07 '15 at 16:53
  • 2
    JavaScript. Probably along the lines of `document.getElementById(this.querySelector("label").getAttribute("for")).checked`. – Quentin Dec 07 '15 at 16:55
  • 2
    By the way, is this legit? ? – Kunok Dec 07 '15 at 16:56
  • 1
    @Kunok if you read the tag list above (in the quoted text) you can see `img` listed. So **yes** images are allowed into labels. – Kamafeather Mar 07 '16 at 15:25
  • @Kamafeather IE disagrees – Kunok Mar 08 '16 at 04:11
  • @Kunok — I've never encountered a problem with IE not supporting images in labels. – Quentin Mar 08 '16 at 08:21
  • @Quentin http://stackoverflow.com/questions/20198137/image-label-for-input-in-a-form-not-clickable-in-ie11 – chiliNUT Sep 30 '16 at 21:08
  • 6
    Does anyone know whether it's valid to have a `span` as child content with CSS `display: block` or conversely a `div` with `display: inline`? – vanthome Feb 20 '18 at 15:06
  • 5
    @vanthome — If you have a new question, you can click the [Ask Question](https://stackoverflow.com/questions/ask) link at the top of every page … and then it can be [closed as a duplicate](https://stackoverflow.com/questions/18930438/putting-a-block-level-span-element-inside-a-p-element). – Quentin Feb 20 '18 at 15:36