Added form around input/button UI. See #2531174

src/widget/docs/partials/widget-build-source.mustache

@@ -1,14 +1,14 @@
 <dl id="widget-build-examples">
 <dt><code>Widget</code> with <code>WidgetStdMod</code></dt>
 <dd>
-    <div class="widget-build-example" id="widget1-example">
+    <form class="widget-build-example" id="widget1-example" action="#">
         <input type="text" id="content" value="">
         <select id="section">
             <option value="header">Header</option>
             <option value="body">Body</option>
             <option value="footer">Footer</option>
         </select>
-        <button type="button" id="setContent">Set Content</button>
+        <button type="submit" id="setContent">Set Content</button>
         <button type="button" class="fail" id="tryMove">move() (should fail)</button>
 
         <div id="widget1">
@@ -18,16 +18,16 @@
         </div>
 
         <p class="filler">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam.</p>
-    </div>
+    </form>
 </dd>
 
 <dt><code>Widget</code> with <code>WidgetPosition, WidgetStack</code></dt>
 
 <dd>
-    <div class="widget-build-example" id="widget2-example">
+    <form class="widget-build-example" id="widget2-example" action="#">
         <label>X: <input type="text" id="x" value="0" ></label>
         <label>Y: <input type="text" id="y" value="0" ></label>
-        <button type="button" id="move">Move</button>
+        <button type="submit" id="move">Move</button>
         <button type="button" class="fail" id="tryContent">setStdModContent() (should fail)</button>
 
         <div id="widget2"><strong>Positionable Widget</strong></div>
@@ -38,7 +38,7 @@
             </select>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non urna. Nulla aliquam rhoncus est. 
         </p>
-    </div>
+    </form>
 </dd>
 
 <dt><code>Widget</code> with <code>WidgetPosition, WidgetStack, WidgetPositionAlign</code></dt>
@@ -73,13 +73,15 @@ YUI().use("widget", "widget-position", "widget-stack", "widget-position-align",
     var contentInput = Y.one("#content");
     var sectionInput = Y.one("#section");
 
-    Y.on("click", function(e) {
+    Y.on("submit", function(e) {
+        e.preventDefault();
+        
         var content = Y.Escape.html(contentInput.get("value"));
         var section = sectionInput.get("value");
 
         stdmod.setStdModContent(section, content);
 
-    }, "#setContent");
+    }, "#widget1-example");
 
     Y.on("click", function(e) {
         try {
@@ -110,13 +112,15 @@ YUI().use("widget", "widget-position", "widget-stack", "widget-position-align",
     xInput.set("value", Math.round(xy[0]));
     yInput.set("value", Math.round(xy[1]));
 
-    Y.on("click", function(e) {
+    Y.on("submit", function(e) {
+        e.preventDefault();
+        
         var x = parseInt(xInput.get("value"));
         var y = parseInt(yInput.get("value"));
 
         positionable.move(x,y);
 
-    }, "#move");
+    }, "#widget2-example");
 
     Y.on("click", function(e) {
         try {

src/widget/docs/widget-build.mustache

@@ -172,14 +172,15 @@ var sectionInput = Y.one("#section");
 
 // This should work, since the StandardModule widget has settable 
 // header/body/footer sections
-Y.on("click", function(e) {
+Y.on("submit", function(e) {
+    e.preventDefault();
 
     var content = Y.Escape.html(contentInput.get("value"));
     var section = sectionInput.get("value");
 
     stdmod.setStdModContent(section, content);
 
-}, "#setContent");
+}, "#widget1-example");
 ```
 
 <p>To verify that no unrequested features are added, we also attempt to move the instance using the `move` method, which is not part of the base Widget class, and would be added by the `WidgetPosition` extension. This verifies that the other example classes we'll create, which do create new classes which use `WidgetPosition`, have not modified the base Widget class.</p>
@@ -243,13 +244,15 @@ positionable.move(xy[0], xy[1]);
 
 ```
 // This should work, since Positionable has basic XY Positioning support
-Y.on("click", function(e) {
+Y.on("submit", function(e) {
+    e.preventDefault();
+    
     var x = parseInt(xInput.get("value"));
     var y = parseInt(yInput.get("value"));
 
     positionable.move(x,y);
 
-}, "#move");
+}, "#widget2-example");
 ```
 
 <p>And, as with the `StandardModule` class, we should not be allowed to invoke any methods from an extension which we didn't request:</p>