Bulma: Labels that wrap their input fields

[Merott]

Tag your issue accordingly:

• is it about Bulma or about the Docs? Bulma
• is it a bug/feature/question or do you need help? A bug maybe, but more of a design limitation.

Checklist

• [x] This is about the Bulma CSS framework
• [x] I'm using Bulma 0.2.3
• [x] I am sure this issue is not a duplicate
  

  Description

Currently one can apply styles to form label elements by applying the label class as such:

<label class="label">Name</label>
<p class="control">
  <input class="input" type="text" placeholder="Text input">
</p>

Problem is, a label element should have a for attribute that points to some input's id, so it has to be written like this:

<label for="name" class="label">Name</label>
<p class="control">
  <input id="name" class="input" type="text" placeholder="Text input">
</p>

But also, it's common practice to wrap input elements inside of the label element, so that we don't have to maintain some id attribute, and we'd also avoid the potential of having duplicate IDs on a page:

<label class="label">
  Name
  <p class="control">
    <input class="input" type="text" placeholder="Text input">
  </p>
</label>

Currently this is how the label class is styled:

.label {
    color: #363636;
    display: block;
    font-weight: bold;
}

.label:not(:last-child) {
    margin-bottom: 5px;
}

The problem is, the margin-bottom won't work with the above HTML, and the label _Name_ won't be spaced. We could move the label class from the actual label element to a span within, but then the :not(:last-child) pseudo class won't prevent the margin from being applied to the last label element.

<label>
  <span class="label">Name</span>
  <p class="control">
    <input class="input" type="text" placeholder="Text input">
  </p>
</label>

---

Sorry for the long post, but here is my proposed solution, which as far as I see, won't break existing use cases but also covers for the above:

.label {
    color: #363636;
    display: block;
    font-weight: bold;
}

/* exactly same as before, but added :not(label) parent condition */
:not(label) > .label:not(:last-child) {
    margin-bottom: 5px;
}

/* could be combined with the above selector, but it's separate for clarity */
label:not(:last-child) > .label {
    margin-bottom: 5px;
}

Let me know your thoughts, and I'd also be happy to make a PR for it.

[thisconnect]

Shouldn't the control wrap the label and the input element? Also why does it use <p>?

<div class="control">
  <label class="label">
    Name
    <input class="input" type="text" placeholder="Text input">
  </label>
</div>

.control .label {
    position: relative;
}

.control.has-icon-right .label .fa {
    display: inline-block;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    width: 24px;
    color: #dbdbdb;
    pointer-events: none;
    position: absolute;
    bottom: 3px;
    top: auto;
    right: 4px;
}

[Merott]

I took the examples straight from the documentation:
http://bulma.io/documentation/elements/form/

Interestingly though, in the examples, labels for radio and checkbox inputs are put inside the .control container, unlike the rest of the input types, so I think there is a consistency problem as well.

Regarding the of the p tag, I personally wouldn't use them for labels, but I think think it's irrelevant as far as Bulma is concerned - the library only uses class selectors.

[jgthms]

You can wrap checkboxes and radio buttons in labels. But the .label class is just for styling purposes.

[kevin-coyle]

The <p> tag is a little strange in the docs. A <p> has semantic meaning and I'm not sure it belongs there?