Introduction to HTML Button Tag

HTML Button Tag allows creating an active button control on a web page using the HTML document. This <button> element is declared within the body tag. Why do we need a button element? Normally, when a user accesses a web page, the most common thing he does is clicking somewhere in a website, leading to the next URL Page. To do so Button element cannot do by itself; it is created by a form action where the web forms have a default submit button click.

Buttons were created using <button>element; they function like <input> element with additional possibilities like adding content, images between the button tag. The content text pushed between the opening and closing tag is considered to be text on the button. Actions on the button are done using JavaScript or by using them with a form. And probably putting special styles to the button is done by CSS, but different browsers have a new special style.

Syntax:

Like other HTML tags, even button tags have both opening and closing tag, and the button type is defined using attributes.

<button> // some stuff like content / image </button>

Attributes of HTML Button Tag

No Special attributes have been used as they don’t have any required attributes; instead, they are used as an ordinary button with the type=” attribute “. Even this element is styled using CSS, with the properties to alter the changes in the button tag. Those properties are CSS font-family, Font-weight, Text-decoration, font-Style. Colouring properties like Background-color and, finally, layout properties like text-overflow, text-indent.

S.no	Attribute Name	Description	Example
1	autofocus	It is considered as a Boolean attribute.	<button> autofocus <button>
2	disabled	Making a button non-clickable.	<button type=”button” disabled…>/button>
3	Form	It Creates a form	<form>…</form>
4	formaction	It specifies the current location for submitting the form data.	<form action =: https://…” > </form>
5	formnovalidate	Appears in gray color and gives non-validation features.	<button type=” submit” formnovalidate>
6	Formmethod	It specifies the methods while referring to the next web page(get, the post of HTTP methods)	<button type=”press” form method =”get” > </button>
7	formtarget	It specifies the target path for the server response when a form action is done.	<button type=”press” formtarget= ahref </button>
8	formenctype	It has been used when a form is submitted to the webserver for the response it activates the type of content is used.	<button type=”submit” formenctype = “multipart/form-data”> …..</button>
8	name	It specifies the button name used in the form element, which is used by form inputs.	<button type=”submit” name =” “
9	type	It specifies the type of button been used. It has three default values submit, reset, text.	< button type “……” >
10	value	It gives initial value when a button is used along with the form data	<button type=”submit” name =” “ value = “ “>
11	tabindex	It specifies the tab key, and the order does the preference.
12	onclick	When a button is pressed, it runs a small javascript code behind.	<button onclick=” “>

Examples to Implement in HTML Button Tag

Below are the examples of implementing in HTML Button Tag:

Example #1

Code:

<!DOCTYPE html> <html lang="en"> <head> <title> HTML button tag Example</title> </head> <body> <h2>HTML button tag Example </h2> <form action="/examples/html/action.php" method="post"> <p> Employee Name: <input type="text" name="Employee-Name"> <button type="submit" value="Submit">Click</button> <button type="reset" value="Reset">Reset</button> </p> </form> </body> </html> Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

Output:

Example #2

Code:

<!DOCTYPE html> <html> <head> <h3> <center> Example using CSS </center><h3> </head> <body> Normal Class <button type="button">Add to the First class</button> <hr /> Economic Class <button type="button" style="color: pink;"><b> Book Economic Class </b></button> <hr /> Bussiness class <button type="button" style="color: orange;"><b> Book Bussiness Class </b></button> <hr /> Departure <button type="button" style="font: bold 12px Open Sans;">Norway </button><br /> </body> </html>

Output:

Example #3

With CSS: Here, we have used padding, margin property. Here are some ways to look at the page better. To have a rounded corner in the button border-radius is used.

Code:

<html> <style> body { color: #000; height: 90vh; background: linear-gradient(-90deg, #a1c3d1 0%, #c48b9e 100%) no-repeat; text-align: center; } input { width: 280px; display: block; margin: 2rem auto; border: 3px solid #fbc7ff; padding: 7px; background: transparent; border-radius: 25px; outline: none; } ::placeholder { color: #00ced1; } .btn { background:#96f905; border: none; height: 3rem; border-radius: 20px; width: 220px; display: block; color: #96f905; outline: none; margin: 2rem auto; } </style> <body> <h1>HTML Form action Using Button</h1> <form action="/action_page.php" method="get"> <input type="text" name=" Full Name" placeholder="Enter Full Name" class="btn"> <input type="text" name=" Address" placeholder="Enter Address" class="btn"> <button type="press" value="Press"> Click </button> </form> </body> </html

Output:

Note: You can also increase the button size by giving < button type=” button” style=: font-size: 30px”>. btn in the above code is the bootstrap function class.

Example #4

The below example shows how to use the attribute autofocus with button element; in an example, when a page Loads, it focus on the first HTML control.

Code:

<!DOCTYPE html> <html> <head> <title> Button Demo <button>autofocus Attribute </title> </head> <body style="text-align:center"> <h1 style="color: blue;"> EDUCBA Web Tutorial </h1> <h2> Button Tag <button>autofocus Attribute </h2> <h2> Button Tag <button>autofocus Attribute </h2> <button id="GFG" autofocus> Press </button> <br> </body> </html>

Output:

Example #5

onclick attribute demo. In the below example, I have used JavaScript to take action in the button; meanwhile, it alerts a dialog box with a text message. The JavaScript function is used here to take the deciding action. onclick () is to make the button in action.

Code:

<!DOCTYPE html> <html> <head> <title>HTML On Click Button Demo</title> </head> <body> <h3> HTML On Click Button Demo</h3> <button onclick="alert('Hi Welcome to EDUCBA!')"> Press me... </button> </body> </html>

Output: Before button press

Alert Message – After Button click

Example #6

Code:

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="scripts.js"> </script> <link rel="stylesheet" href="styles.css"> <script type="text/javascript" src="scripts.js"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <p>The button loads to the next web page!</p> <a href="https://www.educba.com" target="_blank"> <button>Submit!</button> </a> </body> </html>

Output:

Conclusion

Therefore, we have seen the HTML Button tag, which is used to trigger any action and it is used to submit the content of the text in the HTML document. Being important aspects with respect to the website creates an easy button along with CSS and JavaScript to look colorful. You can also learn many options related to buttons.

Introduction to HTML Button Tag