<button> ... </button>
The button tag is used to create a button form control (field).
Control is a technical term that refers to the various elements (buttons,
check boxes, radio buttons, text areas) that can be used inside a form
to gather information.
The four tags that can be used to build a form are:
button
input
select
textarea
Specifically, the button tag is used to create a button in a form
that can have content, consist of an image, and have the illusion of 3-dimensions.
The buttons created using the input tag, including the type="image",
cannot have content or display with a 3-D appearance.
(Otherwise, there is little difference.)
Any text or images placed between the opening and closing button tags will be
displayed on the button.
The text can include most HTML tags and they will perform as expected.
The one major exception is that you cannot display an image map using the map
and area tags.
A button element should not contain other button tags, nor should it contain
fieldset, form, input, label, select, or textarea tags.
The separate closing tag is mandatory.
Attributes and Events
accesskey
class
dir
id
lang
ondblur
onclick
ondblclick
onfocus
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
tabindex
title
disabled
The disabled attribute is a Boolean value that, if present, prevents the button
from functioning.
In some browsers, the button will appear to be greyed out.
name
The name attribute is used to assign a unique string of characters as the name of the button.
type
The type attribute defines the type of button.
The permitted values are button, reset, or submit.
value
The value attribute assigns a value to the button element.
This can be changed later using script code.
When you click on either button with the mouse, an alert is displayed.
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">
<head>
<title>DevGuru XHTML button Tag Example</title>
</head>
<body>
<form action="html_button.html" method="get">
<button type="button" onclick="JavaScript: alert('Image Button')">
<img src="images/guru.gif">
</button>
<p />
<button type="button" onclick="JavaScript: alert('Text Button')">
Please Click This Button!
</button>
</form>
</body>
</html>
Output:
|