Bootstrap - Forms

Text Inputs

Text inputs are for entering single-line text data. To create a text input, use the <input> element with the type attribute set to "text" and add the class "form-control" to apply Bootstrap's styling.

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

Textareas

Textareas are for entering multi-line text data. To create a textarea, use the <textarea> element and add the class "form-control" to apply Bootstrap's styling.

<textarea class="form-control" rows="3" placeholder="Enter your message"></textarea>

Checkboxes

Checkboxes let users select one or more options from a list. To create a checkbox, use the <input> element with the type attribute set to "checkbox" and add the class "form-check-input" to apply Bootstrap's styling. Wrap the checkbox input and its label inside a <div> element with the class "form-check".

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="checkbox1">
  <label class="form-check-label" for="checkbox1">Option 1</label>
</div>

Radio Buttons

Radio buttons let users select a single option from a list. To create a radio button, use the <input> element with the type attribute set to "radio" and add the class "form-check-input" to apply Bootstrap's styling. Wrap the radio input and its label inside a <div> element with the class "form-check".

<div class="form-check">
  <input class="form-check-input" type="radio" name="radioOptions" id="radio1">
  <label class="form-check-label" for="radio1">Option 1</label>
</div>

Select Dropdowns

Select dropdowns let users choose an option from a list of predefined values. To create a select dropdown, use the <select> element and add the class "form-control" to apply Bootstrap's styling. Each option is defined using the <option> element.

<select class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

File Inputs

File inputs let users select and upload files from their device. To create a file input, use the <input> element with the type attribute set to "file" and add the class "form-control-file" to apply Bootstrap's styling.

<input type="file" class="form-control-file">

Range Inputs

Range inputs let users select a value from a specified range. To create a range input, use the <input> element with the type attribute set to "range" and add the class "form-control-range" to apply Bootstrap's styling.

<input type="range" class="form-control-range">

These are the commonly used form control types in Bootstrap. Each control type has its own purpose and can be customized with additional attributes and classes to fit your specific needs.

Vertical Form Layout

The vertical form layout is the default layout in Bootstrap. In this layout, form controls and labels are stacked vertically, one below the other. Each form control is placed in a separate row, making the form appear longer vertically.

To create a vertical form layout, wrap each form control and its label inside a <div> element with the class "form-group". This creates a logical grouping and provides proper spacing between the form controls.

<form>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name">
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" placeholder="Enter your email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Horizontal Form Layout

The horizontal form layout aligns form controls and labels side by side, creating a more compact and readable layout. In this layout, labels are placed to the left of the form controls, and the controls are aligned horizontally.

To create a horizontal form layout, add the class "form-horizontal" to the <form> element. Then, wrap each form control and its label inside a <div> element with the class "form-group row". The label should have the class "col-form-label" and be placed inside a <div> with the appropriate column class (e.g., "col-sm-2"). The form control should be placed inside another <div> with the remaining column class (e.g., "col-sm-10").

<form class="form-horizontal">
  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" placeholder="Enter your name">
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter your email">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Inline Form Layout

The inline form layout displays form controls in a single line, making it suitable for simple forms or search bars. In this layout, form controls are placed next to each other horizontally, without labels.

To create an inline form layout, add the class "form-inline" to the <form> element. Each form control should have the class "form-control" to maintain proper styling.

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

Grid-based Form Layout

Bootstrap's grid system can also be used to create custom form layouts. By using the grid classes, you can create complex form layouts with multiple columns and varying widths.

To create a grid-based form layout, use the "row" and "col-*" classes to define the structure of your form. Each form control and its label should be placed inside a <div> element with the appropriate column class.

<form>
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" class="form-control" id="firstName" placeholder="Enter your first name">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" class="form-control" id="lastName" placeholder="Enter your last name">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Enter your email">
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Client-side Validation with Bootstrap

Bootstrap supports client-side form validation by using HTML5 validation attributes and its own validation classes. To use Bootstrap's validation styles, add the "needs-validation" class to the <form> element. Then, add the "required" attribute to the form controls that are required fields.

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name" required>
    <div class="invalid-feedback">Please provide a name.</div>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" placeholder="Enter your email" required>
    <div class="invalid-feedback">Please provide a valid email.</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Validation Classes

Bootstrap has validation classes that can be added to form controls to show their validation state. The main validation classes are:

These classes can be added to form controls dynamically based on the validation state. When a form control has the "is-invalid" class, Bootstrap uses a red border color and shows an error message.

<div class="form-group">
  <label for="username">Username</label>
  <input type="text" class="form-control is-valid" id="username" required>
</div>
<div class="form-group">
  <label for="password">Password</label>
  <input type="password" class="form-control is-invalid" id="password" required>
  <div class="invalid-feedback">Please provide a password.</div>
</div>

Validation Feedback

Bootstrap lets you show validation feedback messages to users. The feedback messages can be shown below the form controls using the "valid-feedback" and "invalid-feedback" classes.

