Home »
HTML »
HTML Buttons
HTML Buttons
The <button> tag is used to create a clickable button on your webpage.
Content like text or image can be inserted within the <button> . . . . </button> tag. The type attribute should be specified for a <button>tag. Different browsers use different default type for the button element.
HTML Button tag can be used inside and outside the form-
- If you use it inside the form, it can work as the submit or reset button.
- If you use it outside the form, you can call JavaScript function by clicking on it.
HTML Button Tag
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Button Tag </title>
</head>
<body>
<button name="button" type="button">Click Here</button>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Button Tag </title>
</head>
<body>
<button name="button" type="button">Click Here</button>
</body>
</html>
Output
HTML Button : Calling JavaScript Function
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Button Tag Using JavaScript </title>
</head>
<body>
<button name="button" value="OK" type="button" onclick="hello()">Click Here</button>
<script>
function hello(){
alert("Hello HTML 5!");
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Button Tag Using JavaScript </title>
</head>
<body>
<button name="button" value="OK" type="button" onclick="hello()">Click Here</button>
<script>
function hello(){
alert("Hello HTML 5!");
}
</script>
</body>
</html>
Output
HTML Button Attributes
The<button> tag supports all global attributes and some specific additional attributes.| Attribute | Description |
|---|---|
| autofocus | It makes a button automatically get focused while the loading of the page. |
| disabled | It specifies that a button is disabled. |
| form | It specifies one or more forms that the button belongs to. |
| formaction | It specifies where to(webpage) send the form data when form is submitted. |
| formmethod | It is used to select appropriate method to send form-data. |
| formenctype | It specifies how form-data should be encoded before sending it to server. |
| formnovalidate | It specifies that the form data should not be validated on submission. |
| formtarget | It specifies where to display the response after submitting the form. |
| name | It specifies the name of the button. |
| type | It specifies the type of the button like submit or reset. |
| value | It specifies the value of the button. It only sends the value of button with the submit button. |
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<button> |
Recommended :