How to Align input forms in HTML?

Last Updated : 16 Oct, 2024

In HTML, input forms are typically displayed as block elements, taking up the full width of their container. While this is often desirable, there are times when you might want to align input forms horizontally or vertically within a container for aesthetic or layout purposes.

These are the following approaches to align input forms in HTML:

Table of Content

Using Block and Inline-Block Layouts
Align Using Flexbox
Align Using Grid Layout

Using Block and Inline-Block Layouts

To align input forms using simple CSS with block and inline-block layouts, start by wrapping your input fields and labels in a container. Set the labels to display: block, which ensures they take up the full width, stacking the input fields below them. This layout is straightforward and works well for vertical forms.

For a horizontal alignment, you can set the labels to display: inline-block, allowing them to sit next to their corresponding input fields. Ensure that both labels and inputs have consistent widths or use margin to create space between them. Adjust padding for better readability and user experience.

Example: Below is an example of aligning input forms in HTML.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Align Input Forms</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }

        .form-container {
            width: 400px;
            margin: 50px auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input[type="submit"]:active {
            background-color: #004494;
        }
    </style>
</head>

<body>
    <div class="form-container">
        <form>
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required>

            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>

            <label for="password">Password</label>
            <input type="password" id="password" name="password" required>

            <input type="submit" value="Submit">
        </form>
    </div>
</body>

</html>

Output:

Align Using Flexbox

Flexbox is a powerful CSS layout model that provides a flexible and efficient way to arrange elements on a page. It's particularly useful for creating responsive and dynamic layouts.

To align input forms in HTML using Flexbox, wrap your input fields and labels in a <div> container and set its display to flex. Choose flex-direction to stack the elements vertically or horizontally, depending on your design. Use separate <div> elements for each label-input pair to maintain proper alignment and spacing. Adjust properties like align-items and justify-content to fine-tune the layout.

Flex Container: The parent element that contains the flex items.
Flex Items: The child elements within the flex container.
Flex Axis: The main axis along which the flex items are arranged.
Cross Axis: The axis perpendicular to the flex axis.

Example: Below is an example to align input forms in HTML using flexbox:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Align using Flexbox</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }

        form {
            background-color: white;
            padding: 20px;
            max-width: 500px;
            margin: 50px auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        label {
            width: 100px;
            font-size: 16px;
            color: #333;
        }

        input[type="text"],
        input[type="email"] {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input[type="submit"]:active {
            background-color: #004494;
        }
    </style>
</head>

<body>
    <form>
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>

        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>

        <div class="form-group">
            <label for="phone">Phone:</label>
            <input type="text" id="phone" name="phone" required>
        </div>

        <input type="submit" value="Submit">
    </form>
</body>

</html>

Output:

Align Using Grid Layout

Grid Layout is another powerful CSS layout model that provides a grid-based structure for arranging elements. It's particularly useful for creating complex and responsive layouts.

To align input forms in HTML using CSS Grid Layout, start by wrapping your input fields and labels in a <div> container. Set the container's display to grid and define the columns with grid-template-columns to arrange elements side by side. Use <label> elements to improve accessibility and style them for alignment. Incorporate padding and margins for better spacing, ensuring the form is visually appealing.

Example: Below is an example to align using Grid Layout.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
  <title>Align Form Inputs with Grid</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      padding: 20px;
    }

    .form-container {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 15px 10px;
      max-width: 400px;
      margin: 50px auto;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    label {
      text-align: right;
      padding-right: 10px;
      font-size: 14px;
      color: #333;
    }

    input[type="text"], input[type="email"], input[type="password"] {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }

    input[type="submit"] {
      grid-column: 1 / span 2;
      padding: 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    input[type="submit"]:hover {
      background-color: #0056b3;
    }

    input[type="submit"]:active {
      background-color: #004494;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Password</label>
    <input type="password" id="password" name="password" required>

    <input type="submit" value="Submit">
  </div>
</body>
</html>