HTML 23 - Form Attributes

emanlee發表於2024-05-18
HTMLORM

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

  • method

  • target

  • autocomplete

  • enctype

  • novalidate

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 form action 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 = "https://www.tutorialspoint.com">
      <!-- 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 −

S.NoValues & Description
1

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.
2

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.

<!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">
      <!-- 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>

On clicking the submit button, user will be redirected to the home page of Tutorialspoint.

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 −

S.No.Values & Description
1

_self

It opens the response in the same frame as it was clicked.
2

_blank

It opens the response in the new window or tab.
3

_parent

Opens the response in the parent frame.
4

_top

Opens the response in the full body of window.
5

framename

Opens the response in the named iframe.

Example

In the following example, we will use the target attribute with the value _self. The response will be open in the current window.

<!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 = "_self">
      <!-- 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 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 examples, 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.

S.No.Values & Description
1

on

By default, the autocomplete attribute is set to on, enabling the autocomplete functionality.
2

off

The autocomplete attribute can be toggled to off to disable this feature as per the requirements of the web application.

Instance

<form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get">

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 −

S.No.Values & Description
1

application/x-www-form-urlencoded

This is the standard method most forms use in simple scenarios.
2

mutlipart/form-data

This is used when you want to upload binary data in the form of files like image, word file etc.
3

text/plain

It only encodes the spaces into + symbol.

Instance

<form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get" enctype = "text/plain">

相關文章