Form control basics in Bootsrap - Mini Project: Build & Apply

Form control basics

📖 Scenario: You are creating a simple contact form for a website using Bootstrap. The form will collect a user's name and email address.

🎯 Goal: Build a basic Bootstrap form with input fields for Name and Email, each with proper labels and Bootstrap styling.

📋 What You'll Learn

Use Bootstrap 5 classes for styling the form controls

Include <label> elements linked to their respective inputs

Use form-control class on input fields

Make sure the form is accessible with proper for and id attributes

Use semantic HTML5 elements

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites for collecting user information like contact details, sign-ups, and feedback.

💼 Career

Knowing how to build accessible, styled forms with Bootstrap is a key skill for front-end web developers.

1

Create the basic HTML form structure

Create a <form> element with two input fields: one with id="nameInput" and one with id="emailInput". Do not add labels or classes yet.

Bootsrap

Need a hint?

Start with a <form> tag and add two <input> elements with the exact id attributes.

2

Add labels for the input fields

Add a <label> for the name input with for="nameInput" and text "Name". Add another <label> for the email input with for="emailInput" and text "Email".

Bootsrap

  Name
  
  Email
  
  

Need a hint?

Use <label> tags with the for attribute matching the input id.

3

Add Bootstrap form-control classes

Add the Bootstrap class form-control to both input fields with id="nameInput" and id="emailInput".

Bootsrap

  Name
  
  Email
  
  

Need a hint?

Add class="form-control" inside each <input> tag.

4

Wrap inputs in Bootstrap mb-3 divs and add accessibility

Wrap each label and input pair inside a <div> with class mb-3 for spacing. Add aria-label attributes to inputs matching their labels: "Name" for nameInput and "Email" for emailInput.

Bootsrap

  
    Name
    
  
  
    Email
    
  
  

Need a hint?

Use <div class="mb-3"> to group each label and input. Add aria-label attributes to inputs for accessibility.