HTML Form Attributes Tutorial for Beginners – Simple Explanation

HTML forms have several attributes that control how they behave. These attributes tell the browser where to send the data, how to send it, and where to show the response.

The Action Attribute

The action attribute defines where the form data should be sent when the user clicks submit. Usually, this is a file on the server that processes the data.

If you omit the action attribute, the form data is sent to the current page itself.

Tip: If you are just testing HTML forms locally and do not have a server, you can use action="#" which sends the data to the same page (nothing will happen, but the form structure works).

The Target Attribute

The target attribute specifies where to display the response after submitting the form. By default (_self), the response opens in the same tab.

Target Value	Description
`_blank`	Opens the response in a new tab or window
`_self`	Opens the response in the same tab (default)
`_parent`	Opens the response in the parent frame
`_top`	Opens the response in the full body of the window

The Method Attribute

The method attribute tells the browser how to send the form data. There are two main methods: GET and POST.

GET Method

With GET, the form data is appended to the URL. You can see it in the address bar. This is good for search forms or when you want users to bookmark the results.

POST Method

With POST, the form data is sent in the background (in the HTTP request body). It does not appear in the URL. This is safer and has no size limits.

GET vs POST: When to Use Which

	GET	POST
Data visibility	Visible in URL	Not visible in URL (in request body)
Security	Not secure (do not use for passwords)	More secure for sensitive data
Size limit	Limited (2048 characters max)	No size limit (can send large files)
Bookmarkable	Yes, users can bookmark the result	No, cannot bookmark POST requests
Best for	Search forms, filters, queries	Login forms, registrations, file uploads

Tip: Always use POST when the form contains sensitive or personal information like passwords, credit card numbers, or addresses. Use GET for search boxes where users might want to bookmark the results.

The Autocomplete Attribute

The autocomplete attribute tells the browser whether to remember and suggest previously entered values. This is helpful for forms that users fill out repeatedly.

You can also turn autocomplete off for the entire form or for specific fields:

Autocomplete Off

<form action="/action_page.php" method="post" autocomplete="off">

Note: Some browsers may ignore autocomplete for certain sensitive fields (like passwords) for security reasons.

The Novalidate Attribute

The novalidate attribute tells the browser NOT to validate the form data before submitting. This means the browser will not check if required fields are filled or if emails are correctly formatted.

This can be useful when you want to use your own custom validation with JavaScript.

Warning: Turning off browser validation does NOT mean you can skip server-side validation. Always validate data on the server for security!

Complete Form Attributes Example

Here is a complete form using multiple attributes together:

<!DOCTYPE html>
<html>
<head>
<style>
.demo-form-container {
  background-color: #f0f0f0;
  padding: 30px;
  border-radius: 10px;
  max-width: 500px;
  margin: 0 auto;
}
.demo-form-group {
  margin-bottom: 20px;
}
.demo-form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}
.demo-form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}
.demo-submit-btn {
  background-color: #04aa6d;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}
.demo-submit-btn:hover {
  background-color: #038a57;
}
@media (max-width: 600px) {
  .demo-form-container {
    padding: 20px;
  }
}
</style>
</head>
<body>

<div class="demo-form-container">
  <h2>Create Your ModafVibe Account</h2>
  <p>Join millions of users on ModafVibe</p>

<div class="demo-form-group">
      <label class="demo-form-label" for="email">Email Address</label>
      <input class="demo-form-input" type="email" id="email" name="email" required placeholder="you@example.com">
    </div>

<div class="demo-form-group">
      <label class="demo-form-label" for="password">Password</label>
      <input class="demo-form-input" type="password" id="password" name="password" required placeholder="Create a strong password">
    </div>

<div class="demo-form-group">
      <label class="demo-form-label" for="country">Country</label>
      <input class="demo-form-input" type="text" id="country" name="country" placeholder="Your country" autocomplete="country-name">
    </div>

<button type="submit" class="demo-submit-btn">Create Account</button>
  </form>

<p class="demo-note-text" style="font-size: 12px; color: #666; margin-top: 15px;">
    This form uses: action=”/action_page.php”, method=”post”, target=”_blank”, autocomplete=”on”
  </p>
</div>

</body>
</html>

Quick Summary

action – Where to send the form data (usually a server-side script)
target – Where to display the response (_self or _blank)
method – How to send data (get or post)
autocomplete – Whether browser should suggest previous values
novalidate – Turn off browser validation
Use POST for sensitive data and GET for search forms
Always validate data on the server, even if you use novalidate

What Just Happened? Let Me Explain

The action attribute points to a backend script (like /action_page.php). That script receives the data and processes it (saves to database, sends email, etc.).
Using target="_blank" is nice when you want users to keep the original form open while seeing the result in a new tab.
GET puts data in the URL. You can see it. POST hides it. That is why POST is for passwords.
Autocomplete saves users time by remembering what they typed before. Turn it off only for very sensitive fields.
The novalidate attribute is useful when you want to build your own validation with JavaScript. But always validate on the server too.

Tip: When building real websites, always use method="post" for login, registration, and contact forms. Use method="get" for search boxes and filters where users might share or bookmark the URL.

HTML Form Attributes Reference

Here are all the form attributes we covered in this chapter:

Attribute	Description
`action`	Specifies where to send the form data
`target`	Specifies where to display the response
`method`	Specifies HTTP method (get or post)
`autocomplete`	Whether form should have autocomplete on/off
`novalidate`	Turns off browser validation when present