HTML FORM action attribute

This article will teach you about the most important attribute of the HTML FORM tag, the "action" attribute. So, without further ado, let's get started on the topic "HTML FORM action attribute."

The action attribute of the FORM tag provides the URL of the program (which is on the server) that receives the information from the form and processes it. This URL is also known as the form's action URL. The majority of servers keep these form-processing programs in a folder called Common Gateway Interface-binaries (cgi-bin).

HTML action attribute syntax

The general form, or the syntax, of the "attribute" of a FORM tag in HTML is as follows:

<FORM action="url">

The "url" is the location of the file that processes the form data. The URL may be absolute or relative. For example: the URL "https://codescracker.com/user/process.php" is referred to as the absolute URL, whereas the URL "/user/process.php" and "process.php" are referred to as the relative URL.

The "process.php," which is the name of the file that processes the data, can be used when both the file that contains the HTML form and the "process.php" are available in the same directory or folder.

Now is the time to give an example of the "action" attribute.

HTML action attribute example

It is possible that the majority of students will not be able to grasp the concept if they are unable to comprehend the example, which provides an almost complete representation of the code's practical application. So, let me demonstrate what I mean by the "action" attribute by giving you an example.

HTML Code

<!DOCTYPE html>
<html>
   <head>
      <style>
         .codescracker{width: 300px; margin: 10px auto; border-left: 4px solid #008080;
            padding: 12px;}
         p.userLogin{font-size: 30px; font-weight: bold; text-align: center; 
            border-bottom: 2px solid #008080;}
         .myform input{padding: 2px 8px; margin: 8px 2px;}
         .myform input[type="submit"]{background-color: #008080; color: whitesmoke; 
            padding: 8px; border: 0px; border-radius: 6px; width: 80px; font-weight: bold;}
         .myform input[type="submit"]:hover{cursor: pointer;}
      </style>
   </head>
<body>
   
   <div class="codescracker">
      <p class="userLogin">Login</p>
      <form class="myform" action="/user/login.php" method="post">
         <b>Username</b>: <input type="text" name="user"><br>
         <b>Password</b>: <input type="password" name="pass"><br>
         <input type="submit" value="Login">
      </form>
   </div>
   

</body>
</html>

Output

The above example demonstrates that if a user enters the data username and password and clicks the login button, the username and password are sent to the file "login.php" under "user." And "user" is a folder accessible from the root directory. Now, the username and password through this file will be filtered to prevent any hacking activity, and if everything checks out, the username and password will be fetched or matched from the database. If it is found to be available, the user will be directed to the website as a verified user and then can access his or her account.

All of the code for filtering data, matching the username and password with the server, and redirecting the user to the portal upon successful login will be written in "login.php," which is provided as the action attribute's "URL."

The above HTML FORM action attribute example is created only to draw your attention. Also, the file "login.php," located under the directory "user," is not available on our website. Therefore, if you feed the data into the fields "username" and "password" and hit the "login" button, you will get nothing. However, if you want to learn the complete version of the "login" form, that is, the form code along with the data processing code, you can refer to our separate article: PHP MySQLi Login Page.

In the above example, all the codes written between the HEAD tag are referred to as the CSS code, which is used to style the web page. So if you want to learn "CSS," you can refer to our separate course on it.

HTML Online Test

« Previous Tutorial Next Tutorial »

Liked this article? Share it!

Like/follow us on social media for updates!