The The
|
Example:
HTML
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
Attribute | Value | Description |
---|---|---|
accept-charset | character_set | Specifies the character encodings that are to be used for the form submission |
action | URL | Specifies where to send the form-data when a form is submitted |
autocomplete | on off |
Specifies whether a form should have autocomplete on or off |
enctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Specifies how the form-data should be encoded when submitting it to the server (only for method="post") |
method | get post |
Specifies the HTTP method to use when sending form-data |
name | text | Specifies the name of a form |
novalidate | novalidate | Specifies that the form should not be validated when submitted |
rel | external help license next nofollow noopener noreferrer opener prev search |
Specifies the relationship between a linked resource and the current document |
target | _blank _self _parent _top |
Specifies where to display the response that is received after submitting the form |
Example:
HTML
<form action="/action_page.php" method="get">
<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat" checked>
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
Example:
HTML
<form action="/action_page.php" method="get">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
Example:
HTML
<style>
form {
display: block;
margin-top: 0em;
}
</style>
A form with an accept-charset attribute.
The accept-charset
attribute specifies the character encodings that are to be used for the form submission.
<form accept-charset="character_set">
Value | Description |
---|---|
character_set | A space-separated list of one or more character encodings that are to be used for the form submission.
Common values:
In theory, any character encoding can be used, but no browser understands all of them. The more widely a character encoding is used, the better the chance that a browser will understand it. To view all available character encodings, go to our Character sets reference. |
Example:
HTML
<form action="/action_page.php" accept-charset="utf-8">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
On submit, send the form-data to a file named "action_page.php" (to process the input):
The action
attribute specifies where to send the form-data when a form is submitted.
<form action="URL">
Value | Description |
---|---|
URL | Where to send the form-data when the form is submitted.
Possible values:
|
Example:
HTML
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
A form with autocomplete on.
The autocomplete
attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
The numbers in the table specify the first browser version that fully supports the attribute.
<form autocomplete="on|off">
Value | Description |
---|---|
on | Default. The browser will automatically complete values based on values that the user has entered before |
off | The user must enter a value into each field for every use. The browser does not automatically complete entries |
Example:
HTML
<form action="/action_page.php" method="get" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>
on | Default. The browser will automatically complete values based on values that the user has entered before |
Example:
HTML
<form action="/action_page.php" method="get" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>
off | The user must enter a value into each field for every use. The browser does not automatically complete entries |
Example:
HTML
<form action="/action_page.php" method="get" autocomplete="off">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>
Send form-data encoded as "multipart/form-data".
The enctype
attribute specifies how the form-data should be encoded when submitting it to the server.
Note: The enctype
attribute can be used only if method="post"
.
<form enctype="value">
Value | Description |
---|---|
application/x-www-form-urlencoded | Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values) |
multipart/form-data | This value is necessary if the user will upload a file through the form |
text/plain | Sends data without any encoding at all. Not recommended |
Example:
HTML
<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
application/x-www-form-urlencoded | Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values) |
Example:
HTML
<form action="/action_page_binary.asp" method="post" enctype="application/x-www-form-urlencoded">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
multipart/form-data | This value is necessary if the user will upload a file through the form |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The form enctype attribute</h1>
<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
text/plain | Sends data without any encoding at all. Not recommended |
Example:
HTML
<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
Submit a form using the "get" method.
The method
attribute specifies how to send form-data (the form-data is sent to the page specified in the action
attribute).
The form-data can be sent as URL variables (with method="get"
) or as HTTP post transaction (with method="post"
).
Notes on GET:
Notes on POST:
<form method="get|post">
Value | Description |
---|---|
get | Default. Appends the form-data to the URL in name/value pairs: URL?name=value&name=value |
post | Sends the form-data as an HTTP post transaction |
Example:
HTML
<form action="/action_page.php" method="get" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
get | Default. Appends the form-data to the URL in name/value pairs: URL?name=value&name=value |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The form method="get" attribute</h1>
<form action="/action_page.php" method="get" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click on the submit button, and the input will be sent to a page on the server called "action_page.php".</p>
</body>
</html>
post | Sends the form-data as an HTTP post transaction |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The form method="get" attribute</h1>
<form action="/action_page.php" method="post" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click on the submit button, and the input will be sent to a page on the server called "action_page.php".</p>
</body>
</html>
An HTML form with a name attribute.
The name
attribute specifies the name of a form.
The name
attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
<form name="text">
Value | Description |
---|---|
text | Specifies the name of the form |
Example:
HTML
<form action="/action_page.php" method="get" name="myForm">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="button" onclick="formSubmit()" value="Send form data!">
</form>
Indicate that the form is not to be validated on submit.
The novalidate
attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.
The numbers in the table specify the first browser version that fully supports the attribute.
<form novalidate>
Example:
HTML
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
The rel
attribute specifies the relationship between the current document and the linked document.
<form rel="value">
Value | Description |
---|---|
external | Specifies that the referenced document is not a part of the current site |
help | Links to a help document |
license | Links to copyright information for the document |
next | The next document in a selection |
nofollow | Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link) |
noopener | |
noreferrer | Specifies that the browser should not send a HTTP referrer header if the user follows the hyperlink |
opener | |
prev | The previous document in a selection |
search | Links to a search tool for the document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<b>This will avoid information passed to the post page </b>
<!-- It avoids passing the referrer information
to target website by removing the referral
info from the HTTP header.
It is safe to use -->
<form rel="noreferrer" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
external | Specifies that the referenced document is not a part of the current site |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<b>This will avoid information passed to the post page </b>
<!-- It avoids passing the referrer information
to target website by removing the referral
info from the HTTP header.
It is safe to use -->
<form rel="external" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
help | Links to a help document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<form rel="help" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
license | Links to copyright information for the document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<form rel="license" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
next | The next document in a selection |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<form rel="next" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
nofollow | Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link) |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<form rel="nofollow" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
noopener will avoid robots.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<form rel="noopener" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
noreferrer | Specifies that the browser should not send a HTTP referrer header if the user follows the hyperlink |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<form rel="noreferrer" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
opener will appear that robots won't open the page.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<form rel="opener" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
prev | The previous document in a selection |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<form rel="prev" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
search | Links to a search tool for the document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">Horje</h2>
<h2>HTML form Attribute</h2>
<form rel="search" action="mypage.php">
<input type="search" placeholder="search here" />
<input type="button" value="search" />
</form>
</body>
</html>
Display the response received in a new window or tab.
The target
attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
The target
attribute defines a name of, or keyword for, a browsing context (e.g. tab, window, or inline frame).
<form target="_blank|_self|_parent|_top|framename">
Value | Description |
---|---|
_blank | The response is displayed in a new window or tab |
_self | The response is displayed in the same frame (this is default) |
_parent | The response is displayed in the parent frame |
_top | The response is displayed in the full body of the window |
framename | The response is displayed in a named iframe |
Example:
HTML
<form action="/action_page.php" method="get" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
_blank | The response is displayed in a new window or tab |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The form target attribute</h1>
<form action="/action_page.php" method="get" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
_self | The response is displayed in the same frame (this is default) |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The form target attribute</h1>
<form action="/action_page.php" method="get" target="_self">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
_parent | The response is displayed in the parent frame |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The form target attribute</h1>
<form action="/action_page.php" method="get" target="_parent">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
_top | The response is displayed in the full body of the window |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The form target attribute</h1>
<form action="/action_page.php" method="get" target="_top">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
framename | The response is displayed in a named iframe |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The form target attribute</h1>
<form action="/action_page.php" method="get" target="framename">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Read Full: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 8 months ago |
Uploaded by: | Admin |
Views: | 577 |
Ref on: | View |