Labels and placeholders in HTML - Mini Project: Build & Apply

Creating a Simple Form with Labels and Placeholders

📖 Scenario: You are building a simple contact form for a website. The form needs clear labels and placeholders to help users understand what information to enter.

🎯 Goal: Create a form with two input fields: one for the user's name and one for their email. Each input must have a proper label and a placeholder text inside the input box.

📋 What You'll Learn

Use semantic HTML form elements

Add a label for each input field

Use the for attribute in labels linked to input ids

Add placeholder text inside each input field

Ensure accessibility by linking labels and inputs correctly

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites for collecting user information. Proper labels and placeholders improve user experience and accessibility.

💼 Career

Knowing how to build accessible forms is essential for web developers and front-end engineers.

1

Create the form skeleton

Write the basic HTML form structure with a <form> element containing two input fields: one with id="name" and one with id="email". Do not add labels or placeholders yet.

HTML

Need a hint?

Start by writing a <form> tag. Inside it, add two <input> tags with the exact id attributes name and email.

2

Add labels for inputs

Add a <label> for each input. The label for the name input should have for="name" and the text "Name:". The label for the email input should have for="email" and the text "Email:".

HTML

Need a hint?

Use the <label> tag with the for attribute matching the input's id. Write the label text exactly as "Name:" and "Email:".

3

Add placeholder text inside inputs

Add a placeholder attribute to the name input with the value "Enter your full name" and to the email input with the value "Enter your email address".

HTML

  Name:
  
  Email:
  
  

Need a hint?

Add the placeholder attribute inside each <input> tag with the exact text given.

4

Complete the form with a submit button

Add a <button> inside the form with type="submit" and the text "Send".

HTML

  Name:
  
  Email:
  
  

Need a hint?

Add a <button> tag with type="submit" and the text "Send" inside the form.