BUTTON in HTML

1. <button> Tag

The <button> tag in HTML is used to create clickable buttons. It can be customized in various ways and can contain not just text but also images or other HTML content (like icons).

Example:

<button >SUBMIT</button>

type Attribute in <button>

The type attribute in the <button> tag specifies the button's behavior within a form. There are three primary values for the type attribute:

1. submit (default if no type is specified): When the button is clicked, the form it is part of is submitted
   Example:

    <form action="/submit" method="POST">
        <button type="submit">Submit Form</button>
      </form>
   

2. reset: This resets all the form fields to their default values (i.e., it clears the form).
   Example:

     <input type="text" name="name" placeholder="Enter name">
        <button type="reset">Reset Form</button>
   

3. button: This creates a button that does nothing by default. It can be used for custom actions (such as triggering JavaScript functions) without affecting form submission.

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

2.<input> in <button>

You can place an <input> element inside the <button> tag, but it's generally not recommended because <button> tags can already act as buttons and support multiple types of content (text, images, icons, etc.). Instead, you would use either a button (<button>) or an <input> of type button, submit, or reset, depending on your needs.

Example of <input type="submit">:

<form action="/submit" method="POST">
    <input type="submit" value="Submit Form">
  </form>

Summary

• <button> tag: Creates buttons with flexible content (text, images, etc.).

• type attribute:

  • submit (default) submits the form.

  • reset resets form fields to their default values.

  • button does nothing by default and can be customized with JavaScript.

• <input> as a button: Simpler but less flexible than <button>, primarily used for single-action buttons like submit or reset.