I can't believe I'm having to ask this, but I'm at my wit's end.
I'm trying to display 2 form fields inline, but with the label for each field on the top. In ascii art:
Label 1 Label 2
--------- ---------
| | | |
--------- ---------
Should be pretty simple.
<label for=foo>Label 1</label>
<input type=text name=foo id=foo />
<label for=bar>Label 2</label>
<input type=text name=bar id=bar />
This will get me:
--------- ---------
Label 1 | | Label 2 | |
--------- ---------
To get the labels on top of the boxes, I add display=block:
<label for=foo style="display:block">Label 1</label>
<input type=text name=foo id=foo />
<label for=bar style="display:block">Label 2</label>
<input type=text name=bar id=bar />
After I do this, the labels are where I want them, but the form fields are no longer inline:
Label 1
---------
| |
---------
Label 2
---------
| |
---------
I've been unable to find a way to wrap my html so the fields display inline. Can anyone help?
<input type="text" id="fname" name="firstname" placeholder="Your name..">
There are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element.
There are two ways to pair a label and an input. One is by wrapping the input in a label (implicit), and the other is by adding a for attribute to the label and an id to the input (explicit). Think of an implicit label as hugging an input, and an explicit label as standing next to an input and holding its hand.
To display the form fields in a single line, navigate to Settings » General in your form builder and add the CSS class inline-fields to the Form CSS Class field. Then, to reduce the height of your form, open up each field's Advanced section and select the Hide Label option.
I would put each input inside an span with display:inline-block
, like this:
<span style="display:inline-block">
<label for=foo style="display:block">Label 1</label>
<input type=text name=foo id=foo />
</span>
<span style="display:inline-block">
<label for=bar style="display:block">Label 2</label>
<input type=text name=bar id=bar />
</span>
You could enclose your inputs in with the labels and then use CSS:
label{display:inline-block;}
input{display:block;}
<label>Label 1<input type=text name=foo id=foo /></label>
<label>Label 2<input type=text name=bar id=bar /></label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With