HTML action Attribute

Introduction

In HTML, the action attribute plays a crucial role in defining the URL to which a form should be submitted. It is used within the <form> element to specify the server-side script or endpoint that will process the data submitted by the user.

What You’ll Learn

Purpose of action

The primary purpose of the action attribute is to provide the browser with the destination URL where the form data should be sent for processing. This URL could point to a server-side script, a web service, or any other resource capable of handling form submissions.

📝 Syntax

Add action to the opening <form> tag with a valid URL as its value:

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

Syntax Rules

• Only valid on <form> elements.
• Value must be a valid URL (relative or absolute).
• If omitted or empty, the form submits to the current page URL.
• Combine with method, enctype, and accept-charset as needed.

💎 Values

The action attribute accepts various values, typically represented as URLs. These values can be absolute or relative URLs, allowing for flexibility in specifying where the form data should be sent. Here are some examples:

• Relative URL — /submit-form submits to the /submit-form endpoint on the same domain.
• Absolute URL — https://example.com/process-form sends data to a specific absolute URL, allowing cross-domain form submissions.
• Empty value — action="" submits the form to the same URL the page originated from (the current document URL).

<!-- Relative path -->
<form action="/submit-form" method="post">...</form>

<!-- Absolute URL -->
<form action="https://example.com/process-form" method="post">...</form>

<!-- Submit to current page -->
<form action="" method="get">...</form>

Applicable Elements

Examples Gallery

POST contact forms, dynamic JavaScript action URLs, and GET search forms.

<form action="/submit-form" method="post" accept-charset="UTF-8">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

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

  <input type="submit" value="Submit">
</form>

<form id="dynamicForm" method="post">
  <!-- form fields -->
</form>

<script>
  document.getElementById("dynamicForm").action = "/submit-form";
</script>

<form action="/search" method="get" role="search">
  <input type="search" name="q" placeholder="Search...">
  <button type="submit">Search</button>
</form>

♿ Accessibility

• Label every field — Use <label for="..."> so users know what data the form collects.
• Describe submission outcome — Tell users what happens after submit (confirmation page, email sent, etc.).
• Use role="search" — On search forms to help assistive technologies identify their purpose.
• Provide error feedback — Return clear validation messages from the server endpoint defined in action.

💡 Best Practices