❮ Previous Next ❯

Form Controls

  • Learn different Bootstrap form input controls and customization.

  • Introduction to Form Controls

    Form controls are the core building blocks of any form.
    They are the elements that allow users to enter, choose, or provide data.

    In Bootstrap 5, form controls are:

    • Built on native HTML elements

    • Styled consistently using Bootstrap classes

    • Responsive and accessible by default

    Bootstrap does not create new inputs - it enhances standard HTML controls.

    What Are Form Controls ?

    Form controls include:

    • Text-based inputs

    • Selection controls

    • Multi-line text areas

    They are responsible for:

    • Collecting user data

    • Triggering validation

    • Sending values to the server

    Every form is essentially a collection of form controls.

    Input Controls

    What Is an Input Control ?

    An <input> element allows users to enter single-line data.

    Bootstrap styles inputs using the .form-control class.

Text Input Control

Use the .form-control class to style input fields for collecting user data in forms. 

<div class="mb-3">
  <label class="form-label">Name</label>
  <input type="text" class="form-control" placeholder="Enter your name">
</div>

  • Explanation:

    • type="text" → text input

    • .form-control → Bootstrap styling

    • placeholder → hint text

    Common Input Types

    Bootstrap supports all HTML input types.

Common Input Types

Bootstrap supports various HTML input types styled with the .form-control class for consistent form design. 

<!-- Email Input -->
<input type="email" class="form-control" placeholder="Enter email">

<!-- Password Input -->
<input type="password" class="form-control" placeholder="Enter password">

<!-- Number Input -->
<input type="number" class="form-control">

<!-- Date Input -->
<input type="date" class="form-control">

  • Bootstrap applies the same styling to all input types.

    Disabled and Readonly Inputs

Disabled and Readonly Inputs

Use disabled to block user interaction and readonly to allow viewing but prevent editing. 

<!-- Disabled Input -->
<input class="form-control" disabled value="Disabled input">

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

  • Difference:

    • disabled → not editable, not submitted

    • readonly → not editable, but submitted

    Input Sizes

    Bootstrap provides size modifiers.

Input Size Utilities

Use Bootstrap size classes to create small, default, or large input fields. 

<input class="form-control form-control-sm">
<input class="form-control">
<input class="form-control form-control-lg">

  • Use sizes to:

    • Match UI hierarchy

    • Improve visual balance

      Select Control

      What is a Select Control ?

      A <select> element allows users to choose one or more options from a list.

      Bootstrap styles selects using the .form-select class (not .form-control).

    Select Control

    Use the .form-select class to style dropdown lists that allow users to choose an option. 

    <div class="mb-3">
  <label class="form-label">Country</label>
  <select class="form-select">
    <option selected>Choose...</option>
    <option>India</option>
    <option>USA</option>
    <option>UK</option>
  </select>
</div>

    • Explanation:

      • .form-select → Bootstrap select styling

      • <option> → selectable choices

    Disabled and Multiple Select

    Use disabled to prevent interaction with a select dropdown and multiple to allow selecting multiple options. 

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

<!-- Multiple Select -->
<select class="form-select" multiple>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

    • Used when:

      • Multiple selections are required

    Select Size Utilities

    Use Bootstrap size classes to create small or large select dropdowns. 

    <select class="form-select form-select-sm"></select>
<select class="form-select form-select-lg"></select>

    • Labels and Accessibility

      Why Labels Matter

      Labels:

      • Improve usability

      • Improve accessibility

      • Help screen readers

      • Increase clickable area

      Always associate labels with inputs.

    Form Labels and Accessibility

    Always connect labels with inputs using the for and id attributes to improve usability and accessibility. 

    <label for="email" class="form-label">Email</label>
<input id="email" class="form-control">

    • Form Control Spacing

      Bootstrap uses utility classes for spacing.

    Form Control Spacing

    Use spacing utilities like mb-3 to add proper space between form controls. 

    <div class="mb-3">
  ...
</div>

    • This ensures:

      • Consistent spacing

      • Clean layout

      • No custom CSS needed

        Common Mistakes

        • Forgetting .form-control or .form-select

        • Using .form-control on <select>

        • Missing labels

        • Using placeholders instead of labels

        • Mixing layout and control styling

          Best Practices for Form Controls

          • Always use labels

          • Use correct Bootstrap class

          • Keep inputs simple

          • Avoid unnecessary sizes

          • Do not remove focus styles

          • Maintain consistency

        ❮ Previous Next ❯