Form Controls, Select and File Inputs

Bootstrap forms start with a small set of classes that normalize every native control across browsers: .form-control for text-like inputs, .form-select for dropdowns and .form-label for labels. This lesson goes through each control type, the sizing and read-only variants, helper text, and the details that make forms accessible. The next lessons build on this with input groups, checks, floating labels and validation.

Text Inputs and Textareas

html

<div class="mb-3">
  <label for="email" class="form-label">Email address</label>
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
  <div id="emailHelp" class="form-text">We never share your email.</div>
</div>

<div class="mb-3">
  <label for="bio" class="form-label">Bio</label>
  <textarea class="form-control" id="bio" rows="3"></textarea>
</div>

.form-control gives full width, padding, border, focus ring and consistent font.
.form-label adds bottom margin; always pair the for attribute with the input id.
.form-text renders small muted help text. Link it with aria-describedby="emailHelp" on the input so screen readers announce it.

Use the correct type (email, tel, url, number, date, password) so mobile keyboards and native validation behave properly.

Sizing

| Class | Result | |---|---| | form-control-sm | Smaller padding and font | | form-control | Default | | form-control-lg | Larger padding and font |

Match sizes with buttons (btn-sm, btn-lg) and input groups (input-group-sm, input-group-lg) so rows line up.

Disabled, Read-only and Plaintext

html

<input class="form-control" value="Disabled" disabled>
<input class="form-control" value="Read only" readonly>
<input class="form-control-plaintext" value="Looks like text, still a form field" readonly>

disabled greys the control and excludes it from form submission.
readonly keeps the value submittable but prevents editing.
.form-control-plaintext removes the border and background so a read-only value looks like regular text while staying aligned with other fields.

Select Menus

Native <select> elements get a custom arrow and consistent height with .form-select:

html

<select class="form-select form-select-lg" aria-label="Country">
  <option selected>Select a country</option>
  <option value="in">India</option>
  <option value="us">United States</option>
</select>

<select class="form-select" multiple size="4" aria-label="Skills">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Sass</option>
</select>

form-select-sm and form-select-lg change the size. multiple and size are plain HTML attributes and work unchanged. Bootstrap does not style the dropdown list itself; for searchable or tag-style selects, use a dedicated library or the dropdown component.

File Inputs

Bootstrap 5 styles the native file input with the same .form-control class, so no wrapper markup is needed:

html

<div class="mb-3">
  <label for="avatar" class="form-label">Profile photo</label>
  <input class="form-control" type="file" id="avatar" accept="image/*">
</div>

<input class="form-control form-control-sm" type="file" multiple>
<input class="form-control" type="file" disabled>

The "Browse" button text comes from the browser and is localized automatically. accept restricts the file picker, multiple allows several files, and you read the selection from input.files in JavaScript.

Color and Datalist

html

<label for="brand" class="form-label">Brand color</label>
<input type="color" class="form-control form-control-color" id="brand" value="#4f46e5" title="Choose a color">

<label for="city" class="form-label">City</label>
<input class="form-control" list="cities" id="city" placeholder="Type to search...">
<datalist id="cities">
  <option value="Mumbai"><option value="Pune"><option value="Delhi">
</datalist>

.form-control-color sizes the color swatch; a <datalist> turns any text input into a lightweight autocomplete with zero JavaScript.

Accessibility Checklist

Every control has a visible <label> or, when the design hides it, a .visually-hidden label or aria-label.
Help text is connected with aria-describedby.
Placeholders are hints, not labels; they disappear on typing.
Required fields carry the required attribute so native validation and screen readers know.

Common Mistakes

Using .form-control on a <select>. The arrow and padding will be wrong; use .form-select.
Using .form-control on checkboxes or radios. Those use .form-check-input (next lessons).
Forgetting id/for. Clicking the label will not focus the input and screen readers lose the association.
Mixing sizes. A form-control-lg next to a default btn misaligns; keep sizes consistent within a row.

Key Takeaways

.form-control styles text inputs, textareas and file inputs; .form-select styles select menus; .form-label styles labels.
Sizes come in -sm and -lg variants for controls, selects and input groups.
disabled removes a field from submission, readonly keeps it, and .form-control-plaintext shows a value as plain text.
.form-control-color and <datalist> cover color pickers and autocomplete without JavaScript.
Always connect labels with for/id and help text with aria-describedby.

Next lesson: Forms and Input Groups - combine text, buttons and dropdowns into a single control with .input-group.