Bootstrap 5 Framework

Form Basics

13 min Lesson 18 of 40

Introduction to Bootstrap Forms

Forms are essential for collecting user input. Bootstrap 5 provides comprehensive form styling with a focus on accessibility, consistency, and ease of use. The framework offers various form controls, layouts, and customization options.

Note: Bootstrap 5 forms use updated form controls with improved styling and better accessibility features compared to previous versions.

Form Controls

Bootstrap styles all native form controls with the form-control class:

<!-- Text input -->
<div class="mb-3">
    <label for="exampleInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInput1" placeholder="name@example.com">
</div>

<!-- Textarea -->
<div class="mb-3">
    <label for="exampleTextarea1" class="form-label">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea1" rows="3"></textarea>
</div>

<!-- Select dropdown -->
<div class="mb-3">
    <label for="exampleSelect1" class="form-label">Example select</label>
    <select class="form-select" id="exampleSelect1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

<!-- Multiple select -->
<div class="mb-3">
    <label for="exampleSelect2" class="form-label">Multiple select</label>
    <select class="form-select" id="exampleSelect2" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

<!-- File input -->
<div class="mb-3">
    <label for="formFile" class="form-label">Default file input</label>
    <input class="form-control" type="file" id="formFile">
</div>
                

Tip: Always use form-label for labels and form-control for inputs to ensure consistent styling and proper accessibility.

Form Sizing

Control form element sizes with sizing classes:

<!-- Large input -->
<input class="form-control form-control-lg" type="text" placeholder="Large input">

<!-- Default input -->
<input class="form-control" type="text" placeholder="Default input">

<!-- Small input -->
<input class="form-control form-control-sm" type="text" placeholder="Small input">

<!-- Large select -->
<select class="form-select form-select-lg">
    <option>Large select</option>
</select>

<!-- Small select -->
<select class="form-select form-select-sm">
    <option>Small select</option>
</select>
                

Form Layouts

Vertical Forms (Default)

Forms are vertical by default with stacked labels and controls:

<form>
    <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email">
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
                

Horizontal Forms

Create horizontal forms using grid classes:

<form>
    <div class="row mb-3">
        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3">
        </div>
    </div>
    <div class="row mb-3">
        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>
                

Inline Forms

Create inline forms using flex utilities:

<form class="row row-cols-lg-auto g-3 align-items-center">
    <div class="col-12">
        <label class="visually-hidden" for="inlineFormInput">Name</label>
        <input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroup">Username</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
        </div>
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>
                

Bootstrap 5 Change: Inline forms now use flex utilities and grid classes instead of form-inline class.

Input Groups

Extend form controls by adding text, buttons, or button groups on either side:

<!-- Text addon before -->
<div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username">
</div>

<!-- Text addon after -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username">
    <span class="input-group-text">@example.com</span>
</div>

<!-- Text addon both sides -->
<div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control">
    <span class="input-group-text">.00</span>
</div>

<!-- Button addon -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search...">
    <button class="btn btn-outline-secondary" type="button">Search</button>
</div>

<!-- Multiple inputs -->
<div class="input-group mb-3">
    <span class="input-group-text">First and last name</span>
    <input type="text" class="form-control" placeholder="First name">
    <input type="text" class="form-control" placeholder="Last name">
</div>
                

Form Text (Help Text)

Provide helpful information below form controls:

<div class="mb-3">
    <label for="inputPassword5" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword5" aria-describedby="passwordHelpBlock">
    <div id="passwordHelpBlock" class="form-text">
        Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
    </div>
</div>

<!-- Inline form text -->
<form class="row g-3 align-items-center">
    <div class="col-auto">
        <label for="inputPassword6" class="col-form-label">Password</label>
    </div>
    <div class="col-auto">
        <input type="password" class="form-control" id="inputPassword6" aria-describedby="passwordHelpInline">
    </div>
    <div class="col-auto">
        <span id="passwordHelpInline" class="form-text">
            Must be 8-20 characters long.
        </span>
    </div>
</form>
                

Tip: Use aria-describedby to associate help text with form controls for better accessibility.

Floating Labels

Bootstrap 5 introduces floating labels, a modern form design pattern:

<!-- Single floating label -->
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">Email address</label>
</div>

<!-- Floating label with password -->
<div class="form-floating mb-3">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
    <label for="floatingPassword">Password</label>
</div>

<!-- Floating label with textarea -->
<div class="form-floating mb-3">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">Comments</label>
</div>

<!-- Floating label with select -->
<div class="form-floating mb-3">
    <select class="form-select" id="floatingSelect">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <label for="floatingSelect">Works with selects</label>
</div>

<!-- Floating labels in grid -->
<div class="row g-2">
    <div class="col-md">
        <div class="form-floating">
            <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com">
            <label for="floatingInputGrid">Email address</label>
        </div>
    </div>
    <div class="col-md">
        <div class="form-floating">
            <select class="form-select" id="floatingSelectGrid">
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
            <label for="floatingSelectGrid">Works with selects</label>
        </div>
    </div>
</div>
                

Note: When using floating labels, the placeholder attribute is required but won't be visible when the input has a value.

Disabled and Readonly States

Forms can have disabled or readonly states:

<!-- Disabled input -->
<input class="form-control" type="text" placeholder="Disabled input" disabled>

<!-- Disabled select -->
<select class="form-select" disabled>
    <option>Disabled select</option>
</select>

<!-- Readonly input -->
<input class="form-control" type="text" value="Readonly input" readonly>

<!-- Readonly plain text -->
<div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
</div>
                

Exercise: Create a Registration Form

Create a complete registration form with the following requirements:

Use floating labels for all inputs
Include fields: First Name, Last Name, Email, Username, Password, Confirm Password
Add a select dropdown for "Country" with at least 5 options
Include a textarea for "Bio" (optional)
Add an input group for username with "@" prefix
Include help text under the password field explaining requirements
Add a file input for profile picture
Include a primary submit button
Use proper spacing (mb-3) between form groups

Best Practices

Always associate labels with form controls using for and id attributes
Use appropriate input types (email, tel, url, date, etc.) for better mobile experience
Provide helpful placeholder text or help text to guide users
Use required, pattern, and other HTML5 validation attributes
Keep form labels clear, concise, and positioned above inputs
Group related form fields logically
Use consistent spacing throughout your forms
Consider using floating labels for modern, clean designs
Always test forms with keyboard navigation and screen readers

Summary

In this lesson, you learned about Bootstrap form basics including form controls (inputs, textareas, selects), different form layouts (vertical, horizontal, inline), input groups, form help text, and the new floating labels feature in Bootstrap 5. These fundamentals form the foundation for creating accessible and user-friendly forms.