HTML Buttons

Table of Contents +

In the previous section, we learned about HTML Date and Time Inputs. Now, we will learn about HTML buttons, which allow users to perform actions on a web page.

What are Buttons?

Buttons are HTML elements that allow users to perform actions on a web page. They are commonly used in forms for submitting data, resetting forms, and triggering JavaScript functions.

Basic Button

The most basic button is created using the <button> element. This creates a clickable button that can be styled and customized.

How to Create a Button

To create a button in HTML, you can use the <button> element. Here is an example:

<button type="button">Click Me!</button>

The output of the above code will look like this:

Output

When we click on the button, it will perform an action but we do not see anything happening because we have not added any interaction to the button yet. By default, it does not do anything we need to add some interaction manually.

🔲 Attributes of Buttons

Buttons have several attributes that can be used to change the appearance and behavior of the button. Here are some commonly used attributes:

Attribute Description Possible Values
type Specifies the type of button button, submit, reset
onclick Specifies a JavaScript function to run when the button is clicked JavaScript function name
disabled Disables the button, making it unclickable Boolean (true/false)

onclick attribute is used to specify a JavaScript function that will be executed when the button is clicked. For example:

<button type="button" onclick="alert('Button clicked!')">Click Me!</button>

When we click on the button, it will show an alert message saying “Button clicked!”.

🏷️ Types of Buttons

There are three types of buttons in HTML:

  • Button: A generic button that can be used for any action. It does not submit a form by default.
  • Submit: A button that submits a form when clicked. It is used to send form data to the server.
  • Reset: A button that resets all form fields to their default values when clicked.

We will use them in HTML forms article to submit and reset form data.

🛠️ Try it Yourself

  1. Create a folder named interactive-elements inside the html course folder.
  2. Create a file named buttons.mdx inside the interactive-elements folder.
  3. Create a basic HTML file with the title “HTML Buttons”.

🎊 What we have learned

  • ✅ We have learned how to create and use buttons in HTML.
  • ✅ We have explored the various attributes available for buttons.
  • ✅ We have discussed the different types of buttons and their uses.

🚀 What’s Next?

Next, we will learn about HTML Forms which allow users to submit data to a server.

Previous HTML Date and Time Inputs Next HTML Forms

Share & Connect

Share on LinkedIn