« Previous Next »

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Output:

Here, the submitted result will open in a new browser tab:

Output:

This example uses the POST method when submitting the form data:

Output 3:

A form with autocomplete on:

Output 4:

A form with a novalidate attribute:

Output 5:

Practice Exercises

Task 1: How to send sensitive form data securely to a server and open the response in a new tab?

Goal: Create a form that sends data to /action_page.php using the post method and opens the submission result in a new browser tab.
💡 Hint: Use action="/action_page.php", method="post", and target="_blank" inside the <form> tag.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Form Target and Method Example</title>
  </head>
  <body>

    <h2>Secure Form Submission</h2>
    <p>This form submits data via POST and opens the response in a new browser tab.</p>

    <form action="/action_page.php" target="_blank" method="post">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
    </form>

  </body>
</html>
Output :

Secure Form Submission

This form submits data via POST and opens the response in a new browser tab.





Explanation: The method="post" attribute sends form data inside the HTTP request body instead of showing it in the URL bar, and target="_blank" forces the server response page to open in a new tab.
Task 2: How to enable browser autofill for input fields using the autocomplete attribute?

Goal: Create a form that allows browsers to automatically complete previous entries for user inputs like First Name and Email.
💡 Hint: Set autocomplete="on" on the <form> element.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Form Autocomplete Example</title>
  </head>
  <body>

    <h1>The form autocomplete attribute</h1>
    <p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>

    <form action="/action_page.php" autocomplete="on">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname"><br><br>
      
      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email"><br><br>
      
      <input type="submit" value="Submit">
    </form>

  </body>
</html>
Output :

The form autocomplete attribute

Fill in and submit the form, then reload the page to see how autocomplete works.





Explanation: When autocomplete="on" is active, the browser remembers values typed previously into input fields and suggests them automatically during future visits.
Task 3: How to bypass default HTML5 client-side form validation using the novalidate attribute?

Goal: Build a form with an email field that submits data without browser-based validation checks on input format.
💡 Hint: Add the boolean novalidate attribute to the opening <form> tag.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Form Novalidate Example</title>
  </head>
  <body>

    <h1>The form novalidate attribute</h1>
    <p>The novalidate attribute indicates that the form input is not to be validated on submit:</p>

    <form action="/action_page.php" novalidate>
      <label for="email">Enter your email:</label><br>
      <input type="email" id="email" name="email"><br><br>
      <input type="submit" value="Submit">
    </form>

  </body>
</html>
Output :

The form novalidate attribute

The novalidate attribute indicates that the form input is not to be validated on submit:



Explanation: The novalidate attribute stops the browser's built-in validation (such as checking for an `@` symbol in `type="email"`) when submitting the form.
« Previous Next »