/

HTML / CSS / JavaScript Tutorial

HTML Element: <button>

[this page | pdf | back links]

The HTML <button> element indicates a clickable button. Inside a <button> element (unlike an <input> element) you can put content such as text or images. You should typically specify the type attribute for <button> element as different browsers do not necessarily default to the same type. Within a <form> element you should also bear in mind that different browsers may submit different values.

 

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

 

Attribute

Description

More

autofocus

Specifies whether element should automatically get focus when page loads

Here

disabled

Specified element(s) to be disabled

Here

form

Name of the form that element belongs to

Here

formaction

Where to send form-data to when form submitted

Here. Only for type = submit

formenctype

How form-data should be encoded before sending it to a server

Here. Only for type = submit

formmethod

How to send form-data (i.e. which HTTP method to use)

Here. Only for type = submit

formnovalidate

Specifies that form-data should not be validated on submission

Here. Only for type = submit

formtarget

Specifies where to display the response that is received after submitting form

Here. Only for type = submit

name

Name of element

Here

type

Type of element

Here

value

Value of element

Here

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods, and additional properties with the same name and meaning as the attributes of the underlying HTML element referred to above. However, the DOM versions of formaction, formenctype, formmethod, formnovalidate and formtarget need to adopt the JavaScript name capitalisation convention, i.e. need to be: formAction, formEnctype, formMethod, formNoValidate and formTarget respectively. The default style applicable to this element is shown here.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML:<br>
<button onclick="showmessage()">Click to show message</button>
<em id="msgtxt"></em>

<br><br>Created using JavaScript:<br>
<span id="element"></span>
<em id="msgtxt2"></em>

<script>
var x = document.createElement("BUTTON");
var txt = document.createTextNode("Click to show message 2");
x.appendChild(txt);
x.setAttribute("onclick","showmessage2()");
document.getElementById("element").appendChild(x);

function showmessage() {
  var txt = document.createTextNode("hello");
  document.getElementById('msgtxt').appendChild(txt)
}

function showmessage2() {
  var txt = document.createTextNode("hello2");
  document.getElementById('msgtxt2').appendChild(txt)
}
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile