HTML - Form Attributes

Previous
Next

HTML forms are simple form that has been used to collect data from the users. HTML form has interactive controls and various input types such as text, numbers, email, password, radio buttons, checkboxes, buttons, etc.

HTML <form> tag is used to create HTML forms.

What are Form Attributes?

In HTML, each element has its own attributes that are used to define the characteristics of that particular HTML element and are placed inside the element's opening tag. The <form> element also has attributes that provide different functionalities like redirection on other web pages and auto completion of text.

Following is a list of the most frequently used form attributes

  • action: HTML action attribute is used to specify a URL that processes the form submission.
  • method: HTML method attribute is used to define which HTTP method to use when submitting the form.
  • target: HTML target attribute that is used to specify where to open the linked document.
  • autocomplete: HTML autocomplete attribute allows you to set whether the autocomplete for the form should be on or off.
  • enctype: HTML enctype attribute is used to specify how the form input data should be encoded before sending it to the server.
  • novalidate: HTML novalidate attribute define that while submitting the form the form data should not be validated in an HTML document.

The action Attribute

The action attribute of the <form> element transmits the user's input to a backend script for processing. A form is of no use unless it processes the information provided by the user. Therefore, it is important to pass the URL of a program to the action attribute. Note that the formaction attribute can override the value of action attribute.

Example

The following example illustrates the use of action attribute. When we click the submit button, the form will redirect us to the home page of Tutorialspoint.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> The action Attribute </title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="/action_page.php">
        <!-- to take input -->
        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>
        <!-- to submit the data -->
        <input type="submit">
    </form>
</body>

</html>

The method Attribute

The method attribute determines which HTTP method should be used by the browser while uploading the form information. The most commonly used methods are as follows

Values Description
GET It is the default method for form submission which means if we don't specify the method name explicitly the form will use the GET method to send data.
POST It is used to send form data inside HTTP request body. It is safer than GET method.
It is not recommended to use the GET method while sending sensitive information like credit/debit card numbers and passwords because it exposes the submitted data in the URL.

Example

The following example demonstrate how to use the method attribute of <form> element. On clicking the submit button in the output of below code, user will be redirected to the home page of Tutorialspoint.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>The method Attribute</title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="https://www.tutorialspoint.com" method="post">

        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>

        <input type="submit">
    </form>
</body>

</html>

The target Attribute

The target attribute determines the target window or frame where the result of the script will be displayed after submitting the form. The default target is the current window. The target attribute accepts the following values

Values Description
_self It opens the response in the same frame as it was clicked.
_blank It opens the response in the new window or tab.
_parent Opens the response in the parent frame.
_top Opens the response in the full body of window.
framename Opens the response in the named iframe.

Example

In the following example, we will use the target attribute with the value _blank. The response will be open in the new tab.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> The target Attribute </title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="https://www.tutorialspoint.com" target="_blank">
        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>

        <input type="submit">
    </form>
</body>

</html>

The novalidate Attribute

The novalidate is a Boolean attribute that indicates the form does not need any kind of validation. The term validation refers to the process of verifying the correctness of user input based on predefined conditions. This attribute, when applied, exempts the form from such checks, allowing user inputs to bypass these conditions.

If Boolean Attributes like novalidate are present on an HTML element, it specifies true and in the case of absence, false is assumed. They do not accept any values.

Example

In the previous example, the form redirected us to a new web page when we entered our name and email. For this example, we will use the novalidate attribute which will allow the redirection without enterning any information.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> The novalidate Attribute </title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="https://www.tutorialspoint.com"
          target="_blank" autocomplete="off" 
          method="get" novalidate>
        <!-- to take input -->
        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>
        <!-- to submit the data -->
        <input type="submit">
    </form>
</body>

</html>

The autocomplete Attribute

The autocomplete attribute of HTML predicts and suggests the subsequent input based on the initial characters entered in the input field. This attribute primarily has two states namely on and off.

Values Description
on By default, the autocomplete attribute is set to on, enabling the autocomplete functionality.
off The autocomplete attribute can be toggled to off to disable this feature as per the requirements of the web application.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Form with Autocomplete</title>
</head>

<body>
    <h2>Form with Autocomplete Attribute</h2>

    <form action="https://www.tutorialspoint.com/" 
          method="POST" autocomplete="on">
        <label for="name">Name:</label>
        <input type="text" id="name" 
               name="name" autocomplete="on">
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"
               autocomplete="on">
        <br><br>
        <button type="submit">Submit</button>
    </form>

    <p>
        Submit the form with some values, Next time 
        when you try to submit browser will suggest 
        previous submitted values.
    </p>
</body>

</html>

The enctype Attribute

We use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Its possible values are

Values Description
application/x-www-form-urlencoded This is the standard method most forms use in simple scenarios.
mutlipart/form-data This is used when you want to upload binary data in the form of files like image, word file etc.
text/plain It only encodes the spaces into + symbol.

Example

In the following example, we are using the HTML ‘enctype’ attribute with the value "text/plain" within the <form> element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'enctype' Attribute</title>
   <style>
      form {
         width: 300px;
         padding: 10px;
         border-radius: 10px;
         background-color: rgb(9, 109, 190);
      }

      form h1 {
         font-family: sans-serif;
         letter-spacing: 2px;
         color: white;
         text-align: center;
         position: relative;
         top: -20px;
      }

      form input {
         padding: 12px;
         width: 80%;
         border: 1px solid white;
         border-radius: 5px;
         outline: none;
      }

      form label {
         font-size: 20px;
         color: white;
         padding: 5px 5px;
      }

      form button {
         padding: 12px;
         width: 100px;
         cursor: pointer;
         background-color: white;
         border: 1px solid white;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <!--HTML 'enctype' attribute-->
   <h3>Example of the HTML 'enctype' attribute</h3>
   <p>
       We are assigning the "text/plain" value to the 
       enctype attribute which means the data is being
       sent as plain text.
   </p>
   <form action="index.js" enctype="text/plain" method="POST">
      <h1>Login</h1>
      <label for="">Username</label>
      <br>
      <input type="text" id='uname' placeholder="Username">
      <br>
      <br>
      <label for="">Password</label>
      <br>
      <input type="password" id='psw' placeholder="Password">
      <br>
      <br>
      <button type='submit' onclick="Login()">Login</button>
   </form>
   <script src="index.js"></script>
</body>
</html>

index.js

function Login(){
   var uname = document.getElementById("uname").value;
   var password = document.getElementById("psw").value;

   document.write("Username: " + uname);
   document.write("<br>");
   document.write("Password: " + password);
}
Print Page
Previous
Next
Advertisements