Form control basics in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a form control in Bootstrap?

A form control in Bootstrap is a styled HTML input element like text boxes, checkboxes, or selects that lets users enter or choose data easily and consistently.

beginner

How do you make a text input field using Bootstrap?

Use the <input> element with the class form-control. For example: <input type="text" class="form-control">.

beginner

Why should you use form-label with inputs?

The <code>form-label</code> class styles labels nicely and connects them to inputs for better accessibility and user experience.

beginner

What Bootstrap class do you use for a select dropdown?

Use the <code>form-select</code> class on the <code>&lt;select&gt;</code> element to get a styled dropdown.

beginner

How can you make a form control disabled in Bootstrap?

Add the disabled attribute to the input element. Bootstrap styles it to look inactive and prevents user interaction.

Which class do you add to an <input> to style it as a Bootstrap form control?

A form-input

B input-style

C control-input

D form-control

The correct Bootstrap class for styling inputs is form-control.

What element and class combination creates a styled dropdown in Bootstrap?

A <code>&lt;select class="form-select"&gt;</code>

B <code>&lt;input type="dropdown" class="form-control"&gt;</code>

C <code>&lt;select class="form-control"&gt;</code>

D <code>&lt;dropdown class="form-select"&gt;</code>

Bootstrap uses <select> with the class form-select for dropdowns.

How do you disable a Bootstrap form control?

A Add the class <code>disabled-control</code>

B Add the attribute <code>disabled</code> to the input

C Add the class <code>form-disabled</code>

D Wrap input in <code>&lt;div class="disabled"&gt;</code>

The standard way is to add the disabled attribute; Bootstrap styles it accordingly.

Why is it important to use <label> with form controls?

A It makes the input required

B It changes the input color automatically

C It improves accessibility and links the label to the input

D It disables the input

Labels help screen readers and users by linking text to inputs.

Which Bootstrap class styles a checkbox input?

A form-check-input

B form-control

C form-checkbox

D checkbox-control

Checkboxes use the form-check-input class in Bootstrap.

Explain how to create a basic text input form control using Bootstrap.

Think about the HTML tag, the class to add, and how to connect a label.

Describe the purpose of Bootstrap form control classes and how they improve user experience.

Consider why uniform look and accessibility matter in forms.