HTML: Button Tag

Author: Ronald S. Holland
at
Total Application Works




To contact us



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

© 2002 - 2013 All Rights Reserved Total Application Works


    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>
    </table>
    </body>
    </html>


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:

  1. <INPUT TYPE=BUTTON..., as in Figure 1, or
  2. <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
name name Specifies the name for a button
type button
reset
submit 
Specifies the type of a 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











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


To contact us

© 2002 - 2013 All Rights Reserved Total Application Works