HTML <button> Tag

The HTML button tag is an important form-related element that is used in developing a web page with buttons that can be clicked. Modern websites make extensive use of buttons to submit forms, reset form data, trigger JavaScript actions, and perform interactive tasks.

Simply, the button tag represents a button that may either be an internal or external button in an HTML form. A button can either be used to submit data, reset a form or execute JavaScript code, depending on its usage.

Syntax

The content written between the opening and closing tags is displayed on the button.

Note: It is strongly recommended to always specify the type attribute. Browsers will use different buttons on a button press when the type is not specified.

Common Button Types in HTML <button> Tag

In HTML, the <button> tag is used to create clickable buttons. The behavior of a button depends on the value of the type attribute. There are different kinds of button types in HTML, which are as follows:

Using <button> Inside and Outside a Form

The behaviour of a button depends on its placement:

• Inside a Form: It works as a submit or reset button and sends form data to the server.
• Outside a Form: It is used to call JavaScript functions and does not submit any data.

Basic HTML Button Example

Output:

Click Here

Explanation:

type="button" is necessary in order not to submit a form. The button has the text "Click Here" on it and nothing is done unless JavaScript is included.

Calling JavaScript Using HTML Button

Buttons are used to trigger JavaScript functions a lot of times on user interactions.

Output:

 

"Click Here" button (An alert box appears saying Welcome to TpointTech)

Explanation:

The onclick attribute performs JavaScript on clicking and an alert is shown on clicking a button. Therefore, button does not depend on any form.

HTML Button as Submit Button

Buttons inside a form can be used to submit user data.

Output:

Explanation:

A click on the Submit button will submit the form data as default is GET where not indicated.

HTML Button as Reset Button

A reset button clears all user-entered data from a form.

Output:

Explanation:

This is an example of the clear input fields. This comes in handy in long forms because it does not have to transfer the data to the server.

Difference Between <button> and <input type="button">

Both <button> and <input type="button"> are used to create clickable buttons in HTML, but they have important differences in usage and features, which are given below:

Attributes of HTML <button> Tag

The <button> tag supports several attributes that control its behavior, appearance, and functionality. Common Button Attributes are as follows:

Disabled Button Example

Output:

Disabled Button (not clickable)

Explanation:

This shows how the user is not allowed to press the button because it is inactive. This is applied when there is no action permissible and it is seen as good user experience (UX).

Example: Styling HTML Buttons Using CSS

Output:

A blue styled button with white text

Explanation:

The background-color property defines the button colour, while padding increases clickable area. The cursor: pointer element makes the button look like it can be clicked, which makes users easier to use.

Accessibility Considerations

Accessibility is an important part of modern web development. HTML <button> elements are accessible by default, however, developers have to adhere to best practises to make it available to all users, including keyboard and screen reader users.

Important Points:

• Buttons should be reachable using the Tab key
• Button text should clearly describe the action
• Disabled buttons should not confuse users
• Avoid using <div> or <span> instead of <button>

Output:

Submit

Explanation:

The aria-label attribute assists a screen reader in the purpose of the button. This will make it more accessible to the visually impaired users, and enhance adherence to the standards of web accessibility.

Using Multiple Buttons in a Single Form

An HTML form may contain more than one button to carry out various functions like submit, reset or a set of custom JavaScript processing.

Output:

Explanation:

This example shows the ability to have multiple buttons in a form such as the ones where 'Submit' forwards form data, the ones with the label 'Clear' shift the input fields and the ones with the label 'Help' execute a JavaScript function without form submission.

Using formaction Attribute with HTML Buttons

The formaction attribute allows a button to submit form data to a specific URL, overriding the form's default action.

Output:

Explanation:

On clicking the first button, the form is sent to default.html. On clicking the second button, the form will be submitted to tpointtech.html. This attribute is applicable where a single form should have a number of submission targets.

Common Mistakes While Using HTML <button>

Even though the <button> tag is simple, developers make mistakes regularly while using it.

Common Errors:

• Not specifying the type attribute
• Using buttons inside links
• Using <div> instead of <button> for clickable actions
• Forgetting to disable buttons during form submission
• Using vague button text like "Click Here"

Example (Incorrect):

Corrected Example:

Explanation:

Specifying the type attribute avoids unexpected behaviour. Clear button text improves usability and accessibility.

Security Considerations

Buttons themselves are not dangerous, but actions activated by the button have to be done safely, particularly form submissions and JavaScript.

Best Security Practices:

• Always validate user input on the server
• Do not trust JavaScript-only validation
• Avoid inline JavaScript for sensitive operations
• Disable submit buttons after first click to prevent duplicate submissions

Example:

Output:

 

Submit Securely (disabled after click)

Explanation:

This example disables the button after clicking once, the button is switched off to avoid clicking on it more than once. However, server-side validation is still mandatory for security.

Supporting Browsers

Element	Chrome	IE	Firefox	Opera	Safari
<button>	Yes	Yes	Yes	Yes	Yes

Conclusion

The HTML <button> tag is an instrumental element in interacting with the user through the web pages. In addition to basic clicking, buttons help in form submission, reset information, running JavaScript, making accessibility more convenient, and increasing security.

It is possible to create professional web applications by applying the best practises, correct attributes, and writing meaningful button text. In modern times, the use of the tag button is the solution to use rather than the use of the old-fashioned input-based buttons.