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

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

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:
  
  

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:
  
  

Hint

The submit button sends the form data to the server.

Practice

1. What is the main purpose of an HTML <form> element on a webpage?

easy

A. To collect information from users and send it to a server

B. To display images on the webpage

C. To create navigation menus

D. To style the webpage with colors and fonts

Solution

1. Step 1: Understand the role of the <form> element

   The <form> tag is designed to gather user input like text, selections, or files.

2. Step 2: Identify what happens with the collected data

   Forms send this data to a server for processing, such as saving or responding.

3. Final Answer:

   To collect information from users and send it to a server -> Option A

4. Quick Check:

   Forms collect user data [OK]

Hint: Forms gather and send user info to servers [OK]

Common Mistakes:

• Thinking forms are for styling or layout
• Confusing forms with navigation elements
• Believing forms display images

2. Which of the following is the correct way to start a form that sends data using the POST method to 'submit.php'?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check the correct attributes for form tag

   The action attribute defines where to send data; method defines how (GET or POST).

2. Step 2: Verify correct syntax and attribute values

   <form method='post' action='submit.php'> uses method='post' and action='submit.php' correctly and in proper order.

3. Final Answer:

   <form method='post' action='submit.php'> -> Option A

4. Quick Check:

   Correct form syntax [OK]

Hint: Use method='post' and action='URL' inside <form> [OK]

Common Mistakes:

• Using 'get' instead of 'post' when POST is needed
• Wrong attribute names like 'submit' instead of 'action'
• Invalid method values like 'send'

3. What will happen when the user clicks the submit button in this form?

<form action='/submit' method='post'>
  <label for='name'>Name:</label>
  <input type='text' id='name' name='username' />
  <button type='submit'>Send</button>
</form>

medium

A. The browser navigates to '/submit' without sending data

B. The form resets all fields to empty

C. The browser sends the entered name to '/submit' using POST method

D. Nothing happens because the button type is incorrect

Solution

1. Step 1: Understand the form's action and method

   The form sends data to '/submit' using POST when submitted.

2. Step 2: Check the submit button behavior

   The button with type='submit' triggers sending the form data.

3. Final Answer:

   The browser sends the entered name to '/submit' using POST method -> Option C

4. Quick Check:

   Submit button sends data [OK]

Hint: Submit button sends form data to action URL [OK]

Common Mistakes:

• Thinking submit resets the form
• Believing data is not sent on submit
• Confusing button types

4. Identify the error in this form code:

<form action='submit.php' method='post'>
  <input type='text' id='email' name='email'>
  <label for='email'>Email</label>
  <button type='submit'>Submit</button>
</form>

medium

A. The label is not correctly linked to the input

B. The input tag is missing a closing slash

C. The method attribute should be 'get' instead of 'post'

D. The label should come before the input for accessibility

Solution

1. Step 1: Check label and input order for accessibility

   Labels should appear before inputs or wrap them to help screen readers.

2. Step 2: Confirm label's for attribute matches input's id

   The label's for='email' matches input's id='email', so linking is correct.

3. Final Answer:

   The <label> should come before the input for accessibility -> Option D

4. Quick Check:

   Label before input improves accessibility [OK]

Hint: Place labels before inputs for better accessibility [OK]

Common Mistakes:

• Ignoring label position and accessibility
• Thinking input tags always need a closing slash
• Changing method without reason

5. You want to create a form that collects a user's name and email, ensures both fields are required, and sends data using POST to '/register'. Which of the following is the best complete form code?

hard

A. \n \n \n Submit\n

B. \n Name:\n \n Email:\n \n Register\n

C. \n \n \n Send\n

D. \n Name\n \n Email\n \n Register\n

Solution

1. Step 1: Check form attributes for sending data

   The form must use action='/register' and method='post' to send data correctly.

2. Step 2: Verify input fields and required attribute

   Inputs for name and email have matching labels, correct types, and required to ensure user fills them.

3. Step 3: Confirm button type and labels

   The submit button has type='submit' and labels use for linked to inputs for accessibility.

4. Final Answer:

   Complete form with action, method, required fields, and labels -> Option B

5. Quick Check:

   Form with required fields and POST [OK]

Hint: Use required inputs and method='post' with labels for best form [OK]

Common Mistakes:

• Using GET instead of POST for sensitive data
• Missing required attribute on inputs
• Labels not linked to inputs
• Omitting method attribute