Form structure in HTML - Mini Project: Build & Apply

Building a Simple Contact Form

📖 Scenario: You want to create a simple contact form on a website so visitors can send their name and message.

🎯 Goal: Build a basic HTML form with fields for name and message, and a submit button.

📋 What You'll Learn

Use semantic HTML form elements

Include labels for accessibility

Add a text input for the visitor's name

Add a textarea for the visitor's message

Add a submit button

💡 Why This Matters

🌍 Real World

Contact forms are common on websites to let visitors send messages or inquiries easily.

💼 Career

Knowing how to build accessible and semantic forms is essential for web developers working on user interfaces.

1

Create the HTML form skeleton

Write the opening <form> tag with action="#" and method="post", then add the closing </form> tag.

HTML

Need a hint?

The form tag needs an action attribute and a method attribute.

2

Add a label and text input for the visitor's name

Inside the <form>, add a <label> with for="name" and text "Name:". Then add an <input> with type="text", id="name", and name="name".

HTML

Need a hint?

Labels help screen readers and link to inputs using the for attribute matching the input's id.

3

Add a label and textarea for the visitor's message

Inside the <form>, after the name input, add a <label> with for="message" and text "Message:". Then add a <textarea> with id="message" and name="message".

HTML

  Name:
  
  

Need a hint?

The textarea lets visitors write longer messages. It also needs a label for accessibility.

4

Add a submit button to the form

Inside the <form>, after the textarea, add a <button> with type="submit" and text "Send".

HTML

  Name:
  
  Message:
  
  

Need a hint?

The submit button sends the form data to the server or page specified in the form's action.