Bootstrap - Form Control

Input Fields

Input fields are common form control elements. They let users input text, numbers, and other data. Bootstrap supports these types of input fields:

• Text input: For entering plain text.
• Password input: For entering passwords. The entered characters are hidden for security.
• Email input: For entering email addresses. It checks the input format.
• Number input: For entering numbers. It provides increment and decrement buttons.
• Telephone input: For entering telephone numbers.
• Date input: For entering dates using a date picker.
• Time input: For entering time values.
• URL input: For entering URLs (web addresses).

Text Area

Text areas are used for entering multi-line text input. They provide a larger input area than single-line input fields. You can control the size of a text area using the rows and cols attributes.

<textarea rows="4" cols="50"></textarea>

Checkboxes and Radio Buttons

Checkboxes and radio buttons let users select one or more options from a set of choices.

• Checkboxes: Used when multiple options can be selected. Each checkbox works independently.
• Radio buttons: Used when only one option can be selected from a group. Selecting one radio button deselects others in the same group.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

Select Dropdowns

Select dropdowns let users select one or more options from a list.

• Single select dropdown: Lets users select a single option from a dropdown list.
• Multiple select dropdown: Lets users select multiple options by holding the Ctrl (Windows) or Command (Mac) key while clicking.

<select class="form-select" aria-label="Default select example">
  <option selected>Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select multiple class="form-select" aria-label="multiple select example">
  <option selected>Select multiple options</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

File Input

File input elements let users select and upload files from their device. Bootstrap provides styling for file input elements to make them look consistent with other form controls.

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

Submit and Reset Buttons

Form control also includes buttons for submitting and resetting form data.

• Submit button: Used to submit the form data to the server for processing.
• Reset button: Used to reset all form fields to their default values, clearing any user input.

These buttons are usually placed at the end of the form and are styled using Bootstrap's button classes.

<div>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="reset" class="btn btn-secondary">Reset</button>
</div>

Applying Bootstrap Classes to Form Control Elements

Bootstrap has predefined classes that you can add to your form control elements to apply default styling. Here are some commonly used classes:

• .form-control: Applies basic styling to input fields, text areas, and select dropdowns. It sets padding, font size, line height, and border styles.

<input type="text" class="form-control" placeholder="Enter your name">

• .form-check-input: Applies styling to checkboxes and radio buttons. It changes their appearance to match Bootstrap's design.

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="exampleCheck">
  <label class="form-check-label" for="exampleCheck">
    Check me out
  </label>
</div>

• .form-select: Applies styling to select dropdowns, giving them a consistent appearance with other form controls.

<select class="form-select">
  <option selected>Choose an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

By applying these classes to your form control elements, you can use Bootstrap's default styling and create visually appealing forms that match the overall design of your Bootstrap-based website.

Customizing Form Control Styles Using CSS

While Bootstrap's default form control styling is suitable for most cases, you may want to customize the styles to fit your specific design requirements. You can do this by writing your own CSS rules.

To customize form control styles, you can target the form control elements using their classes or IDs and apply your desired styles.

<input type="text" class="form-control custom-input" placeholder="Enter your name">

.custom-input {
  background-color: #f8f9fa;
  border: 2px solid #ced4da;
}

The input field has an additional class .custom-input that is used to apply custom styles. The CSS rule targets this class and sets the background color and border properties.

You can customize various aspects of form control elements, such as colors, font styles, padding, margins, and more, using CSS. This allows you to create unique and visually appealing form control elements that align with your website's design.

Remember to use specific class names or IDs when targeting form control elements to avoid unintentionally affecting other elements on the page.

By combining Bootstrap's default form control classes with your own custom CSS, you can create stylish and functional form control elements that improve the user experience on your website.

Changing the Size of Form Control Elements

Bootstrap has three sizing classes that you can use on form control elements:

<input class="form-control form-control-sm" type="text" placeholder="Small input">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-lg" type="text" placeholder="Large input">

The .form-control-sm class makes the input field smaller, while the .form-control-lg class makes it larger. The default input field size is used when no sizing class is applied.

You can use these sizing classes on different form control elements, such as text inputs, text areas, select dropdowns, and more.

Using Bootstrap's Sizing Classes

Bootstrap's sizing classes can be used on other form control elements too.

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

<select class="form-select">
  <option selected>Default select</option>
  <!-- options -->
</select>

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

The sizing classes (.form-select-sm and .form-select-lg) are used on the select dropdowns to change their size.

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="smallCheckbox">
  <label class="form-check-label" for="smallCheckbox">Small checkbox</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" id="defaultRadio">
  <label class="form-check-label" for="defaultRadio">Default radio</label>
