Articles → HTML → Buttons In HTML

Buttons In HTML

In this article, we will discuss buttons in HTML.

What Is A Button Control?

A button is a control

Which can be clicked
Performs validations and actions when clicked.

Type Of Buttons

HTML mainly supports three types of buttons

Button
Submit
Reset

Button

The button is used to perform an action (or validations), but it does not submit the page (Submission of a web page (or page) means sending the data to the server and getting the response in the form of HTML).

It is important to note that the above condition is only true when the form method is "get".

Consider the following example: -

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>
	<form method="get" action="Page1.html">
		<button>Button Example</button>
	</form>
</body>

</html>

Try It

Paste the above code in notepad and save it as .html (or .htm) file. Once you save your file, open your .html (or .htm) in the web browser and you see the following output.

Picture showing the input type as button in html

Click to Enlarge

Submit

Submit is used to perform an action (or validations) and it also submits the web page. Consider the following code: -

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>
	<form method="get" action="Page1.html">
		<input type="submit" value="Submit Example" /> </form>
</body>

</html>

Try It

Paste the above code in notepad and save it as .html (or .htm) file. Once you save your file, open your .html (or .htm) in the web browser and you see the following output.

Picture showing the input type as submit in html

Click to Enlarge

Once you click on the button, the page will submit.

Reset

Reset is used to rest the control state to default. Consider the following code: -

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>
	<form method="get" action="Page1.html">
		<input type="text" />
		<input type="reset" value="Reset Example" /> </form>
</body>

</html>

Try It

In the above code, I have declared a textbox and a button. Paste the above code in notepad and save it as .html (or .htm) file. Once you save your file, open your .html (or .htm) in the web browser and you see the following output.

Picture showing the input type as reset in html

Click to Enlarge

In the above code, the default value of the textbox is blank. So, on clicking on Reset Example button the value in the textbox becomes blank.

Browser Support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
Yes	Yes	Yes	Yes	Yes	Yes

Posted By -	Karan Gupta

Posted On -	Friday, December 16, 2016

Updated On -	Sunday, December 3, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**