A <button> tag specifies a clickable button on the HTML document.
Between the <button> tags, you can put content, like text or images. This is different from the button created using <input> tag, which only takes text as content.
Syntax:
<button type="submit">Click Here!</button>
Atributes:
Following are the associated attribute supported by HTML 4:
| Attributes | Value | What it does |
|---|---|---|
| disabled | disabled | Disables the button |
| name | name | Specifies a name for the button. The name is for referencing the button in HTML form, JS, etc. |
| type | button or reset or submit | Sets the type of the button. A button with button type is a simple clickable button, with submit type it submits form-data, and with reset type it resets form-data. |
| value | text | Sets an initial value for the button. This value is sent along with the form-data. |
HTML 5 supports the following extra attributes:
| Attributes | Value | What it does |
|---|---|---|
| autofocus | autofocus | Should the button automatically get focus when the page loads. For example, see Google. As the page gets loaded completely, the text-box get focus automatically. |
| form | form_id | Specifies one or more forms the button belongs to. |
| formaction | URL | Specifies where to send the form-data once the submit type button is pressed. |
| formmethod | get or post | Specifies how to send the form-data. Only for submit type button. |
| formtarget | _blank or _self or _parent or _top or framename | Specifies the location where the result is to be displayed after submitting form-data. |
Example:
<html>
<head>
<title>Button Tag example</title>
</head>
<body>
<form>
First name:<br>
<input type="text" name="firstname" value="Free">
<br>
Last name:<br>
<input type="text" name="lastname" value="CodeCamp">
<br><br>
<input type="submit" value="Submit" formtarget="_self">
</form>
</body>
</html>All major browsers support the <button> tag. <button> tag also supports event attributes in HTML.
Note: Different browsers may send different values if you use <button> element. It is advised to either specify the button value or use the <input> tag to create button in an HTML form.
Other resources:
- Other attributes:
| Attributes | Link |
|---|---|
| formenctype | https://www.w3schools.com/TAgs/att_button_formenctype.asp |
| formnovalidate | https://www.w3schools.com/TAgs/att_button_formnovalidate.asp |
<input>tag: https://www.w3schools.com/TAgs/tag_input.asp- Event Attributes: https://www.w3schools.com/TAgs/ref_eventattributes.asp
formtargetattribute values: https://www.w3schools.com/TAgs/att_button_formtarget.asp- HTML Form: