yui/examples/button/example06.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd"><html>
   3     <head>
   4         <meta http-equiv="content-type" content="text/html; charset=utf-8">
   5         <title>Example: Reset Buttons (YUI Library)</title>
   6
   7         <!-- Reset and Fonts -->
   8         <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
   9         <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
  10
  11         <!-- CSS for Button -->
  12         <link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
  13
  14         <!-- Page-specific styles -->
  15         <style type="text/css">
  16
  17             body { margin:.5em; }
  18
  19             h1 { font-weight:bold; }
  20
  21             fieldset,
  22             fieldset div {
  23
  24                 border:2px groove #ccc;
  25                 margin:.5em;
  26                 padding:.5em;
  27
  28             }
  29
  30         </style>
  31
  32
  33         <!-- Dependency source files -->
  34         <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
  35         <script type="text/javascript" src="../../build/element/element-beta.js"></script>
  36
  37         <!-- Button source file -->
  38         <script type="text/javascript" src="../../build/button/button-beta.js"></script>
  39
  40         <!-- Page-specific JavaScript -->
  41         <script type="text/javascript">
  42
  43             var oResetButton1 = new YAHOO.widget.Button("resetbutton1src", { id:"resetbutton1" });
  44             var oResetButton2 = new YAHOO.widget.Button("resetbutton2", { type:"reset" });
  45             var oResetButton3 = new YAHOO.widget.Button({ type:"reset", label:"Reset Form", id:"resetfield3", container: "resetbuttonsfromjavascript" });
  46
  47         </script>
  48
  49     </head>
  50     <body>
  51
  52         <h1>Example: Reset Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
  53
  54         <form id="example" name="example" method="post" action="example06.html">
  55
  56             <fieldset>
  57                 <legend>Info</legend>
  58
  59                 <label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value="">
  60                 <label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
  61
  62                 <div>
  63                     <label for="male">Gender: </label>
  64
  65                     <label for="male">Male </label>
  66                     <input type="radio" id="male" name="gender" value="male" checked>
  67
  68                     <label for="female">Female </label>
  69                     <input type="radio" id="female" name="gender" value="female">
  70                 </div>
  71
  72                 <div>
  73                     <label for="month">Birthday: </label>
  74                     <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>
  75                     <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>
  76                     <input type="text" name="year" value="">
  77                 </div>
  78
  79             </fieldset>
  80
  81             <fieldset id="resetbuttons">
  82                 <legend>Reset Buttons</legend>
  83
  84                 <fieldset id="resetbuttonsfrommarkup">
  85                     <legend>From Markup</legend>
  86
  87                     <input id="resetbutton1src" type="reset" name="resetfield1" value="Reset Form">
  88
  89                     <span id="resetbutton2" class="yuibutton"><span class="first-child"><button type="button" name="resetfield2">Reset Form</button></span></span>
  90
  91                 </fieldset>
  92
  93                 <fieldset id="resetbuttonsfromjavascript">
  94                     <legend>From JavaScript</legend>
  95                 </fieldset>
  96
  97             </fieldset>
  98
  99         </form>
 100
 101     </body>
 102 </html>