Qarpeo LogoInstitute

<button>

The HTML <button> element creates a clickable button that can execute actions, submit forms, or interact with scripts, and may include text, images, or both.

<button> Tag

The <button> element is used to define a clickable button that can perform various functions. It is commonly used to submit forms, execute JavaScript code, or enhance user interaction on a webpage. Unlike the <input> element with type="button", the <button> tag allows the inclusion of text, images, and other HTML elements inside it, providing greater flexibility.

Syntax

Below is the basic syntax for creating a button using the <button> tag:

index.html
<button type="button">Button Text</button>

Button Demo

index.html
<button name="button">Click me</button>

Definition and Usage

The <button> tag is primarily used to create a clickable button. It can contain text, images, or a combination of both, making it more versatile than the <input> button type. Buttons created with the <button> tag can be customized using CSS to enhance their appearance and functionality.

You can include various HTML elements within a <button>, such as <i>, <b>, <strong>, <br>, and <img>. This flexibility is not available when using the <input> element for buttons.

Attributes of the <button> Element

The <button> tag supports several attributes that define its behavior and appearance:

  1. type – Specifies the button type. Common values include:
    • "button" – A standard clickable button that does not submit a form.
    • "submit" – A button that submits a form when clicked.
    • "reset" – A button that resets all form fields to their default values.
  2. name – Assigns a name to the button, which can be used when sending form data.
  3. value – Defines the value associated with the button, which is sent to the server when the form is submitted.
  4. disabled – Disables the button, preventing user interaction.
  5. autofocus – Automatically focuses on the button when the page loads.

Button with Multiple Elements

Below is an example demonstrating how text and an image can be combined within a <button>:

index.html
<button type="button">
  <img src="icon.png" alt="Button Icon" width="20"> Click Me
</button>
Always use the type attribute in the <button> element to prevent unexpected behavior. If omitted, the default behavior within a <form> is to submit the form (type="submit").

Conclusion

The <button> tag in HTML is a versatile element used to create interactive buttons on webpages. Unlike the <input> button, it allows the inclusion of text, images, and other elements within the button, offering greater flexibility. It supports various attributes like type, name, and disabled, which control its behavior. Always specifying the type attribute ensures the correct functionality, especially in forms.

Forms

HTML forms gather user input and send it to a server. They include elements like text fields, checkboxes, and buttons, with attributes for validation and submission. Combined with CSS and JavaScript, forms become interactive and user-friendly.

<datalist>

The HTML <datalist> element offers a set of predefined options for an <input> element, providing suggestions as users type to improve form usability and validation.