0
0
HTMLmarkup~5 mins

Purpose of forms 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 users to sign up for a newsletter.
When you need to collect feedback or contact details.
When users must log in with a username and password.
When people fill out surveys or order products online.
When you want to let users search for something on your site.
Syntax
HTML
<form action="URL" method="GET or POST">
  <!-- form fields like input, textarea, select -->
  <button type="submit">Send</button>
</form>

The action attribute tells where to send the form data.

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

Examples
A simple form to send a username using POST method.
HTML
<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="Your name">
  <button type="submit">Send</button>
</form>
A search form that sends the query in the URL using GET method.
HTML
<form action="/search" method="GET">
  <input type="search" name="query" placeholder="Search here">
  <button type="submit">Search</button>
</form>
Sample Program

This is a simple contact form with fields for name, email, and message. It uses labels for accessibility and placeholders to guide users.

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="/submit-contact" method="POST" aria-label="Contact form">
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name" required placeholder="Your full name"><br><br>

      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email" required placeholder="you@example.com"><br><br>

      <label for="message">Message:</label><br>
      <textarea id="message" name="message" rows="4" required placeholder="Write your message here"></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.

Placeholders give hints but do not replace labels.

Summary

Forms collect information from users to send to websites.

They use <form> with action and method attributes.

Labels and accessibility features help all users interact with forms easily.