<button> ... </button>
Available in versions: 4.0
Browser compatibility: Explorer 4, 5 Netscape 6
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, iframe, input, isindex, label, select, or textarea tags.
The closing tag is mandatory.
Core Attributes
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
Attributes
accesskey
The accesskey attribute allows you to designate a key on the keyboard that when pressed,
along with the alt or meta key, will bring focus to the button element.
This attribute is poorly supported.
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.
onblur
The onblur attribute is an event that allows a JavaScript code to execute when an element loses focus
(for example, the mouse was clicked onto another element or a tab navigation directed
the cursor elsewhere).
onfocus
The onfocus attribute is an event that allows a JavaScript code to execute when an element comes into focus
(for example, the mouse was clicked onto the element or a tab navigation brought the
cursor to the element).
tabindex
The tabindex attribute specifies an integer that defines the rank in the tabbing
order for the specified element when you use the keyboard to navigate (tab through) a page.
This attribute is poorly supported.
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:
<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>
Output:
|