How to create sub-labels for input elements using HTML
I am using windows to create a simple HTML form, and I cannot figure out how to create the sub-labels for the various inputs. The picture (link in comment below) shows what I am trying to produce. Is this a Safari only thing? The closest I came was using CSS display:block which allowed me to move the label on top of the input.
You can accomplish that by wrapping each group of label & input within e.g. div, like so:
<div class="form-line"> <div class="form-field"> <input class="form-field-input" id="input1" type="text" placeholder="Your value..." /> <label class="form-field-label" for="input1"> Text 1 </label> </div> <!-- other groups go here --> </div>
Here's the CodePen example