How to Create a Responsive Inline Form with HTML and CSS

Introduction

An inline form places input fields and buttons horizontally in a single line. Creating a responsive inline form ensures that the form adjusts to different screen sizes, making it suitable for both desktop and mobile users. With CSS, we can make this form adapt to various screen sizes, stacking the form elements vertically on smaller screens.

In this tutorial, you will learn how to create a responsive inline form using HTML and CSS.

Problem Statement

Create a form with:

Input fields and buttons aligned horizontally (inline).
Responsive behavior so that the form stacks vertically on smaller screens.

Example:

Input: The user fills out the form on desktop and mobile devices.
Output: On larger screens, the form is inline; on smaller screens, it becomes vertical for better readability.

Solution Steps

Use HTML for Form Structure: Define the form with input fields and buttons in HTML.
Style the Form with CSS: Use CSS for inline alignment and responsive behavior.
Ensure Responsiveness with Media Queries: Add media queries to make the form stack vertically on smaller screens.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Inline Form</title>
    <style>
        /* Step 1: Style the form container */
        .form-inline {
            display: flex; /* Flexbox for inline elements */
            justify-content: space-between;
            align-items: center;
            max-width: 800px;
            margin: 50px auto;
        }

        /* Step 2: Style the form elements */
        .form-inline input[type="text"],
        .form-inline input[type="email"] {
            width: calc(35% - 10px); /* Width calculation with spacing */
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1rem;
            box-sizing: border-box;
        }

        .form-inline button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .form-inline button:hover {
            background-color: #2980b9;
        }

        /* Step 3: Responsive design for small screens */
        @media (max-width: 600px) {
            .form-inline {
                flex-direction: column; /* Stack elements vertically */
                align-items: stretch;
            }

            .form-inline input[type="text"],
            .form-inline input[type="email"],
            .form-inline button {
                width: 100%; /* Full width for each element */
                margin: 5px 0; /* Space between elements */
            }
        }
    </style>
</head>
<body>

    <div class="form-inline">
        <input type="text" placeholder="Enter your name">
        <input type="email" placeholder="Enter your email">
        <button type="submit">Submit</button>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Style the Form Container

The .form-inline class uses display: flex to align the form elements inline. The justify-content: space-between property ensures that the form fields and button are spaced evenly.

.form-inline {
    display: flex; /* Flexbox for inline layout */
    justify-content: space-between;
    align-items: center; /* Vertically align items */
    max-width: 800px; /* Limit the form width */
    margin: 50px auto; /* Center the form on the page */
}

display: flex: Creates a flexbox container for inline form elements.
max-width: 800px: Limits the form's maximum width to 800px for larger screens.

Step 2: Style the Form Elements

The input fields (input[type="text"] and input[type="email"]) are given specific widths to align properly within the flex container. The button is styled with padding, a background color, and a hover effect.

.form-inline input[type="text"],
.form-inline input[type="email"] {
    width: calc(35% - 10px); /* Calculate width with margin included */
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem;
    box-sizing: border-box; /* Include padding and borders in width */
}

.form-inline button {
    padding: 10px 20px; /* Padding for button */
    background-color: #3498db; /* Blue background */
    color: white; /* White text */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1.1rem; /* Font size for button */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.form-inline button:hover {
    background-color: #2980b9; /* Darker blue on hover */
}

width: calc(35% - 10px): Each input field takes up 35% of the container's width, minus 10px for margin spacing.
box-sizing: border-box: Ensures the input fields include padding and borders in the total width calculation.

Step 3: Responsive Design for Small Screens

For screens with a width of 600px or less, the .form-inline class changes the layout to a vertical stack using flex-direction: column.

@media (max-width: 600px) {
    .form-inline {
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch; /* Stretch the items to fill the container width */
    }

    .form-inline input[type="text"],
    .form-inline input[type="email"],
    .form-inline button {
        width: 100%; /* Full width for all elements */
        margin: 5px 0; /* Add space between the stacked elements */
    }
}

flex-direction: column: Stacks the form elements vertically on small screens.
width: 100%: Ensures the form fields and button take up the full width of the container on small screens.

Customization

Add More Form Fields

To add more fields like phone number or dropdowns, simply add more input elements in the same pattern:

<input type="tel" placeholder="Enter your phone number">

Validation

You can add validation to the input fields using HTML5 attributes:

<input type="email" placeholder="Enter your email" required>

required: Ensures the field must be filled before the form can be submitted.

Adjust Layout for Larger Screens

If you want to add more flexibility for larger screens, you can modify the max-width and justify-content values:

.form-inline {
    max-width: 1000px;
    justify-content: flex-start;
}

Add Icons Inside Input Fields

You can include icons inside the input fields using Font Awesome or another icon library:

<input type="text" placeholder="Enter your name">
<i class="fas fa-user"></i> <!-- Font Awesome icon -->

Form Submission

You can enhance form submission with JavaScript or server-side processing:

<form action="/submit" method="POST">
    <input type="text" placeholder="Enter your name">
    <input type="email" placeholder="Enter your email">
    <button type="submit">Submit</button>
</form>

Conclusion

Creating a responsive inline form with HTML and CSS is straightforward and ensures a user-friendly experience across devices. The use of flexbox enables you to align form elements horizontally on larger screens while media queries allow the form to stack vertically on smaller screens. This approach makes the form both functional and adaptable to any device.

Java Guides

Search This Blog