Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
communitycreator

What is the HTML <button> tag?

Faizan Tanveer

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

In HTMLHypertext Markup Language, the <button> element is used to create a button. A button is usually made to submit a form, access different pages of a website, and much more. In short, using a button makes the user experience more exciting.

How to create a simple button

Syntax

<button> button-title </button>

Let’s understand the syntax above with the help of an example.

  • HTML

In the example above, we create a simple button. In place of button-title, you can enter any name you want.

It’s important to name buttons in a way that portrays the purpose of that button.

You can alter the <button> element with different attributes associated with it. Let’s look at some examples.

The disabled attribute

Syntax

<button disabled> button-title </button>
  • HTML
  • JavaScript

A disabled button is not clickable and is used when a button is only to be enabled for a certain action, so by default, that button is disabled. The example above creates a disabled button with the disabled keyword inside the opening tag of the <button> element.

The form attribute

Syntax

<button form = "form-id"> button-title </button>
  • HTML

In the example above, we create a form. The “Submit” button refers to the form being submitted with form-id = "form1". When clicked, the “Submit” button will submit the form with the corresponding ID. On the backend, the server will process the request and redirect the user to any_action_page upon successful submission of the form. For the sake of this shot, our example produces a confirmation message that your “response has been submitted.”. Normally, the request is processed and feedback is sent to the user if the form is submitted successfully or not.

Many attributes can be used in the <button> element. Below is the list of some attributes, their use, and syntax.

Some attributes used in the <button> element

Attribute

Use

Syntax

autofocus

Auto focuses a certain button.

Can only be used for one button in a document.

<button autofocus> button-title </button>

name

Gives a name to a button.

Many buttons can share the same name in a document, as it allows the submission of different values when submitting a form.


<button name="button-name"> button-title </button>

formaction

Allows you to give a URL where you want to submit the form data.

Only applicable with attribute type="submit".


 <button type="submit" formaction="/URL">Submit my form</button>


Buttons are one of the most important additions to UI/UXUser Interface/User Experience, as seen in the <button> element in HTML.

RELATED TAGS

html
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring