0
0
Bootsrapmarkup~5 mins

Form control basics in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Form controls let users enter information on a webpage. They make websites interactive and useful.

When you want users to type their name or email.
When you need users to select options from a list.
When you want users to check boxes or toggle switches.
When you want to collect feedback or comments.
When you want users to submit data like login details.
Syntax
Bootsrap
<input type="text" class="form-control" placeholder="Enter text">

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

<textarea class="form-control" rows="3"></textarea>
Use the form-control class to style text inputs and textareas with Bootstrap's default look.
Use the form-select class for dropdown menus to get consistent styling.
Examples
A text input for email with Bootstrap styling and a placeholder.
Bootsrap
<input type="email" class="form-control" placeholder="Enter your email">
A dropdown menu with a default selected option.
Bootsrap
<select class="form-select">
  <option selected>Choose an option</option>
  <option>Option A</option>
  <option>Option B</option>
</select>
A multi-line text box for longer input like messages or comments.
Bootsrap
<textarea class="form-control" rows="4" placeholder="Write your message here"></textarea>
Sample Program

This example shows a simple contact form using Bootstrap form controls. It includes a text input for name, an email input, a textarea for message, and a submit button. Labels and ARIA labels improve accessibility.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Form Controls Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-5">
    <h1>Contact Us</h1>
    <form>
      <div class="mb-3">
        <label for="nameInput" class="form-label">Name</label>
        <input type="text" class="form-control" id="nameInput" placeholder="Enter your name" aria-label="Name">
      </div>
      <div class="mb-3">
        <label for="emailInput" class="form-label">Email address</label>
        <input type="email" class="form-control" id="emailInput" placeholder="name@example.com" aria-label="Email address">
      </div>
      <div class="mb-3">
        <label for="messageInput" class="form-label">Message</label>
        <textarea class="form-control" id="messageInput" rows="4" placeholder="Write your message here" aria-label="Message"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Send</button>
    </form>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use <label> tags with form controls for better accessibility.

Use aria-label or aria-labelledby to help screen readers understand inputs.

Bootstrap's spacing classes like mb-3 add space below each form group for neat layout.

Summary

Form controls let users enter or select data on a webpage.

Bootstrap provides form-control and form-select classes for consistent styling.

Labels and ARIA attributes make forms accessible to everyone.