HTML<buttons > tag

What is an HTML Button?

An HTML button is an interactive element used to create a clickable button on a webpage. Different types of buttons are available in HTML forms to submit data, clear form fields, and perform various actions on a webpage.

Syntax:

<button>Button Text</button>

• Simple Button: It does not use any attribute name or value.

Example:

<button>Click Me</button>

Using Attributes and Values:

An HTML button can also use attributes and values to provide additional information or define its behavior.

Syntax:

<button type="button" id="button1" class="button" title="Click this button">Button Text</button>

<button type="button"
        id="button1"
        class="button"
        title="Click this button"
        name="button"
        value="Click Me"
        autofocus>
    Click Me
</button>

Types of HTML Buttons

1. Submit Button
2. Reset Button
3. Input Button

How to Create Different Types of HTML Buttons

1. Submit Button

A Submit Button is used to submit form data when the user clicks the button.

Syntax:

<input type="submit" name="submit" value="Submit">

• type: The type attribute specifies the type of button. Here, type="submit" creates a Submit Button.

Example 1:

<input type="submit">

Output:

• name="submit" and value="Submit": The name attribute defines the name of the button, while the value attribute defines the text shown on the button. You can use different names and values, such as name="send" and value="Send".

Note: If the value attribute is not specified, the browser displays a default label on the Submit Button.

Example 2:

<input type="submit" name="send" value="Send">

Output:

2. Reset Button

A Reset Button is used to clear the entered data in a form when the user clicks the button.

Syntax:

<input type="reset" name="reset" value="Reset">

• type: The type attribute specifies the type of button. Here, type="reset" creates a Reset Button.

Example 1:

<input type="reset">

Output:

• name="reset" and value="Reset": The name attribute defines the name of the button, while the value attribute defines the text shown on the button. You can use different names and values, such as name="clear" and value="Clear".

Note: If the value attribute is not specified, the browser displays a default label on the Reset Button.

Example 2:

<input type="reset" name="clear" value="Clear">

Output:

3. Input Button

An Input Button creates a simple clickable button that can be used to perform an action on a webpage.

Syntax:

<input type="button" name="button" value="Click Me">

• type: The type attribute specifies the type of button. Here, type="button" creates an Input Button.

Example 1:

<input type="button">

Output:

• name="button" and value="Click Me": The name attribute defines the name of the button, while the value attribute defines the text shown on the button. You can use different names and values, such as name="click" and value="Click Here".

Note: The value attribute shows the text on the Input Button. If you do not use value, no text is shown on the button.

Example 2:

<input type="button" name="click" value="Click Here">

Output:

List of HTML Button Attributes:

1. Basic Button Attributes

• type
• name
• value
• disabled
• autofocus

2. Form-Related Button Attributes

• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget

3. Popover-Related Button Attributes

• popovertarget
• popovertargetaction

4. Global Attributes

• id
• class
• style
• title
• hidden
• tabindex
• accesskey
• contenteditable
• dir
• draggable
• lang
• spellcheck
• translate

5. Custom Data and Accessibility Attributes

• data-*
• aria-*