yui/examples/button/example05.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: Submit 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 oSubmitButton1 = new YAHOO.widget.Button("submitbutton1src", { id:"submitbutton1" });
  44             var oSubmitButton2 = new YAHOO.widget.Button("submitbutton2", { type:"submit", value: "submitbutton2value" });
  45             var oSubmitButton3 = new YAHOO.widget.Button({ type:"submit", label:"Submit Form", id:"submitbutton3", name:"submitbutton3", value: "submitbutton3value", container:"submitbuttonsfromjavascript" });
  46
  47         </script>
  48
  49     </head>
  50     <body>
  51
  52
  53         <h1>Example: Submit Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
  54
  55         <form id="example" name="example" method="post" action="example05.html">
  56
  57             <fieldset>
  58                 <legend>Info</legend>
  59
  60                 <label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value="">
  61                 <label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
  62
  63                 <div>
  64                     <label for="male">Gender: </label>
  65
  66                     <label for="male">Male </label>
  67                     <input type="radio" id="male" name="gender" value="male" checked>
  68
  69                     <label for="female">Female </label>
  70                     <input type="radio" id="female" name="gender" value="female">
  71                 </div>
  72
  73                 <div>
  74                     <label for="month">Birthday: </label>
  75                     <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>
  76                     <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>
  77                     <input type="text" name="year" value="">
  78                 </div>
  79
  80             </fieldset>
  81
  82             <fieldset id="submitbuttons">
  83                 <legend>Submit Buttons</legend>
  84
  85                 <fieldset id="submitbuttonsfrommarkup">
  86                     <legend>From Markup</legend>
  87
  88                     <input id="submitbutton1src" type="submit" name="submitfield1" value="Submit Form">
  89
  90                     <span id="submitbutton2" class="yuibutton"><span class="first-child"><button type="button" name="submitfield2">Submit Form</button></span></span>
  91
  92                 </fieldset>
  93
  94                 <fieldset id="submitbuttonsfromjavascript">
  95                     <legend>From JavaScript</legend>
  96                 </fieldset>
  97
  98             </fieldset>
  99
 100         </form>
 101
 102     </body>
 103 </html>