Mastering Button Tag in HTML

Mastering Button Tag in HTML

3 mins readComment
Esha
Esha Gupta
Associate Senior Executive
Updated on Apr 16, 2024 12:28 IST

Have you ever wondered how interactive buttons on websites are created? They're often made using the HTML <button> tag, which allows developers to add clickable elements for various actions like submitting forms, executing scripts, or controlling page behaviour. Let's understand more!

In HTML (Hypertext Markup Language), tags are the basic building blocks used to create web pages. They are used to define and structure the content of a webpage. In this blog, we will dive deeper into button tag in HTML.

Span Tag in HTML
Span Tag in HTML
Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the tag in HTML comes into...read more

All About br Tag in HTML
All About br Tag in HTML
Have you ever wondered how to create a simple line break in your HTML content? The tag is your solution. It's a self-closing element used to insert line breaks,...read more

Learning div Tag in HTML
Learning div Tag in HTML
Have you ever wondered what keeps web pages organized and styled consistently? The HTML tag plays a crucial role in this. It's a versatile, block-level element used primarily as...read more

Learning ul Tag in HTML
Learning ul Tag in HTML
Have you ever wondered how to organize items on a webpage without any specific order neatly? The HTML tag is the solution, designed to create unordered lists with bullet...read more

All About meta Tag in HTML
All About meta Tag in HTML
Have you ever wondered how web pages communicate important information to browsers and search engines? HTML tags play a pivotal role in this process. They reside in the head...read more

Knowing nav Tag in HTML
Knowing nav Tag in HTML
Have you ever wondered how websites organize their menus and links for easy navigation? The HTML tag is the key for this which is specifically designed to define navigation...read more

Table of Content

 

What is a Button Tag in HTML?

The <button> tag in HTML is used to create a clickable button within a web page. This tag is versatile and can be used for various purposes, such as submitting forms, handling user interactions, or triggering JavaScript functions. Buttons can be used for navigation purposes, like moving to the next step in a process or opening a modal window. These are integral in controlling various UI elements like toggles, dropdowns, tabs, and accordions.

Syntax of Button Tag in HTML

<button type="attribute">Button Text</button>

In the syntax above,

1. type (optional): This attribute specifies the button's behaviour and can be one of the following

  • submit: The default value if the type attribute is not specified. It submits the form data to a server. This is used within a <form> element.
  • reset: Resets all the form's fields to their initial values.
  • button: A regular button with no default behaviour. It's typically used to execute JavaScript code when the button is clicked.

2. Button Text: This is the label displayed on the button. It can be plain text or include HTML (like images or formatting tags).

Usage of HTML Button Tag with Examples

Example 1: Submit a Form

Problem Statement: Create a button to submit a form containing a text input field.


 
<!DOCTYPE html>
<html>
<head>
<title>Form Submission</title>
</head>
<body>
<form action="submit-endpoint">
<input type="text" name="inputField" placeholder="Enter Text">
<button type="submit">Submit</button>
</form>
</body>
</html>
Copy code

Output

 

Example 2: Reset a Form

Problem Statement: Implement a button to reset the fields of a form to their default values.


 
<!DOCTYPE html>
<html>
<head>
<title>Form Reset</title>
</head>
<body>
<form>
<input type="text" name="inputField" placeholder="Enter Text">
<button type="reset">Reset</button>
</form>
</body>
</html>
Copy code

Output

 

Example 3: Toggle Content Visibility

Problem Statement: Use a button to toggle the visibility of a text paragraph.


 
<!DOCTYPE html>
<html>
<head>
<title>Toggle Visibility</title>
</head>
<body>
<button type="button" onclick="toggleVisibility()">Toggle Text</button>
<p id="textParagraph" style="display: none;">This is a hidden text.</p>
<script>
function toggleVisibility() {
var paragraph = document.getElementById('textParagraph');
paragraph.style.display = paragraph.style.display === 'none' ? 'block' : 'none';
}
</script>
</body>
</html>
Copy code

 

Example 4: Change Button Text on Click

Problem Statement: Change the text of a button each time it is clicked.


 
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Button Text</title>
</head>
<body>
<button type="button" id="dynamicButton" onclick="changeText()">Click Me</button>
<script>
function changeText() {
var button = document.getElementById('dynamicButton');
button[removed] = button[removed] === 'Click Me' ? 'Clicked!' : 'Click Me';
}
</script>
</body>
</html>
Copy code

Output

 

 

Top 62+ HTML Interview Questions and Answers for 2024
Top 62+ HTML Interview Questions and Answers for 2024
Here are the HTML interview questions most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead...read more

How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

HTML Attributes Explained with Examples
HTML Attributes Explained with Examples
HTML attributes provide additional information about HTML elements. They are used to modify the behavior or appearance of an element. Attributes are specified within the opening tag of an element...read more

Creating HTML Links – Tutorial With Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples
HTML Lists: Ordered and Unordered Lists Explained with Examples
This tutorial explains how to create different types of lists: unordered, ordered, and description lists in HTML. In this blog, you will learn what are HTML lists and understand how...read more

Key Takeaways

  • The <button> tag in HTML is a versatile element used to create clickable buttons on web pages.
  • It can perform various actions like submitting forms, triggering JavaScript functions, or resetting form fields, depending on the specified type attribute (submit, reset, or button).
  • Buttons can be easily styled with CSS for a customized appearance and are essential for interactive and user-friendly web design.
  • Additionally, ensuring accessibility in button design is crucial for a wide range of users, including those using assistive technologies.

FAQs

What is a button tag?

The button tag in HTML is used to create a clickable button, which can be used for submitting forms, handling user interactions, or triggering JavaScript events.

How do you add text to a button?

To add text to a button, you simply place the desired text between the opening and closing button tags. 

Can a button tag be used for submitting a form?

Yes, a button tag can be used for submitting forms. By default, when placed inside a form, a button will submit the form unless the type attribute is set to a different value like "button" or "reset".

How do you make a button tag perform a specific action?

To make a button perform a specific action, you can use JavaScript. By adding an event listener to the button, such as an onclick event, you can define a JavaScript function that runs when the button is clicked.

Is it possible to style a button tag with CSS?

Yes, button tags can be styled using CSS. You can apply styles like color, background, borders, padding, and more to customize the appearance of your button.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio