JavaScript DHTML/YUI Library/Form Button
Содержание
YUI reset button from HTML tag
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Reset Buttons</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>
<style type="text/css">
#button-example-form fieldset, #button-example-form fieldset div { border: 2px groove #ccc; margin: .5em; padding: .5em; }
</style>
</head> <body class=" yui-skin-sam">
Reset Buttons
This example demonstrates different ways to create a Button that functions like an HTML reset button (<input type="reset"/>
and <button type="reset"/>
).
<script type="text/javascript">
YAHOO.example.init = function () { // "contentready" event handler for the "resetbuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("resetbuttonsfrommarkup", function () { // Create a Button using an existing <input> element as a data source var oResetButton1 = new YAHOO.widget.Button("resetbutton1"); // Create a Button using an existing <button> element as a data source var oResetButton2 = new YAHOO.widget.Button("resetbutton2");
// Create a Button using the YUI Button markup var oResetButton3 = new YAHOO.widget.Button("resetbutton3"); var oResetButton4 = new YAHOO.widget.Button("resetbutton4", { type: "reset" }); });
// Create a Button without using existing markup var oResetButton5 = new YAHOO.widget.Button({ type: "reset", label: "Reset Form", id: "resetfield5", container: "resetbuttonsfromjavascript" }); } ();
</script> <form id="button-example-form" name="button-example-form" method="post">
<fieldset> <legend>Info</legend> <label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value=""> <label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
<label for="male">Gender: </label> <label for="male">Male </label> <input type="radio" id="male" name="gender" value="male" checked> <label for="female">Female </label> <input type="radio" id="female" name="gender" value="female">
<label for="month">Birthday: </label> <select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <input type="text" name="year" value="">
</fieldset> <fieldset id="resetbuttons"> <legend>Reset Buttons</legend> <fieldset id="resetbuttonsfrommarkup"> <legend>From Markup</legend>
<input id="resetbutton1" type="reset" name="resetfield1" value="Reset Form"> <button id="resetbutton2" type="reset" name="resetfield2">Reset Form</button>
</fieldset> <fieldset id="resetbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</form>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
YUI reset button from Javascript
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Reset Buttons</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>
<style type="text/css">
#button-example-form fieldset, #button-example-form fieldset div { border: 2px groove #ccc; margin: .5em; padding: .5em; }
</style>
</head> <body class=" yui-skin-sam">
Reset Buttons
This example demonstrates different ways to create a Button that functions like an HTML reset button (<input type="reset"/>
and <button type="reset"/>
).
<script type="text/javascript">
YAHOO.example.init = function () { // "contentready" event handler for the "resetbuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("resetbuttonsfrommarkup", function () { // Create a Button using an existing <input> element as a data source var oResetButton1 = new YAHOO.widget.Button("resetbutton1"); // Create a Button using an existing <button> element as a data source var oResetButton2 = new YAHOO.widget.Button("resetbutton2");
// Create a Button using the YUI Button markup var oResetButton3 = new YAHOO.widget.Button("resetbutton3"); var oResetButton4 = new YAHOO.widget.Button("resetbutton4", { type: "reset" }); });
// Create a Button without using existing markup var oResetButton5 = new YAHOO.widget.Button({ type: "reset", label: "Reset Form", id: "resetfield5", container: "resetbuttonsfromjavascript" }); } ();
</script> <form id="button-example-form" name="button-example-form" method="post">
<fieldset> <legend>Info</legend> <label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value=""> <label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
<label for="male">Gender: </label> <label for="male">Male </label> <input type="radio" id="male" name="gender" value="male" checked> <label for="female">Female </label> <input type="radio" id="female" name="gender" value="female">
<label for="month">Birthday: </label> <select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <input type="text" name="year" value="">
</fieldset> <fieldset id="resetbuttons"> <legend>Reset Buttons</legend> <fieldset id="resetbuttonsfrommarkup"> <legend>From Markup</legend>
<input id="resetbutton1" type="reset" name="resetfield1" value="Reset Form"> <button id="resetbutton2" type="reset" name="resetfield2">Reset Form</button>
</fieldset> <fieldset id="resetbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</form>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
YUI submit button created from HTML markup
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Submit Buttons</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>
<style type="text/css">
#button-example-form fieldset, #button-example-form fieldset div { border: 2px groove #ccc; margin: .5em; padding: .5em; } #button-example-form-postdata { border: dashed 1px #666; background-color: #ccc; padding: 1em; } #button-example-form-postdata h2 { margin: 0 0 .5em 0; padding: 0; border: none; }
</style>
</head> <body class=" yui-skin-sam">
Submit Buttons
This example demonstrates different ways to create a Button that functions like an HTML submit button (<input type="submit"/>
and <button type="submit"/>
).
<script type="text/javascript">
YAHOO.example.init = function () { // "contentready" event handler for the "submitbuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("submitbuttonsfrommarkup", function () { // Create a Button using an existing <input> element as a data source var oSubmitButton1 = new YAHOO.widget.Button("submitbutton1", { value: "submitbutton1value" }); // Create a Button using an existing <button> element as a data source var oSubmitButton2 = new YAHOO.widget.Button("submitbutton2"); // Create a Button using the YUI Button markup var oSubmitButton3 = new YAHOO.widget.Button("submitbutton3", { value: "submitbutton3value" }); var oSubmitButton4 = new YAHOO.widget.Button("submitbutton4", { type: "submit", value: "submitbutton4value" }); }); // Create a Button without using existing markup var oSubmitButton5 = new YAHOO.widget.Button({ type: "submit", label: "Submit Form", id: "submitbutton5", name: "submitbutton5", value: "submitbutton5value", container: "submitbuttonsfromjavascript" }); function onExampleSubmit(p_oEvent) { var bSubmit = window.confirm("Are you sure you want to submit this form?"); if(!bSubmit) { YAHOO.util.Event.preventDefault(p_oEvent); } } YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit); } ();
</script>
<form id="button-example-form" name="button-example-form" method="post">
<fieldset> <legend>Info</legend> <label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value=""> <label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
<label for="male">Gender: </label> <label for="male">Male </label> <input type="radio" id="male" name="gender" value="male" checked> <label for="female">Female </label> <input type="radio" id="female" name="gender" value="female">
<label for="month">Birthday: </label> <select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <input type="text" name="year" value="">
</fieldset> <fieldset id="submitbuttons"> <legend>Submit Buttons</legend> <fieldset id="submitbuttonsfrommarkup"> <legend>From Markup</legend>
<input id="submitbutton1" type="submit" name="submitfield1" value="Submit Form"> <button id="submitbutton2" type="submit" name="submitfield2" value="submitfield2value">Submit Form</button>
</fieldset> <fieldset id="submitbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</form>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
YUI submit button created from Javascript
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Submit Buttons</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>
<style type="text/css">
#button-example-form fieldset, #button-example-form fieldset div { border: 2px groove #ccc; margin: .5em; padding: .5em; } #button-example-form-postdata { border: dashed 1px #666; background-color: #ccc; padding: 1em; } #button-example-form-postdata h2 { margin: 0 0 .5em 0; padding: 0; border: none; }
</style>
</head> <body class=" yui-skin-sam">
Submit Buttons
This example demonstrates different ways to create a Button that functions like an HTML submit button (<input type="submit"/>
and <button type="submit"/>
).
<script type="text/javascript">
YAHOO.example.init = function () { // "contentready" event handler for the "submitbuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("submitbuttonsfrommarkup", function () { // Create a Button using an existing <input> element as a data source var oSubmitButton1 = new YAHOO.widget.Button("submitbutton1", { value: "submitbutton1value" }); // Create a Button using an existing <button> element as a data source var oSubmitButton2 = new YAHOO.widget.Button("submitbutton2"); // Create a Button using the YUI Button markup var oSubmitButton3 = new YAHOO.widget.Button("submitbutton3", { value: "submitbutton3value" }); var oSubmitButton4 = new YAHOO.widget.Button("submitbutton4", { type: "submit", value: "submitbutton4value" }); }); // Create a Button without using existing markup var oSubmitButton5 = new YAHOO.widget.Button({ type: "submit", label: "Submit Form", id: "submitbutton5", name: "submitbutton5", value: "submitbutton5value", container: "submitbuttonsfromjavascript" }); function onExampleSubmit(p_oEvent) { var bSubmit = window.confirm("Are you sure you want to submit this form?"); if(!bSubmit) { YAHOO.util.Event.preventDefault(p_oEvent); } } YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit); } ();
</script>
<form id="button-example-form" name="button-example-form" method="post">
<fieldset> <legend>Info</legend> <label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value=""> <label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
<label for="male">Gender: </label> <label for="male">Male </label> <input type="radio" id="male" name="gender" value="male" checked> <label for="female">Female </label> <input type="radio" id="female" name="gender" value="female">
<label for="month">Birthday: </label> <select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <input type="text" name="year" value="">
</fieldset> <fieldset id="submitbuttons"> <legend>Submit Buttons</legend> <fieldset id="submitbuttonsfrommarkup"> <legend>From Markup</legend>
<input id="submitbutton1" type="submit" name="submitfield1" value="Submit Form"> <button id="submitbutton2" type="submit" name="submitfield2" value="submitfield2value">Submit Form</button>
</fieldset> <fieldset id="submitbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</form>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>