Make FormWidget read name/value from embedded <input> on creation.

Also create embedded <input> (aka this.valueNode) if it does not exist.

The widget subclass should add this.valueNode to the DOM if it's not already there.
It shoudn't call appendChild() unnecessarily though as that will break back-button
support on IE.  See deliteful/tests/functional/StarRating-formback.html for test.
Also (if desired) the widget should set display:none on the <input>, either directly
or via a stylesheet.

Currently does not handle some complex cases, such as:

* deliteful/Select should support an embedded <select> rather than <input>
* deliteful/Checkbox and Radiobutton's embedded <input> also has "checked" property;
  should also sync that property.

Fixes #394, refs #423 tangentially, refs ibm-js/deliteful#584 too.

FormWidget.js

@@ -98,6 +98,28 @@ define([
 		 * @default undefined
 		 */
 
+		_mapAttributes: dcl.superCall(function (sup) {
+			return function () {
+				var input = this.querySelector("input");
+				if (input) {
+					// Get value and name from embedded <input> node.
+					if (input.value) {
+						this.setAttribute("value", input.value);
+					}
+					if (input.name) {
+						this.setAttribute("name", input.name);
+					}
+				} else {
+					// Create this.valueNode as a convenience, but don't add to the DOM because that breaks widgets like
+					// deliteful/Checkbox that unconditionally create their own this.valueNode:
+					// You end up with two embedded <input> nodes.
+					input = this.ownerDocument.createElement("input");
+				}
+				this.valueNode = input;
+				return sup.call(this);
+			};
+		}),
+
 		refreshRendering: function (oldValues) {
 			// Handle disabled and tabIndex, across the tabStops and root node.
 			// No special processing is needed for tabStops other than just to refresh disabled and tabIndex.

tests/functional/FormValueWidget.html

@@ -42,19 +42,9 @@
 					"<span attach-point=focusNode class='value'>{{this.value}}</span>" +
 					"<span on-click=decrement class='button decrement'>-</span>" +
 					"<span on-click=increment class='button increment'>+</span>" +
-					"<span style='display:none' attach-point=containerNode></span>" +
+					"<span style='display:none' attach-point=containerNode></span>" +	// for this.valueNode <input>
 					"</template>"
 				),
-				postRender: function () {
-					// TODO: move this logic into FormValueWidget itself?
-					this.valueNode = this.containerNode.querySelector("input");
-					if (this.valueNode) {
-						this.value = this.valueNode.value;
-					} else {
-						this.valueNode = this.ownerDocument.createElement("input");
-						this.containerNode.appendChild(this.valueNode);
-					}
-				},
 				decrement: function () {
 					this.value--;
 				},
@@ -72,7 +62,7 @@ <h1>FormValueWidget functional test</h1>
 
 <form id="form1">
 	<span id="spinner1_label">Spinner widget based on FormValueWidget:</span>
-	<my-spinner id="spinner1" aria-labelledby="spinner1_label"><input value="5"></my-spinner>
+	<my-spinner id="spinner1" aria-labelledby="spinner1_label"><input value="5" name="spinner1_name"></my-spinner>
 
 	<br>
 	<input type="reset" id="resetB" name="reset">

tests/functional/FormValueWidget.js

@@ -17,6 +17,15 @@ define([
 					intern.config.WAIT_TIMEOUT, intern.config.POLL_INTERVAL));
 		},
 
+		creation: function () {
+			this.timeout = intern.config.TEST_TIMEOUT;
+			return this.remote.execute("return spinner1.value").then(function (value) {
+				assert.equal(value, 5, "original value");	// taken from the embedded <input>
+			}).execute("return spinner1.name").then(function (name) {
+				assert.strictEqual(name, "spinner1_name", "name");
+			});
+		},
+
 		reset: function () {
 			this.timeout = intern.config.TEST_TIMEOUT;
 			var environmentType = this.remote.environmentType;