Member Avatar for dsmush

Hi

I'm trying to get the labels of my form to appear above their input boxes and for the input boxes themselves to be side by side (basically a horizontal login form)

I've used the label tag in my form after doing some research which looks like:

<form> 
<label for="email">Email</label> <br /> 
<input type="text" name="email" /> 
<label for="password">Password</label> <br /> 
<input type="text" name="password" /> 
</form>

In my CSS I have a label property defined as:

label { 
display:inline-block; 
}

But the outcome is this:
http://i56.tinypic.com/10r0c1s.png

Could anyone please shed some light on my problem?

Thank you

  • 1 Contributor
  • 1 Reply
  • 13K Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by dsmush

Dani AI

Generated

A clean way to get labels above inputs while keeping each pair side by side is to wrap each pair in a container and use CSS for layout (no br tags). Also be sure your label for attribute matches the input id so clicking the label focuses the input and screen readers announce it properly.

<form class="form-row">
  <div class="group">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" />
  </div>

  <div class="group">
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" />
  </div>
</form>
.form-row {
  display: flex;
  gap: 1rem;        /* space between columns */
  flex-wrap: wrap;  /* stack on small screens */
}

.group {
  display: flex;
  flex-direction: column; /* label above input */
  min-width: 220px;       /* keeps fields readable before wrapping */
}

Notes and tips:

  • Using inline-block for columns can introduce unexpected 4px whitespace and baseline misalignment; flex avoids that. If you must use inline-block, remove whitespace between elements or set font-size: 0 on the parent and restore it on children.
  • Use appropriate types (email, password) and autocomplete for better UX and mobile keyboards.
  • Keep layout concerns in CSS, not HTML. This improves accessibility and maintainability.

For details on labeling controls, see MDN’s label element and the WCAG technique H44: Using label elements. Input types are documented at MDN’s HTML input types.

Member Avatar for dsmush

Solved

HTML

<form>
<div class="group">
<label for="email">Email</label> <br />
<input type="text" name="email" />
</div>

<div class="group">
<label for="password">Password</label> <br />
<input type="text" name="password" />
</div>
</form>

CSS

.group{
display: inline-block;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.