Java Reference
In-Depth Information
in which you want users to enter their city and the other in which you want them to enter their state.
Also say that the input into the state text box is checked to make sure that the specifi ed city is in that
state. If the state does not contain the city, you put the focus back on the state text box so that the user can
change the name of the state. However, if the user actually input the wrong city name and the right state
name, she may not be able to go back to the city text box to rectify the problem.
Button Elements
We're starting our look at form elements with the standard button element because it's probably the most
commonly used and is fairly simple. The HTML element to create a button is <input/>. For example,
to create a button called myButton, which has the words “Click Me” on its face, the <input/> element
would need to be as follows:
<input type=”button” name=”myButton” value=”Click Me” />
The type attribute is set to button, and the value attribute is set to the text you want to appear on the
face of the button. You can leave the value attribute off, but you'll end up with a blank button, which
will leave your users guessing as to its purpose.
This element creates an associated Button object; in this example it is called myButton. This object has
all the common properties and methods described earlier, including the value property. This property
enables you to change the text on the button face using JavaScript, though this is probably not something
you'll need to do very often. What the button is really all about is the click event.
You connect to the button's onclick event handler just as you did with the onclick events of other
HTML elements such as the <a/>. All you need to do is defi ne a function that you want to have executed
when the button is clicked (say, button_onclick()) and then add the onclick event handler as an
attribute of the <input/> element as follows:
<input type=”button” onclick=”button_onclick()” />
Try It Out Counting Button Clicks
In the following example, you use the methods described previously to record how often a button has
been clicked.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 7: Example 2</title>
<script type=”text/javascript”>
var numberOfClicks = 0;
function myButton_onclick()
{
numberOfClicks++;
document.form1.myButton.value = “Button clicked “ +
numberOfClicks + “ times”;
}
</script>
</head>
<body>
