In HTML, the <form> element is used to create a container for various form controls such as input fields, checkboxes, radio buttons, and buttons. The <form> element can have several attributes that define its behavior and characteristics.
HTML Form Attribute
Here are some commonly used attributes:
- action: Specifies the URL or server-side script that will process the form data when it is submitted.
- method: Defines the HTTP method to be used when submitting the form. Common values are GET and POST. The GET method appends the form data to the URL, while the POST method sends the data in the request body.
- name: Provides a name for the form. It can be used to identify the form in client-side scripting or to associate labels with form controls.
- target: Specifies the target window or frame where the form response will be displayed. Common values include _self, _blank, _parent, and _top.
- enctype: Defines the encoding type to be used when submitting the form data. Common values include application/x-www-form-urlencoded, multipart/form-data, and text/plain.
- autocomplete: Enables or disables the autocomplete feature for form inputs. Values can be on or off.
- novalidate: Prevents form validation by the browser's built-in validation. It allows you to handle form validation manually through custom JavaScript code.
Here are some examples of <form> elements with attributes :
Basic Form Submission
You can use our free live html editor to test tutorial codes .
<form action="/submit-form" method="POST">
<!-- Form controls go here -->
<input type="text" name="username" placeholder="Enter your username">
<input type="password" name="password" placeholder="Enter your password">
<button type="submit" disabled>Submit</button>
</form>
- action="/submit-form": Specifies the URL or server-side script to process the form data when it is submitted.
- method="POST": Sets the HTTP method to POST for submitting the form data.
- <input> elements with name attributes: Collects input values from the user.
- <button type="submit">: Creates a submit button to trigger the form submission.
Form with Custom Validation and Target
You can use our free live html editor to test tutorial codes .
<form action="/submit-form" method="POST" target="_blank" novalidate>
<!-- Form controls go here -->
<input type="email" name="email" placeholder="Enter your email" required>
<input type="checkbox" name="subscribe" value="1"> Subscribe to newsletter
<button type="submit" disabled>Submit</button>
</form>
- action="/submit-form": Specifies the URL or server-side script to process the form data when it is submitted.
- method="POST": Sets the HTTP method to POST.
- target="_blank": Specifies that the form response should open in a new browser window or tab.
- novalidate: Disables the browser's built-in form validation.
- <input> element with type="email" and name="email": Requires the user to enter a valid email address.
- <input> element with type="checkbox", name="subscribe", and value="1": Allows the user to opt-in for newsletter subscription.
- <button type="submit"> : Triggers the form submission.
These examples demonstrate the usage of various attributes to define the behavior and characteristics of HTML <form> elements.
Resources for Further Learning
Explore the possibilities and create unique effects on your web pages by using the interactive code editor
HTML
Write and customize HTML code
CSS
Add style and design to your web pages with CSS
JavaScript
Enhance interactivity with JavaScript code
×