HTML form attributes define the behavior and properties of a form element. They include attributes like action for specifying where form data is sent, a method for the HTTP method used, and autocomplete for browser input suggestions, among others.
List of HTML form Attribute
| Attribute | Description |
|---|---|
| Action Attribute | Specifies where to send the form data upon submission. |
| Target | Defines where to display the response after submission. |
| Method | Determines the HTTP method used for submitting the form. |
| Autocomplete | Enables browser autofill suggestions for form fields. |
| Novalidate | Disables client-side form validation when present. |
| Rel | Specifies the relationship between the current and linked document. |
| Accept-charset | Defines the character encoding used for form submission. |
| Enctype | Specifies how form data should be encoded for submission. |
Syntax
<element form="form_id"> Example: In this example the HTML form with attributes:
- Form Attributes: The form uses action to define the submission URL and method as "post" for secure data sending.
- Target & Validation: target="_blank" opens the form submission in a new tab, novalidate disables HTML5 form validation.
- Autocomplete: autocomplete="on" suggests autofill options for form fields, with specific settings for "name" and "email."
- Character Encoding: accept-charset="UTF-8" ensures data is sent in UTF-8 encoding, handling a wide range of characters.
- File Upload: enctype="multipart/form-data" allows file uploads by supporting different content types.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
HTml Form Attributes
</title>
</head>
<body>
<form accept-charset="UTF-8" action="/submit-form" autocomplete="on" enctype="multipart/form-data" method="post" novalidate="" rel="nofollow" target="_blank">
<label for="name">
Name:
</label>
<br/>
<input autocomplete="name" id="name" name="name" type="text"/>
<br/>
<br/>
<label for="email">
Email:
</label>
<br/>
<input autocomplete="email" id="email" name="email" type="email"/>
<br/>
<br/>
<label for="message">
Message:
</label>
<br/>
<textarea id="message" name="message"></textarea>
<br/>
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Output:
