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.
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">
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">
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.
JavaScript 
/ 6 
A Close Look at the Yahoo Button Control
