0
0
HTMLmarkup~5 mins

Form structure in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Forms let people send information to a website. They help websites collect data like names, emails, or messages.

When you want visitors to sign up for a newsletter.
When you need users to send feedback or questions.
When collecting order details for an online shop.
When asking users to log in with a username and password.
When gathering survey answers from visitors.
Syntax
HTML
<form action="URL" method="GET|POST">
  <!-- form controls like inputs, buttons go here -->
</form>

action tells where the form data goes when submitted.

method decides how data is sent: GET adds data to the URL, POST sends it hidden.

Examples
A simple form sending data to '/submit' using POST.
HTML
<form action="/submit" method="POST">
  <input type="text" name="username">
  <button type="submit">Send</button>
</form>
A search form sending data with GET, so the query appears in the URL.
HTML
<form action="/search" method="GET">
  <input type="search" name="query">
  <button type="submit">Search</button>
</form>
Sample Program

This is a complete contact form with name, email, and message fields. It uses labels for accessibility and requires all fields before sending.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>
</head>
<body>
  <main>
    <h1>Contact Us</h1>
    <form action="/submit-contact" method="POST" aria-label="Contact form">
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name" required><br><br>

      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email" required><br><br>

      <label for="message">Message:</label><br>
      <textarea id="message" name="message" rows="4" required></textarea><br><br>

      <button type="submit">Send Message</button>
    </form>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use <label> with inputs for better accessibility.

Use required attribute to make sure users fill important fields.

Use semantic elements like <main> and proper heading levels for structure.

Summary

Forms collect user information and send it to a server.

The <form> tag wraps all inputs and buttons.

Use action and method to control where and how data is sent.