# 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:

```html
<button >SUBMIT</button>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726556811273/2988fbbe-a5f5-4987-aa4c-f4e07b24bbf5.png align="center")

### `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:
    
    ```html
    <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:
    
    ```html
     <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.
    
    ```html
    <button type="button" onclick="alert('Hello!')">Click Me</button>
    ```
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726557298647/10653c09-d441-4fb5-b65f-4db3dd63a679.png align="center")

### 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">`:

```html
<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`.