Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inline form fields with labels placed on top

Tags:

html

css

forms

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?

like image 808
rcourtna Avatar asked Jun 14 '10 23:06

rcourtna


People also ask

How do you put labels on top of input?

<input type="text" id="fname" name="firstname" placeholder="Your name..">

Are labels inline?

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.

How do you label input fields?

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.

How do I create an inline form field?

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.


2 Answers

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>
like image 80
Raugturi Avatar answered Oct 28 '22 01:10

Raugturi


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>
like image 21
edl Avatar answered Oct 28 '22 01:10

edl