form attribute


Form autocomplete


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.


	      	<!DOCTYPE HTML>
			<html>
			<body>
			<form autocomplete="off" method="post" action="#">
			<input name="fave" /> <input name="name" />
			<button>Submit Vote</button>
			</form>
			</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.


Form Target


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.


  • _blank - Opens the server response in a new window (or tab)
  • _parent - Opens the server response in the parent frameset
  • _self - Opens the server response in the current window (which is the default behavior)
  • _top - Opens the server response in the full body of the window.
  • <frame> - Opens the server response in the specified frame

	      	<!DOCTYPE HTML>
			<html>
			<body>
			<form target="_blank" method="post" action="#">
			<input autocomplete="on" name="fave" />
			<input name="name" />
			<button>Submit Vote</button>
			</form>
			</body>
			</html>
	      


Form Name


The name attribute sets a unique identifier for a form.


	      	<!DOCTYPE HTML>
			<html>
			<body>
			<form name="fruitvote" id="fruitvote" method="post" action="#">
			<input autocomplete="on" 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.


form attribute


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.


	      	<!DOCTYPE HTML>
			<html>
			<body>
			<form id="voteform" method="post" action="#">
			<p>
			<label for="fave">Fruit: <input autofocus id="fave" name="fave"></label>
			</p>
			</form>
			<p>
			<label for="name">Name: <input form="voteform" id="name" name="name">
			</label>
			</p>
			<button form="voteform" type="submit">Submit</button>
			<button form="voteform" type="reset">Reset</button>
			</body>
			</html>