HTML form action attribute

Next Page >>
HTML tutorial

HTML Tutorial » HTML Form action

What is HTML forms action?
The HTML form action attribute defines what should happen to the data when a form is submitted to a webpage.
In a few words the action attribute specifies where to send the data-form when a form is submitted.
The value of the action attribute should be URL of the web resource that will process the content of the form.

Syntax:

<form action="/submit.php">
.......
</form>

The action attribute appears between our opening" <form" tag and ">" without quotes. By default, the method attribute is set to “get”.

Example of HTML Form

Note: By default, the method attribute is set to “get”.

Browser Support HTML form action

Element	Chrome	IE	Firefox	Opera	Safari
HTML form action	Yes	Yes	Yes	Yes	Yes

HTML form action submit

How do you create a form action "submit" in HTML?
We make an example with the action form sending the First Name, Last Name and Email data to a page named action-form.php.
The First name, Last name and email data has the input type “text”.
We define a button with the input type appointed “submit” - Submit Button <input type="submit">.
When clicked, this button will send your data to our link “action-form.php” URL.

Example (this is HTML - PHP editor, change text on this window)

<!DOCTYPE html>

  <html>

  <body>
<h2>HTML action form submit</h2>
<form action="/action-form.php" method="get">

  <label for="f_name">First Name:</label>

  <br>

  <input type="text" id="f_name" name="f_name"

   value="Nick"><br>

  <label for="l_name">Last Name:</label>

  <br>

  <input type="text" id="email" name="email"

   value="Nick"><br>

  <label for="email">Email:</label>

  <br>

  <input type="text" id="l_name" name="l_name"

   value="nick@ager.com"><br><br>

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

  </form> 
<p>When you click the "Submit" button, all datas

 from this form will be sent to a page called "/action-form.php".</p>
</body>

  </html>

Note: default width of text input fields is maximum 20 characters.

How to create a form action POST or GET

The method attribute specifies how to send form-data to the page specified in the action attribute.

The data from the form can be sent as URL variables using: method = "POST or method =" GET ".

Notes on POST:

The data is not displayed in the URL
It has no size limitations
Submissions of forms with POST cannot be bookmarked

Notes on GET:

attached form data to the URL in name / value pairs.
URL length is limited (approx 3000 characters).
Never use GET to send sensitive data! (will be visible in the URL).
GET is Useful for form submissions when a user wants to bookmark the result.
GET is better for unsecured data, like query strings in search engine.

Example (this is HTML - PHP editor, change text on this window)

<!DOCTYPE html>

  <html>

  <body>
<h2>HTML action form submit</h2>
<form action="/action-form.php" method="POST">

  <label for="f_name">First Name:</label>

  <br>

  <input type="text" id="f_name" name="f_name"

  value="Nick"><br>

  <label for="l_name">Last Name:</label>

  <br>

  <input type="text" id="email" name="email"

  value="Nick"><br>

  <label for="email">Email:</label>

  <br>

  <input type="text" id="l_name" name="l_name"

  value="nick@ager.com"><br><br>

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

  </form> 

  <p>For GET method replace method="POST"

  with method="GET" </p>

  <p>When you click the "Submit" button, all datas from this

  form will be sent to a page called "/action-form.php".</p>
</body>

  </html>

The users also ask: form action post with parameters, to same page, form action post not working, response, we will discuss these in the next chapters

How do I create a HTML form action with JavaScript

Execute a JavaScript when a form is submitted:

Example (this is HTML - PHP editor, change text on this window)

<!DOCTYPE html>

  <html>

  <body>
<p>When you submit the form, <br />

  a function is sending alerts as<br />

  "The form was submitted".</p>
<form action="/action_page.php" method="POST" onsubmit="myFunction()">

  <label for="user_name">User_name: </label>

  <input type="text" id="user_name" name="user_name"

  value="Nick_boss"><br /><br />

  <label for="email">E_mail: </label>

  <input type="text" id="email" name="email"

  value="Nick_boss@ager.com"><br /><br />

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

  </form>
<script>

  function myFunction() {

  alert("The form was submitted");

  }

  </script>
</body>

  </html>

Tags: HTML form action JavaScript function call witm parameters, method POST, onsubmit javascript validation.

HTML form action mailto, submit, post, email, to another page, javascript, mdn, self, php, with parameters
HTML form action attribute - html tutorial

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.