Two Input Fields Inside One Label

Two input fields inside one label

No, it's not correct (since, as you note, a label is associated with exactly one form input).

To label a group of inputs that belong together, use a <fieldset> and a <legend>:

<fieldset>
  <legend>Range</legend>
  <label for="min">Min</label>
  <input id="min" name="min" />

  <label for="max">Max</label>
  <input id="max" name="max" />
</fieldset>

Single label for two inputs

In this case I think the best markup would be to wrap the inputs in a fieldset, use a legend for "Dates", use labels for both inputs and hide the labels:

HTML

<fieldset>
<legend>Dates</legend>
<label for="startdate">Start Date</label>
<input type="text" name="startdate" id="startdate" placeholder="Start Date">
<label for="enddate">End Date</label>
<input type="text" name="enddate" id="enddate" placeholder="End Date">
</fieldset>

CSS

fieldset {
  border: none;
}
label {
  margin-left: -999em;
}
input {
  display: block;
}

Fiddle here

Also see: WCAG 2, H71: Providing a description for groups of form controls using fieldset and legend elements

One Html Label with Two Form Inputs

There isn’t a way to associate a label with more than one input field, because a label is, by definition, a label for a single field. The reasons for using a label element are based on such a simple correspondence, so there’s no point in using it for two fields simultaneously.

If you are required to have two input fields, on one hand, and to comply with WCAG 2.0 (which makes label markup mandatory for input boxes, H44) on the other, then you need to have separate labels for each of the boxes.

In practice, it is better to have a single field for month/year input, and then you won’t have this problem. (I’m sure most users will find it more natural to type “10/12” than to type “10”, click on a next input box – or hit TAB, but most users don’t – and then type “12”. And any attempt at auto-tabbing from one field to another will cause confusion.)

Vertically align two columns input fields one with labels and other without label

First of all, I don't know how you can make 5 columns in a row with col-sm-3. That will only make 4 columns in a row and the fifth column is pushed to a new row.

If your 4th and 5th column both have 4 inputs, but only 5th column inputs don't have labels. Why not combine the 4th and 5th column into one column and use rows for their inputs?

<div class="container">
  <div class="row">
    <div class="col-sm-2 offset-sm-1">
      <div class="form-group">
        <label>Field</label>
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="col-sm-2">
      <div class="form-group">
        <label>Field</label>
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="col-sm-2">
      <div class="form-group">
        <label>Field</label>
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label>Field 1</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 1 without label" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Field 2</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 2 without label" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Field 2</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 3 without label" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Field 2</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 4 without label" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Fiddle: https://jsfiddle.net/aq9Laaew/91237/

Side by side divs with label in input fields

Not sure if this is what you're asking, but if you want the labels and inputs to both turn red, you can either wrap your inputs with the <label> tags.

Or alternatively wrap both the <label> and <input /> tags with divs, and apply your styling to the parent <div>.

e.g.

<label>prprpr
    <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="m_field" maxlength="3" id="carb" name"pro" placeholder="150g" form="macro" onchange="calculate()" required />
</label>

Fiddle here: https://jsfiddle.net/v3gp20y5/

---

Related Topics