When to use which ATTRIBUTES in <button> HTML Tag

The HTML Button Element (<button>) is used to represent clickable button.

ATTRIBUTES

• autofocus || This attribute is used when you want your button to be in focus when the page loads. It is a boolean attribute which means it does not take any value

<button type="submit" autofocus></button>

• disabled || This attribute is used when you want to disable a button. Generally used when user already clicked the button and you want some time for processing, so you disable it using JavaScript. It is also a boolean attribute.

<button type="button" disabled></button>

• name || This attribute is used to specify the name of a button, which could be used to reference form-data after form has been submitted. For example, if you have many forms, you can check what are your data by checking the name of your button attribute on server.

<button name="query_from"></button>
<button name="login_from"></button>
<button name="signup_form"></button>

• type || This attribute is used to specify the type of a button. It is a good practice to specify this attribute. It takes 3 values: button(clickable button), submit(submits form-data), reset(resets form-data to initial value).

<button type="button|submit|reset"></button>

Apart from these, you can also specify form prefixed (form*) attributes. These attributes are helpful when you use button to submit your form, but you have to use them with caution as they override attributes defined in <form> tag.

• form || HTML5 lets you define your form elements outside of the form provided you specify the id value of form as a value of this attribute.

<form id="login-data" action="./submit.php" action="POST">
</form>
  ...
  ...
  ...
<button type="submit" name="login_form" form="login-data"></button>

• formaction || This attribute is used to specify where to send form-data when form is submitted.

<button type="submit" formaction="./submit.php"></button>

• formmethod || This attribute is used to set the HTTP method(GET or POST) for sending form-data to the action URL.

<form action="./submit.php" method="POST>
  ...
  ...
  <button type="submit" formmethod="GET" ></button>
</form>

• formnovalidate || This attribute is used to specify that the input element should not be validated when submitting the form. It overrides the value of form's novalidate attribute.

<form method="GET" action="./submit.php">
  ...
  ...
  <button type="submit" formnovalidate name="query_form" 
value="submit"></submit>
</form>

• formtarget || This attribute specifies where to load action page after submitting the form. This attribute overrides form's target value.

<form method="POST" action="./submit.php">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit" name="login_form" formtarget="_blank"></button>
</form>

NOTE || These form prefixed attributes should always be used on button with type="submit".

Except these one can always specify global atttributes: class, id, tabindex and more.