Bootstrap: Floating-Labels only works with "for" and "Input-ID" :-(

[rrarrarra]

https://getbootstrap.com/docs/4.0/examples/floating-labels/

First of all... providing "floating-labels" -> nice done!!!!

But i have a question:
Why is it implemented in that way, that it does only work correctly, if the "ID-attribute" for the input-field is the same as the "FOR-attribute" of the label?

Is there a way to make it work without the need for setting an ID?
I think it would be much simpler to make it work indirectly, having a <input> nested inside of an <label> like so:

<div class="form-label-group">
    <label>Email address
        <input class="form-control" placeholder="Email address">
    </label>
</div>

I am currently working on an project where i have many input-fields, multiple forms and i have to do some cloning and so on and it gets really stressful, because i have to think about setting unique IDs for all the fields :..(

[bkdotcom]

floating labels involves absolute positioning the label over the input... you can't do that if the input is a child of the label.
I suppose you could write some javascript that un-nests the input and assigns the id and for attributes. Or use some helper function on the back-end to pragmatically build your form-label-groups. at it's most simple, a function that accepts name and label.... or inputAttributes + label

also.. this will work (no id or for attribs), but of course the semantics are lost

<div class="form-label-group">
    <input type="password"  class="form-control" placeholder="Password" required>
    <label style="pointer-events:none;">Password</label>
</div>

(the trick is pointer-events:none on the label)

[rrarrarra]

https://codepen.io/anon/pen/KQYppq

Thanks, but that all sounds a bit like a "dirty-hack-solution" - which is what i do not want to do ;)
All i want is a nice and easy solution that i do not have to set any IDs.

Would it be a big problem, if the "floating-labels"-feature gets implemented that it works "automagically" without setting any IDs? So it could check if "input" and "label" is inside of "form-label-group", then "floating-labels"-feature works :-) ?

html <div class="form-label-group"> <input class="form-control" placeholder="aaa"> <label>does currently not work, but should work automagically</label> </div>

[bkdotcom]

not sure if you saw my edit, but

label:not([for]) {
  pointer-events:none;
}

does the trick

with the for attribute: clicking on the label focuses the associated input (which is behind the label).. with the input focused, the label gets moved out of the way...

without the for attribute: clicking on the label... doesn't actually get clicked... the click gets passed through to the input behind it... which focuses the input....

---

also: floating labels isn't a feature of bootstrap... it's a css task left to the user
an optional float-label class on the .form-label-group wrapper could potentially be a bootstrap feature

---

re "dirty-hack-solution" ... building labels/inputs that aren't properly linked due to lazyness is the greater crime and the root of the issue you're experiencing

[rrarrarra]

yes, wow, that works!
my first tests are working with your solution!
nice :-)

thanks, an have a nice friday night!