HTML: Button Tag

Author: Ronald S. Holland
at
Total Application Works

[HOME] [Consulting] [Design] [Maintenance] [Project] [Testing] [Training] [Turnkey] [Java] [C++] [SQL] [HTML] [JavaScript ]

Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
<html> <head> <title>Example of a link </title> </head> <body> <a href="http://sumtotalz.com/TotalAppsWorks/HTML/Button.html"> Button Tag </a> This is a link to a 2006 Corolla for sale 2006 Corolla for sale - 13,400 miles </table> </body> </html>

Introduction
What is a Button?

Introduction

The purpose of this tutorial is to show you how to write a HTML page using the Button tag. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. In the following example, we will show you the code for our page examples that use the Button tag. The <Button> tag allows the user to create an event that can be responded to by event attributes or by client side script code. In the cases shown below, we use a Button and a link to respond to the event created by the button.

What is a Button?

The HTML <button> tag defines a push button. You can define it in two ways:

<INPUT TYPE=BUTTON..., as in Figure 1, or
<button ..., as in Figure 1.

In both cases, the onclick event has been added to the button definition. Let's explore creating a button using <INPUT TYPE=BUTTON in Figure 1.

Source Code	Displayed by your Browser
<INPUT TYPE=BUTTON onClick="window.location='http://www.autotrader.com/fyc/vdp.jsp?car_id=306286054'" value="click to see car for sale"> </button>">
Figure 1: Button onclick event

In Figure 2 we will create a button, using the Button tag.

Source Code	Displayed by your Browser
<button onClick="window.location='http://www.autotrader.com/fyc/vdp.jsp?car_id=306286054'">click to see car for sale">
Figure 2: Button onclick event

Optional Attributes

The <button> tag supports the following optional attributes:

Attribute	Value	Description
disabled	disabled	Specifies that a button should be disabled <button type="button" disabled="disabled">Click to see</button>
name	name	Specifies the name for a button <button name="subject" type="submit" value="click me">Push Button</button>
type	button reset submit	Specifies the type of a button <button type="reset" value="Reset">Reset </button> <button type="submit" value="Submit">Submit </button>
value	text	Specifies the underlying value of a button
Figure 3: Optional Attributes

Standard Attributes

The <button> tag supports the following standard attributes:

Attribute	Value	Description
accesskey	character	Specifies a keyboard shortcut to access an element
class	classname	Specifies a classname for an element
dir	rtl ltr	Specifies the text direction for the content in an element
id	id	Specifies a unique id for an element
lang	language_code	Specifies a language code for the content in an element
style	style_definition	Specifies an inline style for an element
tabindex	number	Specifies the tab order of an element
title	text
xml:lang	language_code	Specifies a language code for the content in an element, in XHTML documents
Figure 4: Standard Attributes

Event Attributes

The <button> tag supports the following event attributes:

Attribute	Value	Description
onblur	script	Script to be run when an element loses focus
onclick	script	Script to be run on a mouse click
ondblclick	Script to be run on a mouse double-click
onfocus	script	Script to be run when an element gets focus
onmousedown	script	Script to be run when mouse button is pressed
onmousemove	script	Script to be run when mouse pointer moves
onmouseout	script	Script to be run when mouse pointer moves out of an element
onmouseover	script	Script to be run when mouse pointer moves over an element
onmouseup	script	Script to be run when mouse button is released
onkeydown	script	Script to be run when a key is pressed
onkeypress	script	Script to be run when a key is pressed and released
onkeyup	script	Script to be run when a key is released
Figure 5: Event Attributes