To show validation feedback, create a <div> element with the right feedback class ("valid-feedback" for valid input or "invalid-feedback" for invalid input) and put it after the form control.

<div class="form-group">
  <label for="email">Email</label>
  <input type="email" class="form-control" id="email" required>
  <div class="valid-feedback">Looks good!</div>
  <div class="invalid-feedback">Please provide a valid email.</div>
</div>

Custom Validation Styles

Along with the default validation styles, Bootstrap lets you change the validation look using CSS. You can change the colors, borders, and other styles of the validation classes to match your application's design.

To change the validation styles, target the .is-valid and .is-invalid classes in your CSS and use your desired styles.

.form-control.is-valid {
  border-color: #28a745;
}

.form-control.is-invalid {
  border-color: #dc3545;
}

.valid-feedback {
  color: #28a745;
}

.invalid-feedback {
  color: #dc3545;
}

By using Bootstrap's form validation classes and giving the right validation feedback, you can help users enter valid data and make your forms easier to use.

Customizing Form Control Styles

Bootstrap provides CSS classes to style form controls. However, you can also customize the form control appearance by modifying their styles directly or by creating custom CSS classes.

.form-control {
  background-color: #f8f9fa;
  border-color: #ced4da;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.form-control:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

In the above example, the .form-control class is targeted to change the background color, border color, padding, and font size of form controls. The :focus pseudo-class is used to style the form control when it receives focus, changing the border color and adding a box shadow.

Applying Custom CSS to Forms

You can also apply custom CSS to the entire form or specific form sections. This lets you create a consistent and cohesive design for your forms.

To apply custom CSS to forms, create a custom CSS class and apply it to the <form> element or any parent element of the form controls. Then, define the styles for that class in your CSS.

<form class="custom-form">
  ...
</form>

.custom-form {
  background-color: #f8f9fa;
  padding: 2rem;
  border-radius: 0.5rem;
}

.custom-form .form-group {
  margin-bottom: 1.5rem;
}

.custom-form .form-control {
  border-radius: 0.25rem;
}

Overriding Bootstrap Form Styles

Sometimes, you may need to override the default Bootstrap form styles to achieve a specific design or to resolve conflicts with your custom styles. Bootstrap lets you override its form styles by using more specific selectors or by increasing the specificity of your custom styles.

To override Bootstrap form styles, use more specific selectors in your CSS.

.my-form .form-control {
  border-color: #ff0000;
}

.my-form .btn-primary {
  background-color: #00ff00;
  border-color: #00ff00;
}

In this example, the .my-form class is used as a more specific selector to target form controls and buttons within a specific form. The border color of form controls and the background color and border color of the primary button are overridden.

Labeling Form Controls

One of the most important aspects of form accessibility is properly labeling form controls. Each form control should have a label that clearly indicates its purpose. In Bootstrap, you can use the <label> element to associate a label with a form control.

<div class="form-group">
  <label for="name">Name</label>
  <input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>

By using the for attribute on the <label> element and matching it with the id attribute of the form control, you create a logical connection between the label and the control. This helps screen readers and other assistive technologies understand the relationship between the label and the control.

Providing Instructions and Error Messages

In addition to labeling form controls, it's important to provide clear instructions and error messages to guide users in completing the form correctly. Bootstrap has classes and elements that you can use to display instructions and error messages.

To provide instructions or additional information about a form control, you can use the <small> element with the class "form-text".

<div class="form-group">
  <label for="password">Password</label>
  <input type="password" class="form-control" id="password">
  <small class="form-text text-muted">Must be at least 8 characters long.</small>
</div>

For error messages, you can use the "invalid-feedback" class to display validation feedback when a form control is invalid.

<div class="form-group">
  <label for="email">Email</label>
  <input type="email" class="form-control is-invalid" id="email">
  <div class="invalid-feedback">Please provide a valid email address.</div>
</div>

Keyboard Navigation

Ensuring that forms are keyboard accessible is important for users who rely on keyboard navigation. Bootstrap forms are designed to be keyboard-friendly by default. Form controls can be navigated using the Tab key, and buttons can be activated using the Enter or Space key.

To further enhance keyboard accessibility, you can use the tabindex attribute to define a custom tab order for form controls. This is useful when you have a complex form layout or want to guide users through a specific sequence of form controls.

<form>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" tabindex="1">
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" tabindex="2">
  </div>
  <button type="submit" class="btn btn-primary" tabindex="3">Submit</button>
</form>

ARIA Attributes for Forms

ARIA (Accessible Rich Internet Applications) attributes provide additional semantic information to assistive technologies about the purpose and state of form controls. Bootstrap supports the use of ARIA attributes to enhance form accessibility.

Some common ARIA attributes used in forms include:

<div class="form-group">
  <label for="username">Username</label>
  <input type="text" class="form-control" id="username" aria-describedby="usernameHelp" required aria-required="true">
  <small id="usernameHelp" class="form-text text-muted">Enter your unique username.</small>
</div>

The aria-describedby attribute is used to associate the helper text with the form control, providing additional context to assistive technologies. The aria-required attribute indicates that the control is required.

Handling Form Submissions

When a user fills out a form and clicks the submit button, the form data needs to be sent to the server for processing. To handle form submissions, you need to specify the HTTP method and the URL where the form data should be sent.

You can use the action attribute of the <form> element to specify the URL that will handle the form submission. The method attribute determines the HTTP method used for the form submission, such as GET or POST.

<form action="/submit-form" method="POST">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" name="email" required>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Sending Form Data to the Server

When a form is submitted, the form data is sent to the server as key-value pairs. Each form control's name attribute acts as the key, and its value becomes the value.

To make sure the form data is sent to the server, assign unique and meaningful name attributes to each form control.

<div class="form-group">
  <label for="username">Username</label>
  <input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
  <label for="password">Password</label>
  <input type="password" class="form-control" id="password" name="password" required>
</div>

Processing Form Data on the Server-side

Once the form data is sent to the server, it needs to be processed and handled based on your application's needs. The server-side code, written in languages like PHP, Ruby, Python, or Node.js, receives the form data and does the needed operations.

The server-side code can get the form data by accessing the keys based on the name attributes of the form controls. It can then validate the data, store it in a database, send emails, or do any other needed actions.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST["name"];
  $email = $_POST["email"];

  // Process the form data (e.g., store in a database, send an email, etc.)
  // ...

  // Redirect or display a success message
  header("Location: success.php");
  exit();
}
?>

