Creating Submit Buttons and Drop-down Menus with the Yahoo Button Control - Submitting web forms with the Yahoo Button Control
(Page 2 of 4 )
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of "submit" Yahoo Button using "input" tag</title>
<!-- Include core + Skin CSS files-->
<link rel="stylesheet" type="text/css"
href="build/button/assets/skins/sam/button.css">
<!-- This file is optional: Menu Stylesheet (required for
creating buttons of type "menu" and "split") -->
<link rel="stylesheet" type="text/css"
href="build/menu/assets/skins/sam/menu.css">
<!-- Include dependencies -->
<script type="text/javascript" src="build/yahoo-dom-event/yahoo-
dom-event.js"></script>
<script type="text/javascript" src="build/element/element-beta-
min.js"></script>
<!-- This file is optional: Menu and Container Core (required
for creating buttons of type "menu" and "split") -->
<script type="text/javascript"
src="build/container/container_core-min.js"></script>
<script type="text/javascript" src="build/menu/menu-
min.js"></script>
<!-- Source file -->
<script type="text/javascript" src="build/button/button-beta-
min.js"></script>
</head>
<body class="yui-skin-sam">
<form>
First Name <input type="text" name="fname" /><br />
Last Name <input type="text" name="lname" /><br />
<input id="submitbutton1" type="submit" value="Submit Form" />
</form>
<script type="text/javascript">
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 >>
More JavaScript Articles
More By Alejandro Gervasio
