Form control basics in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the form-control class in Bootstrap?

Bootstrap uses the form-control class on input elements. What does this class do?

A It styles input elements to have consistent width, padding, and border for better usability.

B It hides the input element from the user interface.

C It automatically validates the input data on the client side without extra code.

D It converts input fields into dropdown menus.

💡 Hint

Think about how Bootstrap helps inputs look uniform and easy to use.

The form-control class in Bootstrap applies consistent styling like width, padding, and border to input elements, making forms look clean and easy to interact with.

📝 Syntax

intermediate

Which code correctly creates a Bootstrap text input with label?

Select the option that correctly uses Bootstrap classes to create a labeled text input.

A <label for="emailInput">Email</label><input type="email" class="form-control" id="emailInput">

B <input type="email" class="form-control" id="emailInput"><label>Email</label>

C <label>Email</label><input type="email" id="emailInput">

D <label for="emailInput">Email</label><input type="email" class="input-control" id="emailInput">

💡 Hint

Remember the label's for attribute should match the input's id, and the input needs the correct Bootstrap class.

Option A correctly pairs the label's for attribute with the input's id and uses the Bootstrap class form-control to style the input.

❓ rendering

advanced

What will the following Bootstrap form control look like in the browser?

Given this code, what visual result will you see in a modern browser?

Bootsrap

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

A A plain text label 'Enter your name' with no input box.

B An invisible input field with no visible border or placeholder.

C A small button labeled 'Enter your name'.

D A wide text box with padding and border, showing grey placeholder text 'Enter your name'.

💡 Hint

Think about how Bootstrap styles inputs and what placeholder text does.

The form-control class makes the input wide with padding and border. The placeholder attribute shows grey text inside the box until the user types.

❓ selector

advanced

Which CSS selector targets all Bootstrap form controls inside a form with class user-form?

Choose the correct CSS selector to style all inputs with class form-control inside a form having class user-form.

A user-form > form .form-control

B .form-control user-form form

C form.user-form .form-control

D form .user-form .form-control

💡 Hint

Remember the order: parent element, then descendant with class.

Option C correctly selects any element with class form-control inside a form element with class user-form.

❓ accessibility

expert

Which attribute improves accessibility for screen readers on Bootstrap form controls?

You want to make sure screen readers understand the purpose of your input fields. Which attribute is best to add to a Bootstrap input element?

A placeholder

B aria-label

C onclick

D data-toggle

💡 Hint

This attribute provides a text description specifically for assistive technologies.

The aria-label attribute gives screen readers a clear label for the input, improving accessibility. Placeholder text is not a reliable label for screen readers.