Form submission basics in HTML - Mini Project: Build & Apply

Form Submission Basics

📖 Scenario: You are creating a simple contact form for a website. Visitors will enter their name and email address to get in touch.

🎯 Goal: Build a basic HTML form with fields for name and email, and a submit button that sends the data.

📋 What You'll Learn

Use semantic HTML form elements

Include accessible labels for each input

Add a submit button

Set the form to send data using the POST method

Make sure the form has an action attribute pointing to '/submit'

💡 Why This Matters

🌍 Real World

Forms are everywhere on the web for collecting user information, like contact details, feedback, or orders.

💼 Career

Understanding form basics is essential for web developers to build interactive and accessible websites.

1

Create the HTML form skeleton

Write the opening <form> tag with action="/submit" and method="post". Then add two input fields: one text input with id="name" and one email input with id="email". Do not add labels or buttons yet.

HTML

Need a hint?

Start by writing the <form> tag with the correct action and method attributes. Then add two input fields with the exact id and name attributes.

2

Add accessible labels for inputs

Add a <label> for the name input with for="name" and text "Name:". Add another <label> for the email input with for="email" and text "Email:". Place each label before its input field.

HTML

Need a hint?

Use the <label> tag with the for attribute matching the input's id. Put the label text inside the label tags.

3

Add a submit button

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

HTML

  Name:
  
  Email:
  
  

Need a hint?

Use a <button> tag with type="submit" and put the text "Send" inside it.

4

Add basic accessibility and structure

Wrap the form inside a <main> element. Add a heading <h1> above the form with the text "Contact Us".

HTML

  
  
    Name:
    
    Email:
    
    Send
  

Need a hint?

Use a <main> tag to wrap the form. Add a heading <h1> with the text "Contact Us" above the form.