Inline Form Layout Template

Save vertical space with this compact inline form, perfect for headers and toolbars.

This layout uses CSS Flexbox to align multiple form elements horizontally on a single line, ideal for simple login, search, or subscription inputs.

Screenshot of an inline login form with username, password, and login button on a single line.

Get Source Code → Preview →

About this Inline Form Layout

An inline form is the go-to solution when you need a form to be as compact as possible. Unlike traditional vertical forms, all elements are arranged horizontally. This template achieves the layout using display: flex; on the parent form element. This makes it easy to align all child elements (labels, inputs, buttons) neatly next to each other.

To ensure accessibility for a form that doesn't have visible labels, this template uses the sr-only (screen-reader only) class to visually hide the label elements. The placeholder attribute on each input provides the visual cue for sighted users, while the hidden labels provide essential context for assistive technologies.

Features

Compact Horizontal Layout: Perfect for areas with limited vertical space, like page headers.
Modern Flexbox Implementation: Uses display: flex and gap for clean alignment and spacing.
Accessible Design: Incorporates visually-hidden labels to ensure screen readers can properly interpret the form fields.
Responsive Ready: Includes an example of how the form can wrap or stack on smaller screens if needed.

Ideal Use Cases

Simple login forms in a website's top navigation bar.
Search bars.
Quick-subscribe newsletter forms in a compact area.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the inline form template:

/* The core layout style for the form */
.inline-form {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap onto the next line on small screens */
    align-items: flex-end; /* Aligns items along the bottom, great for varying label heights */
    gap: 15px; /* Creates space between form elements */
    justify-content: center;
}
.inline-form .form-group {
    display: flex;
    flex-direction: column; /* Stacks label on top of input */
}
.inline-form .form-group label {
    margin-bottom: 5px;
    font-size: 0.9rem;
    font-weight: 500;
}
/* Style for visually hidden labels used in the second example */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.inline-form input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}
.inline-form .btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
</style>

<div class="inline-form-container">
    <p><strong>Example with visible labels:</strong></p>
    <form class="inline-form" action="#" method="post">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit" class="btn">Login</button>
    </form>
</div>

<br>

<div class="inline-form-container">
     <p><strong>Example with placeholder text (more compact):</strong></p>
    <form class="inline-form" action="#" method="post">
        <div class="form-group">
            <label for="inline-email" class="sr-only">Email</label>
            <input type="email" id="inline-email" name="email" placeholder="Your Email" required>
        </div>
         <div class="form-group">
            <label for="inline-name" class="sr-only">Name</label>
            <input type="text" id="inline-name" name="name" placeholder="Your Name">
        </div>
        <button type="submit" class="btn">Subscribe</button>
    </form>
</div>

View Output