JAVASCRIPT

Creating Submit Buttons and Drop-down Menus with the Yahoo Button Control

Buttons are undoubtedly an important part of many web-based user interfaces these days. So if you’re interested in learning how to build these elements with minor hassles, then you should start looking at the useful Button Control, which is bundled with the popular Yahoo UI DHTML framework.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 6

December 18, 2007

TABLE OF CONTENTS:

As I said at the beginning of this tutorial, the Yahoo! Button Control provides web developers with the ability to build some basic web form controls, including submit and reset buttons. Of course, as you might suppose, the creation of these types of controls is straightforward process. It's practically identical to the approach you learned in the prior articles of the series, when I showed you how to build radio buttons and checkboxes.

Having said that, please study the signature of the following example. It demonstrates in a clear fashion how to create a simple submit button by using the corresponding Yahoo! Button Control.

The code sample is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example of "submit" Yahoo Button using "input" tag</title>

</head>

<form>

First Name <input type="text" name="fname" /><br />

Last Name <input type="text" name="lname" /><br />

</form>

var submitButton1 = new YAHOO.widget.Button("submitbutton1");

</script>

</body>

</html>

As you can see, the above example shows how to create a basic submit button using the Yahoo! Button Control. In this case, I first built a simple online form and then coded a typical “<input type=”submit”> element. Finally, the element in question was properly associated with an instance of the “YAHOO.widget.Button” class via its corresponding ID attribute. Quite easy to grasp, right?

So far, so good. At this point you've hopefully grasped the logic that stands behind building submit buttons using the Yahoo! Button Control. Thus, it’s time to learn how to create some basic “reset” controls by utilizing the same approach that you saw with the previous example.

To see how those basic reset buttons will be built using Yahoo! Button Control, please click on the link below and keep reading.

Next: Resetting web forms with the Yahoo Button Control >>