How to align input forms in HTML

html

responsive-design

accessibility

css-flexbox

byAnton Shumikhin·Aug 10, 2024

Achieving crisp and clean HTML input form alignment is a breeze with CSS. Mainly, the powerhouses CSS Flexbox for lining up elements in a row and CSS Grid for complex structures.

Here's a quick Flexbox example:

<style>
  .flex-row {
    display: flex;                  /* Powers, assemble! 🦸 */
    justify-content: flex-start;    /* Horizontally align items start, like type on a page */
    align-items: center;            /* Vertical alignment sorted! 🚀 */
  }
</style>
<div class="flex-row">
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
  <button>Submit</button>
</div>

And your compact Grid template:

<style>
  .grid-row {
    display: grid;                       /* Welcome to our Grid Party! 🥳 */
    grid-template-columns: repeat(3, 1fr); /* Host three columns, everyone's invited! */
    gap: 10px;                          /* Social distancing rules apply */
  }
</style>
<div class="grid-row">
  <input type="email" placeholder="Email">
  <input type="password" placeholder="Password">
  <button>Login</button>
</div>

Feel free to fine-tune for a perfect fit.

CSS `display: flex` for labels and inputs

Including labels and inputs in your form? Let's keep them dressed up tidy and nice. Style <label>s and <input>s to align. Either stand them in a tidy row or seat them comfortably side by side:

<style>
  .form-control {
    display: flex;                      /* Flex family helping out again 🤝 */
    flex-direction: column;             /* Stack'em up nice and neat */
    margin-bottom: 15px;                /* Because personal space matters */
  }
  .form-label {
    margin-bottom: 5px;                 /* Tiny breather before meeting an input */
  }
  .form-label-inline {
    display: flex;                      /* Flex to the rescue, again! 🦸‍♂️ */
    align-items: center;                /* Perfect vertical alignment, every time */
    justify-content: space-between;     /* And they get their personal space */
    margin-bottom: 5px;                 /* Another little breather */
  }
</style>
<form>
  <!-- Labels casually standing above inputs -->
  <div class="form-control">
    <label class="form-label">Email</label>
    <input type="email">
  </div>
  <!-- Or Labels lounging next to inputs -->
  <div class="form-control form-label-inline">
    <label>Password</label>
    <input type="password">
  </div>
</form>

Media queries for responsive alignment

To go the extra mile for mobile users, CSS offers another ace - the media queries. They let you rearrange the form elements based on screen dimensions, fulfilling their mobile dreams:

<style>
  @media (max-width: 600px) {
    .form-label-inline {
      flex-direction: column;   /* One after the other, like climbing a ladder */
    }
  }
</style>

In the immortal words of smartphone screens: "When I'm 600px or less, labels and inputs find their comfort, stacked on top of each other".

CSS tables for legacy browser support

If you have to consider legacy browsers, CSS tables can come in handy. Although less shiny than Flexbox and Grid, they do the job:

.form-table { display: table; width: 100%; }
.form-row { display: table-row; }
.form-cell { display: table-cell; }

Just remember, these are CSS tables, not HTML <table> elements. We're keeping things classy!

While making forms look sharp, remember to cater for accessibility. Use the for attribute to link labels with the corresponding input fields, enhancing navigation for screen reader users:

<label for="username">Username:</label>
<input id="username" type="text" name="username">

explain-codes / Html / How to align input forms in HTML

Linked

Align labels in form next to input



How to align checkboxes and their labels consistently cross-browsers



How to vertically center text in a <span>?



Extra space under textarea, differs along browsers



Keep the middle item centered when side items have different widths



Form inline inside a form horizontal in twitter bootstrap?



How to center an element horizontally and vertically



CSS for labels and inputs Media queries for responsive alignment CSS tables for legacy browser support A11Y and usability