HTML Form Attribute
An HTML form attribute is a property that you can include within
the <form> tag to specify various characteristics and behaviors of the
form. These attributes allow you to control how the form
interacts with users and how the form data is handled when it is
submitted.
Here are some common HTML form attributes
1. action: Specifies the URL of the server-side script or endpoint
that will process the form data when it is submitted.
Example:
<form
action="/submit-form.php">
<!-- form elements here --> </form>
<!-- form elements here --> </form>
In this example, "/submit-form.php" is the script
that will receive the form data.
2. method: Specifies the HTTP method used to send the form data to
the server. It can be either "get" or "post". The form data may be sent as an HTTP post transaction (with
method="post") or as URL variables (with method="get").
Example:
Using the POST method when submitting the form data:
<form
action="/submit-form.php"
method="get">
<!-- form elements here --> </form>
<!-- form elements here --> </form>
Here, method="get" indicates that the form data will be sent as URL variables.
Example:
Using the GET method when submitting the form data:
<form action="/submit-form.php" method="post">
<!-- form elements here --> </form>
<!-- form elements here --> </form>
Here, method="post" indicates that the form data will be sent in the request body.
3. enctype: Specifies how form data should be
encoded before sending it to the server. This attribute is typically used
when you have file upload <input type="file"> within the form. Common values include
"application/x-www-form-urlencoded", "multipart/form-data", and
"text/plain".
Example:
<form
action="/submit-form.php"
method="post"
enctype="multipart/form-data">
<!-- form elements here --> </form>
<!-- form elements here --> </form>
Here, enctype="multipart/form-data" indicates that the form data will be encoded as
multipart/form-data, which is necessary for file uploads.
4. target: Specifies where to display the response received after
submitting the form. Common values include "_self" (the default, displays in
the same frame or window) and "_blank" (displays in a new window or
tab).
Example:
<form
action="/submit-form.php"
method="post"
target="_blank">
<!-- form elements here --> </form>
<!-- form elements here --> </form>
Here, target="_blank" will open the form submission response in a new tab or window.
5. autocomplete: Controls whether the browser should automatically
complete form fields based on the user's input history. Values can be "on"
or "off".
Example:
Using OFF method for browser should automatically complete form.
<form
action="/submit-form.php"
method="post"
autocomplete="off">
<!-- form elements here --> </form>
<!-- form elements here --> </form>
Here, autocomplete="off" disables the browser's autocomplete feature for the
form.
Example:
Using ON method for browser should automatically complete form.
<form action="/submit-form.php" method="post" autocomplete="on">
<!-- form elements here --> </form>
<!-- form elements here --> </form>
Here, autocomplete="on" disables the browser's autocomplete feature for the form.
6. name: Assigns a name to the form. This attribute is mainly
used when referencing the form in scripts or for styling
purposes.
Example:
<form
action="/submit-form.php"
method="post"
name="myForm">
<!-- form elements here --> </form>
<!-- form elements here --> </form>
Here, name="myForm"> gives the form a name of "myForm".
7. novalidate: Prevents the browser from validating form
input before submitting. This attribute is useful when you want to perform
custom validation using JavaScript.
Example:
<form
action="/submit-form.php"
method="post"
novalidate>
<!-- form elements here --> </form>
<!-- form elements here --> </form>
Here, novalidate tells the browser not to perform its built-in form validation.
8. onsubmit: Specifies a JavaScript function to execute
when the form is submitted. This attribute is often used for client-side
form validation or to perform actions before submitting the form data to the
server.
Example:
<form
action="/submit-form.php"
method="post"
onsubmit="return validateForm()">
<!-- form elements here --> </form>
<!-- form elements here --> </form>
Here, onsubmit="return validateForm()" calls a JavaScript function
validateForm() when the form is submitted.
More topic in HTML
