removing Web UI tutorials, updating remaining 4 to current release, + review pass

src/site/docs/tutorials/forms/index.markdown

 ---
 layout: default
 title: "Get Input from a Form"
 description: "Using HTML forms and input elements to send data to a server"
 has-permalinks: true
 tutorial:
   id: forms
 next: indexeddb/
 next-title: "Use IndexedDB"
 prev: fetchdata/
@@ skipping 51 matching lines @@
 
 The main example in this tutorial contains a client and a server.
 The client uses Polymer to present its user interface
 (a form with many kinds of input elements),
 and keep the interface in sync with Dart data.
 The client and server communicate using
 several classes from the core Dart library,
 including streams, Futures, HttpRequest, and so on.
 The server uses CORS headers to allow cross-origin requests.
 
+<aside class="alert alert-info" markdown="1">
+  <strong>Note:</strong>
+  This tutorial assumes that you have read
+  [Define a Custom Elment](/docs/tutorials/polymer-intro/)
+  and [Fetch Data Dynamically](/docs/tutorials/fetchdata/)
+  and are familiar with Polymer, JSON, and HttpRequest.
+</aside>
+
+
 * [About forms, generally](#about-forms)
 * [About the slambook example, specifically](#about-the-slambook-example)
 * [Submitting a form](#submitting-a-form)
 * [Resetting a form](#resetting-a-form)
 * [Creating a server and listening on a port](#creating-a-server)
 * [Handling OPTIONS requests](#handling-options-requests)
 * [Setting CORS headers](#setting-cors-headers)
 * [Handling POST requests](#handling-post-requests)
 * [Recipe for client-server web apps](#recipe)
-* [Binding data to different kinds of inputs](#binding-data)
+* [Two-way data binding using Polymer](#binding-data)
 * [Other resources](#other-resources)
+* [What next?](#what-next)
 
 ##About forms, generally {#about-forms}
 
 A form has an _action_, which is a URL to which to send the form data,
 and a _method_, which indicates how the form data is to be sent.
 The action and the method can be specified declaratively within HTML,
 or for more complex situations or for more control,
 you can write Dart code and use Dart libraries to perform the action
 programmatically.
 
 Let's begin with a basic, HTML-only form to learn a little bit about
 action, method, input elements, and the default behavior of forms.
-The search_form app running below provides a useful form that
-you can add to your website pages.
-It uses Google to search the specified website
-if the checkbox is selected,
-or the web if it is not,
+The form below uses Google to search the website
+specified in the &lt;form&gt; tag
+if the checkbox is selected
+(or the web if it is not),
 for the text entered by the user.
 In this example,
 called `search_form`,
 the default is to search
 [dartlang.org](http://www.dartlang.org)
 for "Cookbook",
-another useful resource for learning about Dart.
+a useful resource for learning about Dart.
 
 <iframe class="running-app-frame"
         style="height:100px;width:500px;"
         src="examples/search_form/web/search_form.html">
 </iframe>
 
 The source code for this example is available on github:
 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/forms/search_form"
    target="_blank">search_form</a>.
 
@@ skipping 84 matching lines @@
 listens on port 4040 on the local host
 and handles POST and OPTIONS requests
 by printing a message and sending a confirmation to the client.
 The server uses CORS headers to allow requests from applications
 running from a different origin.
 
 * Second,
 the client program,
 called `slambook`,
 provides a form into which users can enter some information.
-It uses Polymer data binding to bind the input data to Dart variables.
+It uses Polymer two-way data binding to bind the input data to Dart variables.
 When the user clicks the submit button,
 the Dart code formats the data into a JSON string,
-sends it to slambookserver using an OPTIONS request to
-get access first and then a POST request to send the data.
+sends an OPTIONS request to get permission from the server,
+and then a POST request to send the data.
 When the response from the server is ready,
 the client displays it.
 
 The following diagram shows the flow of communication between
 the server and the client in this example.
 <hr> 
 
 ![Client-server communication in the slambook example](images/client-server-comm.png)
 
 <hr> 
@@ skipping 51 matching lines @@
 * Using Polymer to bind the form data to variables in the Dart program
 
 On the server side, the sections cover
 
 * CORS headers
 * Handling OPTIONS requests
 * Handling POST requests
 
 ##Submitting a form
 
-Let's first take a look at how that data is submitted to the server.
+Let's first take a look at how the data is submitted to the server.
 
 Recall that the search_form example relies on the `action` and
 `method` attributes to set the destination and method for the form request.
 Recall also that the search_form example relies
 on the automatic behavior of the special submit button.
 The slambook example,
 on the other hand,
 takes explicit control of the form submission process.
 
 * First, the form specifies no action or method.
 * Second, the submit button has a Dart mouse click handler.
 * Third, the mouse click handler prevents
 the automatic behavior of the submit button.
 * Finally, the form submits the data to the server
 with help from the Dart libraries.
 
 The form in the slambook example is
-a custom element called `x-slambook-form`
+a custom element called `tute-slambook-form`
 that's instantiated with this HTML code:
 
 {% prettify html %}
 <div class="container">
-  <form is="x-slambook-form" id="slambookform"></form>
+  <form is="tute-slambook-form" id="slambookform"></form>
 </div>
 {% endprettify %}
 
 Note the absence of either an `action` or a `method` attribute.
-Instead, the behavior for the submit button is coded in Dart.
+Instead, the behavior for the submit button is coded in a Dart
+mouse click handler.
 Below is the HTML code that creates the submit button
 and binds it to a Dart mouse click handler.
 
 {% prettify html %}
 <div class="submitarea">
   <input type="submit" value="Submit" on-click="submitForm($event)">
   ...
 </div>
 {% endprettify %}
 
@@ skipping 98 matching lines @@
     // Status is 0...most likely the server isn't running.
     serverResponse = 'No server';
   }
 }
 {% endprettify %}
 
 First the code checks whether the request is complete and successful.
 If it is, the code puts the server's response in a string,
 called `serverResponse`, which is bound to the value of a textarea
 in the slambook app's UI.
-When the string changes, the UI is automatically updated.
+When the string changes, the UI is automatically updated,
+and the message is displayed for the user.
 
 If the request is complete but unsuccessful,
 the program sets `serverResponse` to an error message,
 thus displaying it to the user.
 
 ##Resetting a form
 
-The reset button is a special input type that, by default,
+The reset button is a special HTML input type that, by default,
 clears the values of all inputs within the form.
-Currently,
-this automatic behavior clears the input elements
-as expected,
-but any bound Dart values do not get updated.
-
+Instead, we want the button to reset the values in the form
+to their initial value.
 So, the mouse click handler for the reset button
 needs to suppress the automatic behavior
 and reset the form with neutral data explicitly.
 
 {% prettify dart %}
 void resetForm(Event e) {
   e.preventDefault();
   favoriteThings['kittens'] = false;
   favoriteThings['raindrops'] = false;
   favoriteThings['mittens'] = false;
   favoriteThings['kettles'] = false;
 
   theData['firstName'] = '';
   theData['favoriteQuote'] = '';
   theData['favoriteColor'] = '#FFFFFF';
   theData['birthday'] = '2013-01-01';
   theData['volume'] = '0';
   theData['catOrDog'] = 'cat';
   theData['music'] = 0;
   theData['zombies'] = false;
-  serverResponse = "Data cleared.";
+  serverResponse = "Data reset.";
 }
 {% endprettify %}
 
 ##Creating a server and listening on a port {#creating-a-server}
 
 Let's turn our attention now to the server, called `slambookserver`,
 that responds to HTTP requests from the slambook client.
 The code for the server is based
 on the one in Chris Buckett's article
 <a href="/articles/json-web-service/">Using Dart with JSON Web Services</a>.
@@ skipping 27 matching lines @@
 
 The bind() function returns a Future object,
 which is a way to get a value in the future (more about that in a minute).
 Using then(),
 the code registers two callback functions on the Future.
 The first, gotMessage(), is called when the Future returns its value.
 The second, `printError`, is called if the binding fails.
 An error might occur if, for example,
 another program is already listening on the same port.
 
-The code for gotMessage(), shown below, triages the request
+The code for gotMessage(), shown below, filters the request
 and calls other methods to handle each specific kind of request.
 
 {% prettify dart %}
 void gotMessage(_server) {
   _server.listen((HttpRequest request) {
     switch (request.method) {
       case 'POST': 
         handlePost(request);
         break;
       case 'OPTIONS': 
         handleOptions(request);
         break;
       default: defaultHandler(request);
     }
   },
   onError: printError); // Listen failed.
   print('Listening for GET and POST on http://$HOST:$PORT');
 }
 {% endprettify %}
 
-To handle other types of requests,
-you could simply add more `case` statements.
-For example, `case 'GET'` for HTTP GET requests.
+To handle other types of requests
+such as `GET` requests,
+you could simply add more `case` statements,
+such as `case 'GET'`.
 
 ###About Futures, briefly
 
 Let's take a brief look at Futures before we check out the code
 for handling OPTIONS and POST requests.
 
 A
 <a href="https://api.dartlang.org/dart_async/Future.html"
    target="_blank">Future</a>
 represents a way to get a value sometime in the Future.
 You use Futures to avoid blocking the program
 while waiting for a value&mdash;for example,
 if the value requires a long time to compute,
 or if the value must be read or retrieved using I/O.
 
 When a function that returns a Future is invoked,
 two things happen:
 
 <ul>
   <li>
   The function queues up work to be done
   and returns an uncompleted Future object immediately.
   </li>
   <li>
-  Later, when a value is available,
+  Later, when the value is available,
   the Future object completes with that value or with an error.
   </li>
 </ul>
 
 To get the value that the Future represents,
 use the then() method to register a callback.
 When the Future completes, it calls
 the callback function.
 
 In this example, 
@@ skipping 162 matching lines @@
 and one in dart:io (for servers).
 
 | Resource | Library | Description |
 |---|---|
 | <a href="https://api.dartlang.org/dart_html/HttpRequest.html" target="_blank">HttpRequest</a> | dart:html | Client-side HTTP request |
 | <a href="https://api.dartlang.org/dart_io/HttpRequest.html" target="_blank">HttpRequest</a> | dart:io | Server-side HTTP request |
 | <a href="https://api.dartlang.org/dart_io/HttpServer.html" target="_blank">HttpServer</a> | dart:io | Server-side object to handle HTTP communication with clients |
 | <a href="https://api.dartlang.org/dart_io/HttpResponse.html" target="_blank">HttpResponse</a> | dart:io | Server-side object to carry response to client requests |
 | <a href="https://api.dartlang.org/dart_async/Stream.html" target="_blank">Streams</a> | dart:async | A stream of data |
 | <a href="https://api.dartlang.org/dart_async/Future.html" target="_blank">Future</a> | dart:async | A way to get a value asynchronously |
-| <a href="https://api.dartlang.org/dart_json.html" target="_blank">stringify()</a> | dart:json | How you format an object into a JSON string |
+| <a href="https://api.dartlang.org/dart_json.html" target="_blank">stringify()</a> | dart:convert | A library with resources for converting an object into a JSON string |
 | <a href="https://api.dartlang.org/polymer.html" target="_blank">Polymer</a> | Polymer | Custom elements, data binding, templates |
 {: .table}
 
-##Binding data to different kinds of inputs {#binding-data}
+##Two-way data binding using Polymer {#binding-data}
 
-The slambook sample uses Polymer to
+The slambook sample uses Polymer's two-way data binding to
 bind the values of input elements to Dart variables.
 If the user changes the value in an input element,
 the bound variable in the Dart code automatically changes.
 Or if the Dart code changes the value of the bound variable,
 the UI automatically updates.
 [Define a Custom Element](/docs/tutorials/polymer-intro/)
-provides introductory details
-about data binding with Polymer.
+provides introductory details about Polymer and
+about data binding.
 
-With this example,
+The example also uses declarative event handler mapping to hook
+event handler functions to input elements.
+
+With the slambook example,
 you can see two-way data binding used with a variety of input elements,
 including new HTML5 elements.
 This table summarizes the two-way data binding attributes
 you can use with Polymer:
 
 | Attribute | Dart type | Input element |
 |---|---|
-| bind-value | String | any <br>with special considerations for elements <br> that allow multiple selection,<br> such as a group of radio buttons and &lt;select&gt; elements |
-| bind-selected-index | integer | a &lt;select&gt; element in which only one choice is allowed |
-| bind-checked | bool | individual radio buttons or checkboxes |
-{: .table .nowraptable}
+| value | String | any |
+| selectedIndex | integer | a &lt;select&gt; element in which only one choice is allowed |
+| checked | bool | individual radio buttons or checkboxes |
+{: .table}
 
-###Using bind-value with any input element
+###Using value with any input element
 
-The `bind-value` attribute works with any input element
+The `value` attribute works with any input element
 and binds the value to a Dart string.
-This example uses `bind-value` with a text field, a text area,
+This example uses `value` with a text field, a text area,
 a color picker, a date chooser, and a range element.
 
-![Two-way data binding with bind-value and strings](images/bind-value.png)
+![Two-way data binding with value and strings](images/bind-value.png)
 
 (Note that some surrounding code,
 such as that for the labels,
 has been removed for readability.)
 
 A map called `theData` in the Dart code contains the data for the form.
 The code marks the map object with `@observable` and calls `toObservable()`
 to make the bindings.
 
 The map contains a key-value pair for each input element,
 where the key is a string.
-The values in the map can be of any type
-but the values for elements bound with `bind-value` are all strings.
+The values for elements bound with `value` are all strings.
 The HTML refers to the items in the map
 using their Dart names (identifiers).
 For example, the value of the color picker is bound to
 `theData['favoriteColor']`.
 
+{% comment %}
 ####Special case: Using bind-value with a group of radio buttons
 
 The slambook form contains three radio buttons,
 which together make a group
 because they all have the same name, `catOrDog`.
 All of the radio buttons are bound to the same string.
 Because only one radio button in a group can be selected at a time
 and each radio button has a different value,
 the bound string reflects the value of the entire group.
 
 ![bind-value with a group of radio buttons](images/radio-bindings.png)
 
-{% comment %}
 ####Special case: Not using bind-value with a multiple select element
 
 By default a &lt;select&gt; element allows
 only one option to be selected at a time.
 For a single selection &lt;select&gt; element,
 use bind-selected-index (explained below)
 to get the index of the selected option.
 If you want to allow the user to select multiple options,
 use the `multiple` attribute.
 
@@ skipping 76 matching lines @@
 that dynamically creates a List object containing the keys
 to the selected books.
 
 ![Display list of selected option elements](images/multiselect1.png)
 
 The `booksselected` getter has an implied dependency on
 the `books` map, because the getter uses the map.
 When `books` changes, the UI updates the unnumbered list of selected books.
 {% endcomment %}
 
-###Using bind-selected-index with a pull-down menu
+###Using selectedIndex with a pull-down menu
 
 A &lt;select&gt; element contains one or more &lt;option&gt; elements,
 only one of which, by default, can be selected at a time.
 A single-select element is usually implemented as a pull-down menu.
-You can use the `bind-selected-index` attribute
+You can use the `selectedIndex` attribute
 to bind a Dart integer to a pull-down menu.
 The integer indicates the index of the selected item.
 Indices begin at 0.
 
-![bind-selected-index with a single-selection pull-down menu](images/bind-selected.png)
+![The selectedIndex attribute with a single-selection pull-down menu](images/bind-selected.png)
 
-###Using bind-checked with checkboxes
+###Using checked with checkboxes
 
-You can use the `bind-checked` attribute
+You can use the `checked` attribute
 to bind a Dart boolean to a single checkbox.
 Here each checkbox is bound to a separate boolean value within a map.
 
-![bind-checked with individual checkboxes](images/bind-checked.png)
+![The checked attribute with individual checkboxes](images/bind-checked.png)
 
 
 ##Other resources
 
 <ul>
   <li> The code that handles the communication between the
        client and server is based on code written and explained
        by Chris Buckett in
        <a href="/articles/json-web-service/">Using Dart with JSON Web Services</a>.
   </li>
   <li> Check out
        <a href="/docs/cookbook/">
        <i class="icon-food"> </i> Dart Cookbook</a>.
        You'll find many recipes related to topics in this tutorial,
        including JSON and URIs.
   </li>
   <li> The previous tutorial,
        <a href="/docs/tutorials/fetchdata/">Fetch Data Dynamically</a>,
        contains a more basic client program that relies on the server
        within Dart Editor (port 3030 on localhost),
        to serve the contents of a JSON file.
   </li>
 </ul>
 
 ###What next?
 
-Try our
-<a href="/codelabs/web-ui-writer/index.html" target="_blank"><i class="icon-beaker"> </i>Codelab</a>.
-In this step-by-step guide, you’ll build a simple,
-single­-page, modern web app for desktop and mobile.
+The next tutorial,
+[Use IndexedDB](/docs/tutorials/indexeddb),
+describes how to save data on the client
+in the browser's Indexed Database.
 
 {% endcapture %}
 
 {% include tutorial.html %}