0
0
HTMLmarkup~5 mins

Form submission basics in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Forms let people send information to a website. This helps websites get data like names, emails, or messages.

When you want users to sign up or log in.
When collecting feedback or contact details.
When users need to search or filter content.
When submitting orders or booking information.
When users fill out surveys or questionnaires.
Syntax
HTML
<form action="URL" method="GET|POST">
  <!-- form fields here -->
  <button type="submit">Send</button>
</form>

action tells where the form data goes.

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

Examples
A simple form sending username data using POST method.
HTML
<form action="/submit" method="POST">
  <input type="text" name="username" />
  <button type="submit">Send</button>
</form>
A search form sending data via URL using GET method.
HTML
<form action="/search" method="GET">
  <input type="search" name="query" />
  <button type="submit">Search</button>
</form>
Sample Program

This is a simple contact form with name, email, and message fields. It uses POST to send data to a server. Labels and ARIA help screen readers. The form is easy to use on phones and computers.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Simple Contact Form</title>
</head>
<body>
  <main>
    <h1>Contact Us</h1>
    <form action="https://example.com/submit" 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 tags for better accessibility.

Use required attribute to make sure users fill important fields.

Choose POST for sensitive data, GET for simple searches.

Summary

Forms collect user information and send it to a website.

Use action to set where data goes and method to choose how it is sent.

Labels and accessibility features make forms easier for everyone to use.