HTML Form Attributes
- In this chapter, you will find a detailed description of the various attributes available for the HTML element.
List of All HTML Forms Attributes:
Attribute | Description |
---|---|
accept-charset | Indicate the character encodings used for form submission |
action | Indicate where to send the form-data when a form is submitted |
autocomplete | Indicate whether a form should have autocomplete on or off |
enctype | Indicate how the form-data should be encoded when submitting it to the server (only for method="post") |
method | Indicate the HTTP method to use when sending form-data |
novalidate | Indicate where to display the response that is received after submitting the form |
rel | Indicate that the form should not be validated when submitted |
target | Indicate the relationship between a linked resource and the current document |
name | Indicate the name of the form |
The Action Attribute
- The action attribute in HTML forms specifies the URL where the form data will be submitted upon submission.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action="submit_form.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
The Target Attribute
- The target attribute determines the browsing context or the frame in which the response from submitting the form will be displayed.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action="submit_form.php" target="_blank">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
target Attribute Values
Value | Description |
---|---|
_blank | This action opens the linked document in a new window or tab |
_self | By default, the linked document opens in the same frame it was clicked. |
_parent | This command will open the document that is linked to the parent frame. |
_top | The linked document will be displayed in the full body of the window when opened. |
framename | The instruction states that the document linked to it should be opened in the specified iframe mentioned in the text. |
The Method Attribute
- The method attribute specifies the HTTP method used when submitting the form data.
- It defines how the data is sent to the server for processing.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Types of HTML Form Method Attribute:
- GET Method: The GET method appends form data to the URL as query parameters. It is commonly used for retrieving data from the server.
- POST Method: In contrast, the POST method sends form data in the request body, making it suitable for transmitting sensitive or large amounts of data securely.
The Autocomplete Attribute
- The autocomplete attribute specifies whether the autocomplete functionality in the HTML Forms is on or off
- The autocomplete automatically fills the input values in the form.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The autocomplete attribute</h1>
<form action="submit_form.php" method="post" autocomplete="on">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="name">Password:</label>
<input type="text" id="password" name="password"><br><br>
<input type="submit" value="Submit"><br>
</form>
</body>
</html>
Output: