Labels above each inline form field for improved visual clarity

Question

Labels above each inline form field for improved visual clarity

It's frustrating, but I'm stumped and need some help.

I need to arrange 2 form fields inline, with the label above each field. Here is how it should look like in ascii art:

Label 1      Label 2
---------    ---------
|       |    |       |
---------    ---------

Seems simple, right?

<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 code will produce:

        ---------           ---------
Label 1 |       |   Label 2 |       |
        ---------           ---------

To position the labels above the boxes, I added 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 />

However, after making this change, the labels are positioned correctly but the form fields are no longer inline:

Label 1  
---------
|       |
---------

Label 2  
---------
|       |
---------

I've searched everywhere but couldn't find a solution to make the fields display inline. Can someone offer some guidance?

html css forms

Answer 1

Answer №1

In order to achieve the desired layout, I suggest wrapping each input within a span with display:inline-block property, as demonstrated below:

<span style="display:inline-block">
    <label for=foo style="block:display">Label 1</label>
    <input type=text name=foo id=foo />
</span>

<span style="display:inline-block">
    <label for=bar  style="block:display">Label 2</label>
    <input type=text name=bar id=bar />
</span>

Answer 2

In order to achieve the desired layout, I suggest wrapping each input within a span with display:inline-block property, as demonstrated below:

<span style="display:inline-block">
    <label for=foo style="block:display">Label 1</label>
    <input type=text name=foo id=foo />
</span>

<span style="display:inline-block">
    <label for=bar  style="block:display">Label 2</label>
    <input type=text name=bar id=bar />
</span>

Answer 3

Answer №2

UPDATE:

The original solution presented here has become outdated over the years since 2010. It was once common practice to place inputs within labels to avoid adding extra DOM elements for styling purposes.

However, as advancements in web development and accessibility compliance (a11y) have progressed, it is now widely agreed (as noted by @CrandellWS in the comments below) that @Raugturi's approach is more suitable today.

OLD METHOD:

An older technique involved enclosing inputs within labels and then using CSS to style them accordingly:

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>

Answer 4

UPDATE:

The original solution presented here has become outdated over the years since 2010. It was once common practice to place inputs within labels to avoid adding extra DOM elements for styling purposes.

However, as advancements in web development and accessibility compliance (a11y) have progressed, it is now widely agreed (as noted by @CrandellWS in the comments below) that @Raugturi's approach is more suitable today.

OLD METHOD:

An older technique involved enclosing inputs within labels and then using CSS to style them accordingly:

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>

Labels above each inline form field for improved visual clarity

Answer №1

Answer №2

Similar questions

Ensure that the input remains below ten

Could you show me how the easyrtcid is generated in the demonstration of audio-only chat? I would appreciate a step-by

Tips for organizing unordered list items into columns, with the text aligned at the top

Generating a menu in one-hour intervals

Stop the span within the paragraph from breaking onto a new line

What is the best way to customize bootstrap styles?

Creating a versatile button that adjusts seamlessly across different screen sizes, from smartphones to larger

Access the Django render parameter within a React JS component

In mobile view, the grid text should be positioned on top of the input field

Encountering an unspecified variable in Sass

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Transitioning from Tailored CSS to Bootstrap

Deliver JavaScript and HTML through an HTTP response using Node.js

The method item.appendChild does not exist as a function

Trigger the phone to vibrate once the animation has completed. This feature will only activate upon clicking the button

Trouble with activating Bootstrap panel

Exploring jQuery Animation Effects: Enhancing Your Web Experience with Zoom In and Zoom Out

Steps for adding an onclick function to a collection of div elements

Strange circle border appearance in Android / Chrome device

Deactivate event handling for viewport widths below a specified threshold