Students Empire
Learn Something New
Home
About Us Contact Donate

form button



There are three ways you can use button by setting the three different type attribute.


  • submit - Specifies that the button will be used to submit a form
  • reset - Specifies that the button will be used to reset a form
  • button - Specifies that the button has no specific semantic significance

submit button - Submit Forms


When you set the type attribute of a button to submit , pressing the button will submit the form that contains the button.


This is the default behavior when you have not applied the type attribute.


Submit button have some additional attributes listed as follows.


  • form - Specifies the form (or forms) with which the button is associated
  • formaction - Overrides the action attribute on the form element, and specifies a new URL to submit
  • formenctype - Overrides the enctype attribute on the form element, and specifies the encoding scheme for the form data
  • formmethod - Overrides the method attribute on the form element
  • formtarget - Overrides the target attribute on the form element
  • formnovalidate - Overrides the novalidate attribute on the form to specify whether client-side validation should be performed

			  	<!DOCTYPE HTML>
				<html>
				<body>
				<form>
				<p>
				<label for="fave">Fruit:
				<input autofocus id="fave" name="fave" /></label>
				</p>
				<p>
				<label for="name">Name:
				<input id="name" name="name" /></label>
				</p>
				<button type="submit" formaction="http://example.com/" formmethod="post">Submit</button>
				</form>
				</body>
				</html>

reset button


If you set the type attribute from a button to reset , pressing the button causes all of the input elements in the form to be reset to their initial state.


There are no additional attributes for reset button.


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

generic button


If you set the type attribute to button , you create a normal button. It has no special meaning and won't do anything when you press it.


		      	<!DOCTYPE HTML>
				<html>
				<body>
				<form action="#">
				<p>
				<label for="fave">Fruit: <input autofocus id="fave" name="fave" /></label>
				</p>
				<p>
				<label for="name">Name: <input id="name" name="name" /></label>
				</p>
				<button type="button">
				Do <strong>NOT</strong> press this button
				</button>
				</form>
				</body>
				</html>

Image Button


		     	<html>
				<body>
				<form action="" method="post">
				<button type="submit">Submit</button>
				<br><br>
				<button type="reset"><b>Clear this form</b> I want to start again</button>
				<br><br>
				<button type="button"><img src="http://www.studentsempire.com" alt="submit" />
				</button>
				</form>
				</body>
				</html>