HTML form Attribute
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 name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>HTml Form Attributes</title>
</head>
<body>
<form action="/submit-form"
method="post"
target="_blank"
autocomplete="on"
novalidate rel="nofollow"
accept-charset="UTF-8"
enctype="multipart/form-data">
<label for="name">Name:</label><br />
<input type="text" id="name"
name="name"
autocomplete="name" /><br /><br />
<label for="email">Email:</label><br />
<input type="email" id="email"
name="email"
autocomplete="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:
HTML form Attribute Example Output
Supported Browsers: The browser supported by HTML form Attribute are listed below:
HTML form Attribute – FAQs
Can an input element be associated with multiple forms using the form attribute?
No, an input element can only be associated with one form at a time using the form attribute. The value of the form attribute must match a single form’s id.
What is the difference between the form attribute and the name attribute of a form?
The form attribute associates elements with a specific form by its id, while the name attribute gives the form a name for scripting and identification purposes but does not establish the same type of association.
Can the form attribute be used to submit input fields outside the form?
Yes, the form attribute allows input fields outside the form tag to be associated with the form, enabling them to be submitted with the form data.
How does the form attribute work with JavaScript?
The form attribute can be accessed or modified using JavaScript to dynamically change which form an element is associated with, allowing for more dynamic form behaviors.
Can the form attribute be used with novalidate to disable form validation?
Yes, the form attribute can work with novalidate by associating form elements with a specific form that has the novalidate attribute, disabling HTML5 form validation for those elements.
