<button> Tag in HTML

Syntax of <button> Tag in HTML

Attributes of <button> Tag in HTML

Buttons in HTML can have various attributes based on the type of button required/used. The attributes which can be used with button tag are :

• autofocus: It is used to specify that the button should automatically get focus or not when the page loads
• disabled: It is used to indicate whether the element is disabled or not. If this attribute is set, the element is disabled.
• form: It is used to create a form for user input. There are many elements that are used within the form tag.
• type: It is used to specify the type of button for button elements. The type attribute is also used in the <input> element to specify the type of input to display. Different browsers use different default types for button elements.
• value: It is used to specify the value of the element with which the button tag is used. It has different meanings for different HTML elements.

There are many other Attributes, such as formaction, formenctype, formmethod, formnovalidate, and formtarget, which are used with the specific use case of a button.

How to Use <button> Tag in HTML?

In order to interact with the system, the user has to interact with the buttons in HTML present in the user interface, which is present either inside a form or outside a form.

Inside the form, the button in HTML works as a submit button or a reset button.

If we want to use the button in HTML outside the form for any other purpose, we have to call the Javascript function on it.

<button> Tag Examples

There are various ways in which button tags in HTML can be used on a webpage. Let's see some of the most common ones.

Example 1: Simple Button tag example

Example 2: Calling Javascript function

In the above button tag, an onclick event is triggering the myFunction function. Output

• Submit form

Accessibility Concerns

Icon Buttons

There are buttons on the webpage which have no name and are only visible as a clickable icon. These buttons do not have any accessible name. When the HTML code is parsed, an accessible tree is created, which is used by the screen reader to navigate the page content.

If the button is only an icon, then we can provide an accessible name to the button by adding text inside the button. The text gives an accessible name to the button, which is then used by the screen reader to navigate. Icon with text inside the button will not look good to the user, so we can hide the text by using CSS properties to hide the text visibility but still use the text for better accessibility.

Size and Proximity

Buttons on the screen should be large enough so that the user can easily interact and activate the button. The screen can be used on different devices, which changes the size of the page according to the screen. So, the button should be responsive enough to provide a size compatible with every screen size.

Proximity If there is more than one button in close proximity to each other, then there should be proper spacing between the buttons for easy interaction by the user. Sometimes due to less spacing, the user gets a very bad user experience while interacting with the buttons.

ARIA state information

The ARIA attribute used by the button to have state information is aria-pressed. aria-pressed is used in case the button is used as a toggle button. aria-pressed can have value as :

• false - the button is not currently pressed.
• true - the button is currently pressed.
• mixed - the button is considered to be partially pressed.
• undefined- no action is taken on the button press.

Clicking and focus

On clicking the button, the button is focused depending on the browser which is being used to render the HTML code. The <input> tag acts the same in the case of clicking and focusing.

Browser Support

The button tag in HTML is supported by every browser and is commonly used to render HTML pages.

Related tags

Some tags related to button tags in HTML are

• HTML Input tag
• HTML Link Tag