🎓 A1Learner
🔍

HTML Form Attributes

Form attributes are settings on the form element that control where and how its answers go. Three common settings are action, method, and target.

The action attribute

The action value names the address that receives the answers. The address /save sits on the same site.

<form action="/save">
<p>Your name</p>
<input type="text">
<input type="submit">
</form>

The get method

With get, the answers ride in the page address. Anyone can see them in the address bar.

<form action="/search" method="get">
<p>Search word</p>
<input type="text">
<input type="submit">
</form>

The post method

A request is the message a browser sends when it asks for a page. With post, the answers travel inside that request.

<form action="/save" method="post">
<p>Your secret word</p>
<input type="text">
<input type="submit">
</form>

The target attribute

The target value _blank opens the result in a new tab. The current page stays open.

<form action="/save" target="_blank">
<p>Your name</p>
<input type="text">
<input type="submit">
</form>

Example

<!DOCTYPE html>
<html>
<head>
<title>Form Attributes</title>
</head>
<body>
<h1>Search the Library</h1>
<p>Type a title to find a book.</p>
<form action="/search" method="get" target="_blank">
<p>Book title</p>
<input type="text">
<input type="submit">
</form>
</body>
</html>

Key points

  • Action: the address that receives the form answers
  • Method: the way the answers travel to that address
  • Get: a method that puts answers in the page address
  • Post: a method that sends answers inside the request body
  • Action says where answers go, and method says how they travel.
  • Target: the setting that chooses where the result opens

In this example, the form carries three attributes. The action value /search names the address that receives the answer. The method value get puts the answer in the page address. The target value _blank opens the result in a new tab. The form itself holds one text field and one submit control.

Note

Post suits private answers like passwords. Get suits searches that readers may share.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which form attribute names the address that receives the answers?