Form control basics in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap text input field.

Bootsrap

<input type="text" class="form-control [1]" placeholder="Enter your name">

Drag options to blanks, or click blank then click option'

Aform-control-lg

Bform-control

Cform-input

Dinput-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names like 'form-input' or 'input-text'.

Omitting the class attribute entirely.

The form-control class is required to style the input as a Bootstrap form control.

2fill in blank

medium

Complete the code to create a Bootstrap textarea with 3 rows.

Bootsrap

<textarea class="form-control" rows="[1]" placeholder="Your message"></textarea>

Drag options to blanks, or click blank then click option'

A3

B4

C2

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using too few or too many rows making the textarea too small or too large.

Forgetting to add the rows attribute.

The rows attribute sets the visible height of the textarea. Here, 3 rows are requested.

3fill in blank

hard

Fix the error in the code to properly create a Bootstrap checkbox input.

Bootsrap

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" [1]>
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

Drag options to blanks, or click blank then click option'

Achecked="checked"

Bchecked=checked

Cchecked=true

Dchecked

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect syntax like checked=true which is invalid in HTML.

Omitting the checked attribute when the checkbox should be pre-selected.

In HTML, the correct way to mark a checkbox as checked is checked="checked".

4fill in blank

hard

Fill both blanks to create a Bootstrap select dropdown with a label.

Bootsrap

<label for="[1]" class="form-label">Choose an option</label>
<select class="form-select" id="[2]">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Drag options to blanks, or click blank then click option'

AexampleSelect

BselectOption

CdropdownMenu

DmenuSelect

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values for the label's for and select's id.

Using invalid characters or spaces in the id.

The for attribute in the label and the id of the select must match for accessibility and correct linking.

5fill in blank

hard

Fill all three blanks to create a Bootstrap input group with a text input and a button.

Bootsrap

<div class="input-group mb-3">
  <input type="[1]" class="form-control" placeholder="Search" aria-label="Search input">
  <button class="btn btn-outline-[2]" type="button" id="button-addon2">[3]</button>
</div>

Drag options to blanks, or click blank then click option'

Atext

Bprimary

CGo

Dsearch

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect input types like 'search' which is valid but not the expected answer here.

Using button colors that do not exist in Bootstrap like 'outline-red'.

Using button text that is too long or unclear.

The input type should be text for a search box. The button uses the Bootstrap color primary for styling. The button text is 'Go' to indicate action.

Practice

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

easy

A. To format tables

B. To create navigation bars

C. To add animations to buttons

D. To style input elements like text boxes consistently

Solution

1. Step 1: Understand the role of form-control

   The form-control class is used to style form inputs such as text boxes, textareas, and selects.

2. Step 2: Identify what it does visually

   It makes form inputs look consistent and user-friendly across browsers.

3. Final Answer:

   To style input elements like text boxes consistently -> Option D

4. Quick Check:

   Bootstrap form-control styles inputs [OK]

Hint: Remember: form-control styles input fields [OK]

Common Mistakes:

• Confusing form-control with navigation or buttons
• Thinking it adds animations
• Assuming it styles tables

2. Which of the following is the correct way to apply Bootstrap styling to a text input field?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Bootstrap's class for inputs

   Bootstrap uses the class form-control to style text inputs.

2. Step 2: Match the correct class name

   Only uses form-control correctly.

3. Final Answer:

   <input type="text" class="form-control"> -> Option B

4. Quick Check:

   Bootstrap input class = form-control [OK]

Hint: Use exactly 'form-control' class for inputs [OK]

Common Mistakes:

• Using incorrect class names like form-input or input-style
• Swapping words in class names
• Missing the class attribute

3. What will be the visual result of this code snippet?

<input type="email" class="form-control" placeholder="Enter email" aria-label="Email address">

medium

A. A styled email input box with placeholder text and accessible label

B. A plain input box without any styling or placeholder

C. A button labeled 'Enter email'

D. An error because aria-label is invalid here

Solution

1. Step 1: Analyze the input element

   The input is of type email, has the Bootstrap class form-control, a placeholder, and an ARIA label.

2. Step 2: Understand the visual and accessibility effects

   The form-control class styles the input nicely. The placeholder shows faint text inside the box. The aria-label helps screen readers identify the input as 'Email address'.

3. Final Answer:

   A styled email input box with placeholder text and accessible label -> Option A

4. Quick Check:

   form-control + placeholder + aria-label = styled accessible input [OK]

Hint: Placeholder shows text; aria-label helps screen readers [OK]

Common Mistakes:

• Thinking aria-label causes errors
• Confusing input with button
• Ignoring placeholder effect

4. Identify the error in this Bootstrap form control code:

<input type="text" class="form-control" placeholder="Name" aria-lable="User name">

medium

A. The attribute 'aria-lable' is misspelled

B. The class name 'form-control' is misspelled

C. The placeholder attribute is invalid

D. The input type 'text' is not supported

Solution

1. Step 1: Check class and attributes

   The class form-control is spelled correctly. The placeholder is valid. The input type 'text' is supported.

2. Step 2: Spot the typo in ARIA attribute

   The attribute aria-lable is misspelled; it should be aria-label.

3. Final Answer:

   The attribute 'aria-lable' is misspelled -> Option A

4. Quick Check:

   ARIA attribute spelling matters [OK]

Hint: Check ARIA attribute spelling carefully [OK]

Common Mistakes:

• Misspelling aria-label as aria-lable
• Assuming placeholder is wrong
• Thinking form-control is misspelled

5. You want to create a dropdown menu for selecting a country using Bootstrap. Which code snippet correctly applies Bootstrap form control classes and accessibility best practices?

hard

A. <select class="form-select" aria-label="Country selector"><option>USA</option><option>Canada</option></select>

B. <select class="form-control" aria-labelledby="country"><option>USA</option><option>Canada</option></select>

C. <select class="form-select" aria-label="Country selector"><option selected>Select country</option><option>USA</option><option>Canada</option></select>

D. <select class="form-control" aria-label="country"><option>USA</option><option>Canada</option></select>

Solution

1. Step 1: Identify correct Bootstrap class for dropdowns

   Bootstrap uses form-select for styling select dropdowns, not form-control.

2. Step 2: Check accessibility and usability

   Using aria-label="Country selector" provides an accessible name. Including a default option like Select country with selected guides users.

3. Step 3: Compare options

   <select class="form-select" aria-label="Country selector"><option selected>Select country</option><option>USA</option><option>Canada</option></select> uses form-select, has an accessible label, and a default selected option, making it best practice.

4. Final Answer:

   <select class="form-select" aria-label="Country selector"><option selected>Select country</option><option>USA</option><option>Canada</option></select> -> Option C

5. Quick Check:

   Dropdown = form-select + aria-label + default option [OK]

Hint: Use form-select for dropdowns with aria-label and default option [OK]

Common Mistakes:

• Using form-control instead of form-select for selects
• Missing accessible labels
• Not providing a default option