</div>

<div class="form-check">
  <input class="form-check-input form-control-lg" type="checkbox" id="largeCheckbox">
  <label class="form-check-label" for="largeCheckbox">Large checkbox</label>
</div>

By using Bootstrap's sizing classes, you can create form control elements that are the same size and match your design. These classes let you change the size of form control elements without writing custom CSS.

Keep in mind that the sizing classes may not work the same on all form control elements, as some elements have fixed sizes or may need extra CSS changes to get the size you want.

Disabled State

The disabled state is used when you want to disable a form control element, preventing users from interacting with it or changing its value. To put a form control in the disabled state, you can add the disabled attribute to the element.

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

When a form control is disabled, it appears grayed out, and users cannot focus on, click, or edit it. The disabled state is useful when you want to show that a form control is temporarily unavailable or when you need to prevent users from modifying certain fields.

Readonly State

The readonly state is similar to the disabled state but allows users to focus on the form control element without being able to change its value. To put a form control in the readonly state, you can add the readonly attribute to the element.

<input type="text" class="form-control" placeholder="Readonly input" value="This is a readonly input" readonly>

Readonly form controls appear with a slightly different background color to indicate that their value cannot be edited. Users can still focus on and select the content of a readonly form control, but they cannot change it.

Validation States

Bootstrap has validation states that show if the data entered in a form control is correct or incorrect. The validation states provide visual feedback to users, helping them fix any mistakes before sending the form.

Bootstrap uses the following classes for validation states:

• .is-valid: Indicates that the form control's value is correct.
• .is-invalid: Indicates that the form control's value is incorrect.

<div class="mb-3">
  <label for="validInput" class="form-label">Valid input</label>
  <input type="text" class="form-control is-valid" id="validInput">
  <div class="valid-feedback">Valid input!</div>
</div>

<div class="mb-3">
  <label for="invalidInput" class="form-label">Invalid input</label>
  <input type="text" class="form-control is-invalid" id="invalidInput">
  <div class="invalid-feedback">Please enter a valid value.</div>
</div>

In the example above, the first input field has the .is-valid class, indicating that its value is correct. It is accompanied by a <div> element with the .valid-feedback class, which displays a success message.

The second input field has the .is-invalid class, indicating that its value is incorrect. It is accompanied by a <div> element with the .invalid-feedback class, which displays an error message.

To use validation states, add the appropriate class (.is-valid or .is-invalid) to the form control element. Then include the corresponding feedback message in a <div> element with the respective class (.valid-feedback or .invalid-feedback).

Bootstrap's validation states provide a simple way to give users feedback about their input, helping them fill out forms accurately and reducing the chances of sending incorrect data.

Stacked Form Control Layout

The stacked form control layout is the default layout in Bootstrap. In this layout, form control elements are stacked vertically, one below the other. Each form control element takes up the full width of its container.

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <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="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Each form control element (input fields and text area) is placed within a <div> element with the class .mb-3, which adds margin at the bottom for spacing. The labels and form controls are stacked vertically, creating a clear and readable layout.

Inline Form Control Layout

The inline form control layout displays form control elements in a single line, side by side. This layout is useful when you have a small number of form controls and want to create a compact and horizontal form.

To create an inline form control layout, you can add the .row class to a <div> element that wraps your form controls and the .col class to each form control element.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
    <div class="col">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

The form control elements (input fields and button) are placed within <div> elements with the class .col, which makes them align horizontally in a single row. The .row class on the parent <div> ensures proper spacing and alignment.

Horizontal Form Control Layout

The horizontal form control layout combines the benefits of the stacked and inline layouts. It displays labels and form controls in a horizontal layout, with labels on the left and form controls on the right.

To create a horizontal form control layout, you can use the grid system classes provided by Bootstrap.

<form>
  <div class="row mb-3">
    <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Each form control element is placed within a <div> element with the class .row for proper spacing and alignment. The labels are given the class .col-sm-2 to set their width, and the form controls are placed within a <div> element with the class .col-sm-10 to occupy the remaining width. The .offset-sm-2 class is used on the last <div> element to offset the submit button, aligning it with the form controls.

By using Bootstrap's grid system classes, you can create a well-structured and aligned horizontal form control layout. These are the three main form control layouts provided by Bootstrap. Choose the layout that best suits your form design and requirements. You can also mix and match these layouts within a single form to create a custom layout that fits your needs.