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