Remember to always validate and clean user input on the server-side to prevent security issues like SQL injection or cross-site scripting (XSS) attacks.

By handling form submissions, sending form data to the server, and processing the data on the server-side, you can create interactive and dynamic web applications that capture and use user input.

Date and Time Pickers

Date and time pickers let users easily select a date or time using a user-friendly interface. They provide an intuitive way to input date and time values compared to typing.

One popular date and time picker plugin for Bootstrap is the Bootstrap Datepicker. It offers a customizable and responsive date picker widget that works with Bootstrap forms.

<div class="form-group">
  <label for="datepicker">Select Date</label>
  <input type="text" class="form-control" id="datepicker">
</div>

$(document).ready(function() {
  $('#datepicker').datepicker();
});

Color Pickers

Color pickers let users select a color from a palette or by entering a specific color value. They are used in forms where color selection is needed, such as in design or customization settings.

One popular color picker plugin for Bootstrap is Bootstrap Colorpicker. It provides a color picker widget that can be easily added to Bootstrap forms.

<div class="form-group">
  <label for="colorpicker">Select Color</label>
  <input type="text" class="form-control" id="colorpicker">
</div>

$(document).ready(function() {
  $('#colorpicker').colorpicker();
});

Autocomplete and Typeahead

Autocomplete and typeahead functionality lets users quickly find and select options from a predefined list as they type. It provides suggestions based on the user's input, making it easier to fill out forms with known values.

One popular autocomplete and typeahead plugin for Bootstrap is Bootstrap Typeahead. It offers a simple and customizable typeahead functionality that can be added to Bootstrap forms.

<div class="form-group">
  <label for="typeahead">Select Country</label>
  <input type="text" class="form-control" id="typeahead" data-provide="typeahead">
</div>

$(document).ready(function() {
  var countries = ['United States', 'Canada', 'United Kingdom', 'Australia', 'Germany'];
  $('#typeahead').typeahead({
    source: countries
  });
});

Masked Input Fields

Masked input fields format user input based on a predefined pattern. They are useful when you need to enforce a specific format for input values, such as phone numbers, dates, or credit card numbers.

One popular masked input plugin for Bootstrap is jQuery Mask Plugin. It lets you define input masks using a simple syntax and automatically formats the user's input as they type.

<div class="form-group">
  <label for="phone">Phone Number</label>
  <input type="text" class="form-control" id="phone">
</div>

$(document).ready(function() {
  $('#phone').mask('(000) 000-0000');
});

Advanced Validation Plugins

While Bootstrap provides basic form validation classes, you may need more advanced validation capabilities. Advanced validation plugins offer features like real-time validation, custom validation rules, and error message handling.

One popular advanced validation plugin for Bootstrap is jQuery Validation Plugin. It provides a set of validation methods and lets you define custom validation rules and error messages.

<form id="myForm">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" name="password" required>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

$(document).ready(function() {
  $('#myForm').validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      email: {
        required: 'Please enter your email',
        email: 'Please enter a valid email address'
      },
      password: {
        required: 'Please enter your password',
        minlength: 'Your password must be at least 6 characters long'
      }
    }
  });
});

These form plugins and extensions improve the functionality and user experience of Bootstrap forms. They provide extra features and interactivity, making it easier to create advanced and user-friendly forms.