HTML Form Attributes
HTML form attributes are used to define various properties and behaviors of HTML forms.
Here are some commonly used attributes:
The Action Attribute
Specifies the URL where the form data should be sent upon submission.
As an example:
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Submit" />
</form>
In this example:
- The action attribute is set to
"/submit-form"
. - This means that when the user submits the form, the data will be sent to the URL
"/submit-form"
. - The method is set to
"POST"
, so the data will be sent using the HTTP POST method.
The Method Attribute
Specifies the HTTP method to be used when submitting the form (e.g. GET, POST).
As an example:
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Submit" />
</form>
In this example:
- The
method
attribute is set to"POST"
. - This means that when the user submits the form, the data will be sent to the server using the HTTP POST method.
You can replace "POST"
with "GET"
if you want the form data to be sent using the HTTP GET method instead.
As an example:
<form action="/search" method="GET">
<label for="search-term">Search:</label>
<input type="text" id="search-term" name="q" />
<input type="submit" value="Search" />
</form>
The Target Attribute
Specifies where to display the response that is received after submitting the form (e.g. "_self", "_blank").
As an example:
<form action="/submit-form" method="POST" target="_blank">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Submit" />
</form>
In this example:,
- The
target
attribute is set to"_blank"
. - This means that when the user submits the form, the response will be loaded in a new browser window or tab.
The Name Attribute
Specifies a name for the form that can be used to reference it in scripts.
As an example:
<form action="/submit-form" method="POST" name="contact-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Submit" />
</form>
In this example:
- The
name
attribute is set to "contact-form". - This can be useful if you have multiple forms on the same page and you want to distinguish between them using JavaScript or CSS.
The Enctype Attribute
Specifies the encoding type to be used when submitting the form (e.g. "application/x-www-form-urlencoded", "multipart/form-data").
As an example:
<form action="/submit-form" method="POST" enctype="multipart/form-data">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="image">Image:</label>
<input type="file" id="image" name="image" />
<input type="submit" value="Submit" />
</form>
In this example:
- The
enctype
attribute is set to"multipart/form-data"
. - This is used when the form includes one or more file inputs (
<input type="file">
) to upload files to the server. - The
enctype
attribute specifies how the form data should be encoded before it is sent to the server. - The default value is
"application/x-www-form-urlencoded"
, which is used for most forms that don't include file inputs. - When the
enctype
attribute is set to"multipart/form-data"
, the form data is sent as a series of parts, each containing a portion of the form data, including any uploaded files. - The server can then reconstruct the form data and process it appropriately.
The enctype
attribute is required when submitting forms with file inputs. If you don't specify an enctype
, the form data will not be encoded correctly and the file uploads will fail.
The Autocomplete Attribute
Specifies whether the browser should automatically complete the form fields or not.
As an example:
<form action="/submit-form" method="POST" autocomplete="on">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<input type="submit" value="Submit" />
</form>
In this example:
- The
autocomplete
attribute is set to"on"
. - This is used to enable the browser's autocomplete feature for the form inputs.
- The
autocomplete
attribute specifies whether the browser should remember and autocomplete the form data as the user types. - The values for the
autocomplete
attribute are"on"
and"off"
. - If you setautocomplete
to"off"
, the browser will not remember the form data and will not display autocomplete suggestions.
The Novalidate Attribute
Specifies that the form should not be validated upon submission.
As an example
<form action="/submit-form" method="POST" novalidate>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="Submit" />
</form>
In this example:
- The
novalidate
attribute is used to disable the browser's built-in form validation. - By default, modern browsers will validate the form data as the user types and display error messages if the data is not valid.
- The
novalidate
attribute specifies that the form should not be validated by the browser. - This can be useful if you want to implement your own form validation logic using JavaScript or if you want to submit the form data without validation.
The Accept-charset Attribute
Specifies the character set encoding to be used when submitting the form.
As an example:
<form action="/submit-form" method="POST" accept-charset="UTF-8">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<input type="submit" value="Submit" />
</form>
In this example:
- The
accept-charset
attribute is used to specify the character encoding that should be used when the form data is submitted to the server. - The
accept-charset
attribute is an alternative to thecharset
attribute that can be used in the Content-Type header of the HTTP request. - The
accept-charset
attribute specifies the character encoding in which the form data should be encoded before it is sent to the server. - The default value for
accept-charset
is the character encoding of the document containing the form.