Purpose of forms in HTML - Mini Project: Build & Apply

Creating a Simple Contact Form

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

🎯 Goal: Build a basic HTML form that collects a user's name and message with a submit button.

📋 What You'll Learn

Use semantic HTML form elements

Include input fields for name and message

Add a submit button

Use accessible labels for inputs

Structure the form inside a

element

💡 Why This Matters

🌍 Real World

Contact forms let website visitors send messages or requests easily.

💼 Career

Web developers often build forms to gather user data for feedback, orders, or support.

1

Create the HTML form skeleton

Write the opening <form> tag with an action attribute set to "/submit" and a method attribute set to "post". Then write the closing </form> tag.

HTML

Need a hint?

The form tag needs an action URL and a method to send data.

2

Add input for user'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 text to inputs.

3

Add textarea for user's message

Below 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?

Textarea allows users to write longer messages.

4

Add a submit button

At the end of the form, 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.