Creating Submit Buttons and Drop-down Menus with the Yahoo Button Control - Resetting web forms with the Yahoo Button Control
(Page 3 of 4 )
In the section that you just read, I mentioned that the handy Yahoo! Button Control allows you to build some basic “reset” buttons with the same technique that you learned for creating “submit” controls.
Based on this concept, below I coded another practical example that shows how to incorporate a primitive “reset” button into an existing web form. The corresponding code sample looks like this:
<!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 "reset" 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="resetbutton1" type="reset" name="resetfield1"
value="Reset Form">
</form>
<script type="text/javascript">
var sResetButton1 = new YAHOO.widget.Button("resetbutton1");
</script>
</body>
</html>
Didn’t I tell you that building reset buttons using Yahoo Button Control was a very simple task? The above example strongly affirms this concept. As you can see, in this case I first coded a primitive web form, and then included an “<input type=”reset”> element, which was properly linked to a new instance of the familiar YAHOO.widget.Button class via its respective ID attribute.
It’s possible to build the same reset button shown earlier using only some JavaScript code. This approach is clearly demonstrated below, so have a look:
<!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 "reset" 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">
<script type="text/javascript">
var oResetButton5 = new YAHOO.widget.Button({ type: "reset",
label: "Reset Form",
id: "resetfield1",
container: "container" });
</script>
<form>
First Name <input type="text" name="fname" /><br />
Last Name <input type="text" name="lname" /><br />
<div id="container"></div>
</form>
</body>
</html>
In this case, the reset button is created directly from JavaScript. And the control is placed inside the corresponding web document via a simple container element. Not rocket science, right?
So far, so good. At this point, I think that you've already acquired a decent background to start building reset and submit buttons using the useful Yahoo! Button Control. However, I could say that I saved the best for last, since in the final section of this tutorial I’ll show you how to utilize the control to develop truly professional-looking drop-down menus.
To learn how these neat dynamic menus are properly built, jump ahead and read the next few lines. They’re just one click away.
Next: Building a drop-down menu >>
More JavaScript Articles
More By Alejandro Gervasio
