HTML Forms: Action & Method

Master form submission with action and method attributes - the backbone of user interaction on the web.

Beginner Friendly20 min readInteractive DemosReal Projects

📋 What You'll Learn

🎯Form Basics

🚀Action Attribute

📨GET Method

🔒POST Method

🆚GET vs POST

🎨Form Styling

🛡️Security

⚡Best Practices

1📝 Form Basics - The Building Blocks

Forms are essential for user interaction - they collect data, handle logins, process payments, and much more. Every form needs to know where to send data and how to send it.

💡 Key Insight: The action and method attributes work together to determine what happens when a user submits a form.

html

<form action="/submit-data" method="POST">
  <!-- Form fields go here -->
  <input type="text" name="username" placeholder="Enter username">
  <button type="submit">Send Data</button>
</form>

🎯 Action Attribute

Specifies where to send the form data when submitted. This can be a URL, file path, or server endpoint.

📨 Method Attribute

Defines how to send the data - either GET(visible in URL) or POST (hidden in request body).

2🚀 Action Attribute - Where Data Goes

📍 Action Values Explained

action="/login"

Sends to /login on same domain

Most common - relative URLs

action="https://api.example.com/submit"

Sends to external server

Cross-domain submissions

action="process.php"

Sends to PHP file in same folder

Server-side processing

action="#"

Sends to current page

Self-processing forms

✅ Correct Usage

html

<!-- Send to login endpoint -->
<form action="/api/login" method="POST">

<!-- Process contact form -->
<form action="contact.php" method="POST">

<!-- Submit to external service -->
<form action="https://forms.example.com" method="POST">

❌ Common Mistakes

html

<!-- Missing action (stays on same page) -->
<form method="POST">

<!-- Invalid URL -->
<form action="undefined" method="POST">

<!-- Wrong file path -->
<form action="../wrong-folder/process.php" method="POST">

3📨 Method Attribute - How Data Travels

🔍 GET Method

Data is appended to the URL as query parameters. Perfect for search forms, filters, and any action that doesn't change server data.

Example URL after submission:

/search?query=html+forms&category=tutorials&sort=latest

html

<!-- Search Form Example -->
<form action="/search" method="GET">
  <input type="text" name="query" placeholder="Search tutorials...">
  <select name="category">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </select>
  <button type="submit">Search</button>
</form>

🔒 POST Method

Data is sent in the request body, not visible in URL. Essential for login forms, registration, payments, and any action that changes server data.

Data is hidden in request body:

username=johndoe&password=secure123&email=john@example.com

html

<!-- Registration Form Example -->
<form action="/register" method="POST">
  <input type="text" name="username" placeholder="Username" required>
  <input type="email" name="email" placeholder="Email" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit">Create Account</button>
</form>

4🆚 GET vs POST - When to Use Which?

Feature	GET Method	POST Method
Data Visibility	Visible in URL	Hidden in body
Data Length	Limited (2048 chars)	Unlimited
Security	Less secure	More secure
Caching	Can be cached	Not cached
Bookmarking	Can be bookmarked	Cannot be bookmarked
Browser History	Stored in history	Not stored
Use Cases	Search, Filters	Login, Registration
Data Type	ASCII characters only	Any data type

✅ Use GET When:

• Retrieving data (searching, filtering)
• The action is safe and idempotent
• You want shareable URLs
• Data is not sensitive
• Small amounts of data

✅ Use POST When:

• Submitting sensitive data (passwords)
• Uploading files
• Large amounts of data
• Changing server state
• Creating new resources

5🎮 Interactive Form Builder

Configure Your Form

🚀 Action URL

📨 HTTP Method

GET - For searches and filtersPOST - For secure data submission

Live Preview & Code

<form action="/submit" method="GET">
  <!-- Form fields -->
</form>

Your Learning Progress

Forms: Action & Method75%

3/4

Topics Done

15m

Time Spent

📚 Quick Reference

action="url"

Where to send form data

method="GET"

Data in URL, for searches

method=&qupt;POST"

Data in body, for security

🎯 Common Form Patterns

SearchGET

?q=query

LoginPOST

Hidden credentials

ContactPOST

Email, message

RegistrationPOST

User details

FiltersGET

?category=html&sort=new

🚀 Continue Learning

Form Input Types →Form Validation →Form Styling with CSS →

💻 Practice Exercise

Build a Contact Form

Create a contact form that sends data to /contact.php using the POST method. Include fields for name, email, and message.

Your form code will appear here

✅ Requirements

• Use correct form attributes
• Include name, email, message fields
• Add a submit button
• Use POST method
• Set action to "/contact.php"

💡 Solution Hint

html

<form action="/contact.php" method="POST">
  <!-- Add your form fields here -->
</form>