HTML — Form Attributes

What & Why: Understanding Form Attributes

When you create a form, you’re not just putting input boxes on a page.
The attributes you add to the <form> tag decide what happens when a visitor clicks Submit.
Think of attributes as the settings on a remote control: they tell the form where to send data, how to send it, and how the browser should behave.

Common Attributes

Attribute	Purpose	Typical Value
action	Where the data goes	/process.php
method	How the data is sent	GET or POST
target	Where the response appears	_blank, _self, _parent, _top
enctype	How data is encoded	application/x-www-form-urlencoded, multipart/form-data, text/plain
novalidate	Turn off built‑in validation	(no value)
autocomplete	Let the browser guess values	on or off
name	Gives the form an identifier	contactForm
id	Unique ID for CSS/JS	signupForm

---

Setting the Destination: action

action tells the browser where to send the form data when the user submits.

<form action="/submit.php" method="post">
  <label>Name: <input type="text" name="name"></label>
  <button type="submit">Send</button>
</form>

What the browser displays

The form shows a single text box labeled “Name” and a button that says “Send.” When clicked, the browser will send the name to the server address /submit.php.

---

Choosing the Transfer Method: method

The method attribute decides how the data travels.

Method	Data in URL?	When to use
GET	Yes (in query string)	Small, non‑sensitive data, bookmarking
POST	No (in request body)	Larger or sensitive data

<form action="/search" method="get">
  <label>Query: <input type="search" name="q"></label>
  <button type="submit">Search</button>
</form>

What the browser displays

The form displays a search box. After submitting, the URL becomes something like /search?q=example.

---

Where to Show the Response: target

target tells the browser which browsing context (window or tab) to open for the response.

<form action="/report" method="get" target="_blank">
  <label>Report: <input type="text" name="report"></label>
  <button type="submit">Open Report</button>
</form>

Good to know: target="_blank" opens the result in a new tab, which is useful for links that might take the user away from your site.

What the browser displays

After clicking “Open Report,” the current page stays, and a new tab opens with the report result.

---

Sending Files: enctype

When a form includes <input type="file">, the default encoding (application/x-www-form-urlencoded) won’t work. Use multipart/form-data.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label>Choose file: <input type="file" name="photo"></label>
  <button type="submit">Upload</button>
</form>

What the browser displays

The form shows a file picker. After selecting a file and submitting, the file data is wrapped correctly for server processing.

---

Turning Validation Off: novalidate

If you want to handle validation yourself (via JavaScript or server), add novalidate. The browser will skip its built‑in checks.

<form action="/custom" method="post" novalidate>
  <label>Email: <input type="email" name="email"></label>
  <button type="submit">Send</button>
</form>

Common mistake: Forgetting that novalidate only disables the browser’s checks; your own code still needs to validate.

What the browser displays

The form behaves like a normal one, but if you leave the email field empty, the browser won’t show an error message.

---

Autocomplete Behavior: autocomplete

autocomplete="off" prevents the browser from suggesting previous entries. Useful for sensitive fields like passwords.

<form action="/login" method="post">
  <label>Username: <input type="text" name="user" autocomplete="on"></label>
  <label>Password: <input type="password" name="pass" autocomplete="off"></label>
  <button type="submit">Login</button>
</form>

What the browser displays

The username field will remember past values, but the password field will not offer suggestions.

---

Naming and Identifying Forms: name & id

name gives the form a logical identifier for server‑side scripts. id is a unique DOM identifier for CSS or JavaScript.

<form action="/feedback" method="post" name="feedbackForm" id="feedbackForm">
  <label>Thoughts: <textarea name="comments"></textarea></label>
  <button type="submit">Send Feedback</button>
</form>

What the browser displays

A simple text area labeled “Thoughts” and a button that says “Send Feedback.”

---

Putting It All Together

<form action="/register" method="post"
      enctype="multipart/form-data"
      target="_self"
      autocomplete="off"
      novalidate
      name="registration"
      id="registrationForm">
  <label>Username: <input type="text" name="user"></label><br>
  <label>Password: <input type="password" name="pass"></label><br>
  <label>Profile Pic: <input type="file" name="avatar"></label><br>
  <button type="submit">Register</button>
</form>

Good to know: The order of attributes does not matter, but placing them logically improves readability.

What the browser displays

The form shows three input fields: a text box for username, a password field, and a file picker for a profile picture, followed by a “Register” button. When submitted, all data is sent to /register using POST, encoded as multipart, and the response appears in the same tab.

---

Common Mistakes Checklist

• Forgot to set action → data never reaches the server.
• Used GET for passwords or large uploads → data exposed in URL.
• enctype missing on file uploads → server receives empty data.
• novalidate used without custom validation → user can submit bad data.
• autocomplete="off" on non-sensitive fields → poor user experience.

---

Mini Practice

1. Create a form that sends a user’s name and age to /profile using POST.
2. Add a file input for a profile picture and set the correct enctype.
3. Make the form open the response in a new tab.
4. Disable browser validation and write a JavaScript snippet that checks the age is a number between 1 and 120 before submitting.
5. Give the form an id of userForm and style it with a simple CSS rule that adds a light gray background.

Happy coding!