Bootstrap 5.3 Form Controls: Create Interactive Web Forms

Bootstrap 5.3 Form Controls

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5.3 Form Controls Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h2>Bootstrap 5.3 Form Controls Example</h2>
    <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</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>
      <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" rows="3"></textarea>
      </div>
      <div class="mb-3">
        <label for="select" class="form-label">Select Option</label>
        <select class="form-control" id="select">
          <option value="">Select...</option>
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</<option>
		  <option value="option3">Option 3</option>
        </select>
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="checkbox1">
        <label class="form-check-label" for="checkbox1">Checkbox 1</label>
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="checkbox2">
        <label class="form-check-label" for="checkbox2">Checkbox 2</label>
      </div>
      <div class="mb-3 form-check">
        <input type="radio" class="form-check-input" id="radio1" name="radioGroup">
        <label class="form-check-label" for="radio1">Radio 1</label>
      </div>
      <div class="mb-3 form-check">
        <input type="radio" class="form-check-input" id="radio2" name="radioGroup">
        <label class="form-check-label" for="radio2">Radio 2</label>
      </div>
      <div class="mb-3">
        <label for="file" class="form-label">File Upload</label>
        <input type="file" class="form-control" id="file">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</body>
</html>

Code Output

Bootstrap 5.3 Form Controls Example

Form Controls:

The .form-control class is used to style form input elements, such as text fields, select dropdowns, and text areas. This class provides consistent styling and appearance to form controls across different browsers and devices.

- Text Input: <input type=”text” class=”form-control”>
  This form control is used for single-line text input fields. It’s commonly used for inputs like names, emails, and usernames.
- Email Input: <input type=”email” class=”form-control”>
  This form control is specifically used for email input fields. It provides validation for email addresses and displays a specialized keyboard on mobile devices.
- Password Input: <input type="password" class="form-control"><br />This form control is used for password input fields. It masks the entered characters to ensure password security.
- Textarea: <textarea class=”form-control”></textarea>
  This form control is used for multi-line text input fields. It’s suitable for longer inputs like comments or messages.
- Select Dropdown: <select class=”form-control”><option>…</option></select>
  This form control is used for creating dropdown menus. It allows users to select a single option from a list of available choices.
- Checkbox: <input type=”checkbox” class=”form-check-input”>
  This form control represents a checkbox input. It allows users to select multiple options from a list.
- Radio Button:<input type=”radio” class=”form-check-input”>
  This form control represents a radio button input. It allows users to select a single option from a list.
- File Input: <input type=”file” class=”form-control”>
  This form control enables users to select and upload files from their devices.