BeingXpert Learn & Build Future

14. HTML Buttons

What you will learn

  • How to create a button with <button>
  • The three button types: submit, reset, and button
  • When to use a button and when to use a link
  • How to disable a button

The button element

The <button> element creates a clickable button. Unlike <input>, it has opening and closing tags, so it can contain text and other inline elements.

Example

<button type="button">Click me</button>

Output

This button does nothing yet. To make it do something you need JavaScript, which comes in the JavaScript course.

The type attribute

Type What it does
submit Sends the form. This is the default inside a form.
reset Clears the form fields back to their starting values.
button Does nothing by itself. Used with JavaScript.

Example

<form action="/save" method="post">
  <label for="nick">Nickname</label>
  <input type="text" id="nick" name="nick">
  <button type="submit">Save</button>
  <button type="reset">Clear</button>
</form>

Output (a demo form that does not send data)




Always write the type attribute. A button inside a form without a type is a submit button, which surprises many beginners.

The input element as a button

You can also create buttons with <input>. The text comes from value. The <button> element is usually more flexible.

Example

<input type="submit" value="Send">
<input type="reset" value="Reset">

Disabled buttons

Add disabled to stop a button from being clicked. Browsers usually show it greyed out.

Example

<button type="button" disabled>Not available</button>

Output

Button or link?

  • Use a link (<a href>) to go to another page or place.
  • Use a button to perform an action: send a form, open a menu, show or hide something.

This matters for accessibility. Screen reader users expect a link to navigate and a button to act.

Common mistakes

  • Leaving out type and accidentally submitting a form.
  • Using a button to navigate to another page.
  • Using only an icon with no text or label. Add readable text or an aria-label.
  • Making a clickable <div> instead of a real button. It cannot be reached by keyboard unless you add extra work.

Exercise

Write a button that does not submit anything, has the text Open menu, and is disabled.

Show solution 
<button type="button" disabled>Open menu</button>

Knowledge check

1. What is the default type of a button inside a form?

submit

2. Which attribute makes a button unclickable?

disabled

3. Should a button be used to go to another page?

No. Use a link.

Summary

  • <button> creates a clickable button.
  • Set type to submit, reset, or button.
  • Buttons perform actions. Links navigate.
Scroll to Top