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