In the previous post, we have learned about the form, input, label tags, and the placeholder attribute. In this post, we will learn about the name attribute, form action, and method attributes.

Input Name Attribute:

The name attribute of the input tag is used to access the value of the input field entered by the user. Please note that the name attribute should be unique for each input field. The following code example shows how to add the name attributes in the input fields:

<form>
    <label>Username: </label>
    <input type="text" placeholder="Add username here ..." name="username" /><br>
    <label>Password:</label>
    <input type="password" placeholder="Add password here ..." name="password" /><br>
    <input type="submit" value="Click to Submit" />
</form>

Now when we submit the form, the values entered by the user will be shown in the URL of the page and those values can then be accessed by server-side languages like PHP or NodeJS (we will discuss these in other courses).

Form Action Attribute:

The form action attribute defines the URL to which the form will be submitted. For example, if you want to submit the form values to a specific page/file in your website, then the URL of that page/file will be added in the form action attribute. See the following example:

<form action="/yourpage.php">
    <label>Username: </label>
    <input type="text" placeholder="Add username here ..." name="username" /><br>
    <label>Password:</label>
    <input type="password" placeholder="Add password here ..." name="password" /><br>
    <input type="submit" value="Click to Submit" />
</form>

We will discuss the form action attribute in detail when we will learn PHP in another course.

Form Method Attribute:

The form method attribute defines how the data will be submitted to the page/file defined in the action attribute. The most common method types are GET and POST. By default, the value of the method attribute is GET. See the following example:

<form action="/yourpage.php" method="GET">
    <label>Username: </label>
    <input type="text" placeholder="Add username here ..." name="username" /><br>
    <label>Password:</label>
    <input type="password" placeholder="Add password here ..." name="password" /><br>
    <input type="submit" value="Click to Submit" />
</form>

GET vs POST Mothod:

The GET method is the default method value for any HTML form. The GET method is used when the data to be submitted is not sensitive and can be shown publicly. For example page/post IDs. In the case of the GET method, the form data is submitted through the query parameters shown in the page URL:

/?category=web&id=12345

The POST method is used when the data to be submitted is sensitive and cannot be shown publicly. For example username, passwords, etc. In that case, we use the POST method. In the POST method, the form data is not shown in the URL rather it’s transferred securely and can only be accessed through the server-side language like PHP or NodeJS.

We will discuss the form method attribute in detail in the PHP or NodeJS course.

Video Tutorial (Urdu Language):

Got Stuck? Any Questions?

In case of any questions, please feel free to ask in the comments section below. Thanks