HTML Forms with Example

HTML Forms are the foundation of user interaction on the web. They allow visitors to input information, such as names, emails, passwords, or feedback, and send it to a server for processing.

Forms make websites dynamic and interactive. They are essential for:

User registration and login
Search bars
Feedback and contact forms
Online surveys
Payment gateways
E-commerce checkouts

Without forms, a website would be just a static page with no user engagement.

Basic Syntax of an HTML Form

<form action="submit_page.php" method="post">
  <!-- Form elements go here -->
</form>

Explanation:

Attribute	Description
action	Specifies where to send the form data (server or file).
method	Defines how the data will be sent – `GET` or `POST`.
name	Gives the form a name for identification.
target	Specifies where to display the response after submission.

Form Submission Methods

Method	Description	Data Visibility
GET	Appends form data to the URL. Used for searching or filtering.	Visible in address bar
POST	Sends form data invisibly inside the request body. Best for passwords, login, or sensitive data.	Hidden from users

Example of GET:

https://example.com/search?query=HTML

Example of POST:

Data sent internally – not shown in URL.

Common HTML Form Elements

HTML provides various input elements to capture user data.

1. <input> Element

The most commonly used tag in forms.

Types of input:

Type	Description
text	For single-line input
password	Hides typed characters
email	Accepts only valid email formats
number	Allows numeric input
checkbox	Multiple choices allowed
radio	Single choice among multiple options
file	Uploads files
submit	Sends the form data
reset	Clears the input fields

2. <label> Element

Labels improve accessibility and help screen readers understand input fields.

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

The for attribute connects the label to the corresponding input ID.

3. <textarea> Element

Used for multi-line text input (like comments or messages).

<textarea name="message" rows="5" cols="30" placeholder="Enter your message"></textarea>

4. <select> Dropdown List

Used when users need to choose from multiple options.

<select name="country">
  <option value="india">India</option>
  <option value="usa">USA</option>
  <option value="uk">UK</option>
</select>

5. <button> Element

Creates clickable buttons inside a form.

<button type="submit">Submit</button>
<button type="reset">Reset</button>

Complete HTML Form Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn how to create HTML forms with examples of input fields, labels, buttons, and form submission methods.">
    <meta name="keywords" content="HTML forms, HTML form elements, input tags, form attributes, GET POST methods, HTML tutorial">
    <meta name="author" content="Dharmesh Kundariya">
    <title>HTML Form Example</title>
</head>

<body>
    <h1>HTML Form Example</h1>
    <form action="submit_form.php" method="post"> <label for="name">Full Name:</label><br> <input type="text" id="name" name="fullname" placeholder="Enter your name" required><br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" placeholder="Enter your email" required><br><br> <label for="country">Country:</label><br> <select id="country" name="country">
            <option value="india">India</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select><br><br> <label>Gender:</label><br> <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female<br><br> <label for="message">Message:</label><br> <textarea id="message" name="message" rows="4" cols="30" placeholder="Write your message..."></textarea><br><br> <input type="submit" value="Submit Form"> <input type="reset" value="Clear Form"> </form>
</body>

</html>

Example of GET vs POST in Action

GET Example

<form action="search.php" method="get">
  <input type="text" name="query" placeholder="Search...">
  <button type="submit">Search</button>
</form>

POST Example

<form action="login.php" method="post">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Login</button>
</form>

GET shows data in the URL, while POST keeps it hidden.

Useful Form Attributes

Attribute	Description	Example
action	Defines where to send the form data after submission.	`action="form.php"`
method	Specifies how the form data is sent — usually `GET` or `POST`.	`method="post"`
autocomplete	Enables or disables browser auto-fill suggestions for input fields.	`autocomplete="off"`
enctype	Defines how the form data should be encoded (used when uploading files).	`enctype="multipart/form-data"`
target	Specifies where to display the response after submitting the form (e.g., new tab, same tab, frame).	`target="_blank"`
novalidate	Temporarily disables browser form validation when submitting.	`novalidate`

HTML URL Encode HTML Form Attributes