HTML Tutorial

HTML Tag: <button>

Purpose and Usage

The HTML <button> tag creates a clickable button that can perform various actions, such as submitting a form, navigating to a new page, or triggering custom JavaScript code.

Attributes

Key attributes of the <button> tag include:

  • type: Specifies the type of button (submit, reset, button - the default)
  • value: Sets the value of the button (displayed as text on the button)
  • name: Defines the name of the button, which is used for form submission
  • disabled: Disables the button and makes it unclickable

Examples

  • Simple Button:
<button>Click Me</button>
  • Button with Action:
<button onclick="alert('Hello World!')">Show Message</button>

Exploring the <button> Tag

To demonstrate the <button> tag, let's create a simple HTML example:

<!DOCTYPE html>
<html>
<head>
  <title>Button Example</title>
</head>
<body>
  <h1>Exploring the `<button>` Tag</h1>
  <button type="button" onclick="alert('Button Clicked!')">Click Me</button>
</body>
</html>

In this example:

  • The <button> tag creates a clickable button with the text "Click Me".
  • The type attribute is set to "button" (the default value).
  • The onclick attribute triggers a JavaScript alert when the button is clicked.

Accessibility and Usability

To make your buttons more accessible and user-friendly, consider the following:

  • Use descriptive text on the button that clearly indicates its purpose.
  • Provide alternative actions for keyboard users (e.g., using the Enter key to submit a form).
  • Consider the button's size, shape, and color for optimal visibility and usability.