There are times when you don't want the browser to fill out the form automatically.
We can use autocomplete
attribute from form
element to control this.
There are two allowed values for the autocomplete
attribute: on
and off
.
The on
value permits the browser to fill out the form
and is the default value.
The following code shows how you can do this, using the autocomplete
attribute on the form element.
<!DOCTYPE HTML>
<html>
<body>
<form autocomplete="off"
method="post"
action="http://example.com/form">
<input name="fave" /> <input name="name" />
<button>Submit Vote</button>
</form><!--from www .j a va2 s. co m-->
</body>
</html>
You can be more specific by applying the autocomplete
attribute to individual input elements,
as shown in the following code.
<!DOCTYPE HTML>
<html>
<body>
<form autocomplete="off"
method="post"
action="http://example.com/form">
<input autocomplete="on" name="fave" />
<input name="name" />
<button>Submit Vote</button>
</form><!--from www . j a v a 2 s .c o m-->
</body>
</html>
The autocomplete
attribute on the form
element
sets the default policy for the input elements in the form.
You can override that policy for individual elements.
In the code above, the attribute on the form element disabled autocomplete, but the same attribute applied to the first input element switches it back on.
The second input element, to which the autocomplete
attribute has not been applied,
is subject to the form-wide policy.
The default behavior of a browser is to replace the page with the response the server.
You can change this behavior by using the target
attribute on the form element.
This attribute works in the same way as the target attribute on the a
element,
and you can select from the range of targets.
The following code shows how to use the target
attribute.
<!DOCTYPE HTML>
<html>
<body>
<form target="_blank"
method="post"
action="http://example.com/form">
<input autocomplete="on" name="fave" />
<input name="name" />
<button>Submit Vote</button>
</form><!--from w w w .j av a2 s . co m-->
</body>
</html>
The name
attribute sets a unique identifier for a form.
The following code shows a form element with the name
and id
attributes.
They have the same value.
<!DOCTYPE HTML> <html> <body> <form name="fruitvote" id="fruitvote" method="post" action="http://example.com/form"> <input name="fave" /> <input name="name" /> <button>Submit Vote</button> </form> </body> </html>
The value of the name attribute is not sent to the server when the form is posted. This attribute is only useful in the DOM operation in the client side and is not as important as the name attribute on the input element.
If an input element doesn't have a name attribute, the data that the user has entered will not be sent to the server when the form is submitted.
In HTML5, you can associate elements with forms anywhere in the document
by using the form
attribute, which is defined by input, button, and
the other form-related elements.
To associate an element with a form that is not an antecedent, you set the form attribute to the id value of the form.
The following code shows how to use the form Attribute.
<!DOCTYPE HTML>
<html>
<body>
<form id="voteform" method="post" action="http://example.com/form">
<p>
<label for="fave">Fruit: <input autofocus id="fave"
name="fave" /></label>
</p><!-- ww w. ja v a 2 s . c om-->
</form>
<p>
<label for="name">Name: <input form="voteform" id="name"
name="name" />
</label>
</p>
<button form="voteform" type="submit">Submit Vote</button>
<button form="voteform" type="reset">Reset</button>
</body>
</html>
In code above, only one of the input elements is a descendent of the form
element.
The other input
element and both
of the button
elements are outside of the form element,
and they use the form
attribute to associate themselves with the form.