In <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.
<button> button-title </button>
Let’s understand the syntax above with the help of an example.
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.
disabled
attribute<button disabled> button-title </button>
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.
form
attribute<button form = "form-id"> button-title </button>
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.
Attribute | Use | Syntax |
autofocus | Auto focuses a certain button. Can only be used for one button in a document. |
|
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. |
|
formaction | Allows you to give a URL where you want to submit the form data. Only applicable with attribute type="submit". |
|
Buttons are one of the most important additions to <button>
element in HTML.