edit pass on T3,4,5, updated images

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/
 prev-title: "Fetch Data Dynamically"
 ---
 
 {% capture whats_the_point %}
 
 * Use forms with inputs to gather data from a user.
 * Send data to the server, declaratively or programmatically.
 * Get the response from the server with HttpRequest.
 * Handle communication asynchronously with Futures.
 * Use HttpServer to set up a server to listen on a port and host.
 * Use CORS headers to set access permissions for each request.
-* Use Web UI binding to sync form data and Dart data.
+* Use Polymer data binding to sync form data and Dart data.
 
 {% endcapture %}
 
 {% capture sample_links %}
 
 <p>
-Get the source code for the samples featured in this target:</p>
+Get the source code for the samples featured in this tutorial:</p>
 
 <ul>
   <li>
-    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target10/search_form"
+    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/forms/search_form"
        target="_blank">search_form</a>
   </li>
   <li>
-    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target10/slambook"
-       target="_blank">slambook</a> (web_ui)
-  </li>
-  <li>
-    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target10-polymer/slambook"
-       target="_blank">slambook</a> (polymer)
-  </li>
-  <li>
-    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target10/multiselect"
-       target="_blank">multiselect</a>
+    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/forms/slambook"
+       target="_blank">slambook</a>
   </li>
 </ul>
 
 {% endcapture %}
 
 {% capture content %}
 
 <div class="tute-target-title">
 <h1>{{page.title}}</h1>
 <h3>Use forms to get data from users.</h3>
 </div>
 
 Many web applications rely on forms to collect data
 and submit that data to a server.
 A form usually contains several input elements
 for entering data of various kinds,
 such as names and addresses, birthdays, email addresses,
 and so on.
 HTML supports several kinds of input elements,
 including text fields, text areas, radio buttons, and checkboxes.
 HTML5 adds more specialized input elements such
 as email and password fields,
 color pickers, date and time widgets, and range elements.
 
-The main example in this target contains a client and a server.
-The client uses the Web UI package to present its user interface
+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.
 
-This target brings together concepts from all previous targets.
-Before you go on,
-make sure you are comfortable with the information in
-[Target 6](/docs/tutorials/web-ui/),
-[Target 7](/docs/tutorials/templates/),
-[Target 8](/docs/tutorials/custom-elements/), and
-[Target 9](/docs/tutorials/fetchdata/),
-in particular.
-
 * [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)
@@ skipping 18 matching lines @@
 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.
 
 <iframe class="running-app-frame"
         style="height:100px;width:500px;"
-        src="http://dart-lang.github.io/dart-tutorials-samples/web/target10/search_form/web/search_form.html">
+        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/target10/search_form"
+<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/forms/search_form"
    target="_blank">search_form</a>.
 
 Here is the HTML code that creates the form:
 
 {% prettify html %}
 <form action="http://www.google.com/search"
       method="GET"
       target="_blank">
   ...
 </form>
@@ skipping 62 matching lines @@
 and a basic GET request.
 For forms that contain a lot of data,
 or for web applications that communicate with a specialized server,
 you usually need to handle forms programmatically.
 
 The next example shows a more complex form that sends data
 to a server programmatically using a POST request.
 
 ##About the slambook example, specifically {#about-the-slambook-example}
 
-The primary example in this target consists of two programs.
+The primary example in this tutorial consists of two programs.
 
 * First,
 a basic server program, called `slambookserver`,
 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 Web UI to bind the input data to Dart variables.
+It uses Polymer 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.
 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> 
 
 **Try it!**
 Enter some data and push the **Submit** button.
 
 <iframe class="running-app-frame"
         style="height:500px;width:525px;"
-        src="http://dart-lang.github.io/dart-tutorials-samples/web/target10/slambook/web/out/slambook.html">
+        src="examples/slambook/out/web/slambook.html">
 </iframe>
 
 The complete source code for both the client and the
 server is available on github:
-<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target10/slambook" target="_blank">slambook</a>
+<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/forms/slambook" target="_blank">slambook</a>
 
 The request gives you an innocent stare and displays "No server"
 because you are not running the server on your machine.
 Let's fix that.
 
 ###Run the server
 
 Download or copy the source code for the basic server program
 from the github repository:
-<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target10/slambook/bin/slambookserver.dart"
+<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/forms/slambook/bin/slambookserver.dart"
    target="_blank">slambookserver.dart</a>
 
 Run the server program from the command line:
 
 {% prettify %}
 % dart slambookserver.dart
 Listening for GET and POST on http://127.0.0.1:4040
 {% endprettify %}
 
 Now, you can try submitting data again with the slambook app above.
 
 <aside class="alert">
 Note: If another program is already listening on localhost 4040,
 the server prints an error message and quits.
 The app running on this page expects slambookserver to be at localhost 4040,
 so for the app to work,
 you have to kill the other process and start slambookserver again.
 Alternatively,
 you can change the port number in both the client and the server code.
 Avoid using 3030 because Dart Editor listens there.
 Then run both the client and the server locally on your machine.
 </aside>
 
-The rest of this target explains the code for both the client and the server.
+The rest of this tutorial explains the code for both the client and the server.
 
 On the client side, you learn about
 
 * Submitting the form
 * Resetting the form
-* Using Web UI to bind the form data to variables in the Dart program
-  (You've seen some data binding in previous targets. We'll talk about
-  using Web UI with HTML5 widgets at the end of this target.)
+* 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.
@@ skipping 290 matching lines @@
 Client-server programs should almost always handle communication
 and other forms of I/O asynchronously with Futures.
 
 ##Handling OPTIONS requests
 
 With help from the
 <a href="https://api.dartlang.org/dart_html/HttpRequest.html"
    target="_blank">HttpRequest</a>
 class, the slambook client makes a POST request
 when the user clicks the submit button.
-You saw the code for this earlier in this target.
+You saw the code for this earlier in this tutorial.
 
 If the client is running from a different origin than the server,
 which is common in web apps,
 the POST request is "preflighted".
 A preflighted request must first send an OPTIONS request
 to determine if the actual request is allowed.
 The HttpRequest class
 automatically handles the preflight OPTIONS request.
 You do not have to write the client-side code for that.
 
@@ skipping 110 matching lines @@
 ##Recipe for client-server web apps {#recipe}
 
 The slambook client-server example
 can serve as a starting point for your client-server web apps
 or as a recipe for building your own.
 
 Here's an outline of what the client needs to do.
 
 * Use forms to gather data from a user.
 * Put input fields in your forms for individual data items.
-* Use Web UI two-way binding to keep the form data in sync with the Dart code.
+* Use Polymer two-way binding to keep the form data in sync with the Dart code.
 * Send data declaratively (action and method attributes on the form)
 * ... or programmatically (overriding the default behavior of
 the submit button with Dart code)
 * Get the response from the server from the HttpRequest object.
 * Handle communication asynchronously with a Future object.
 
 And, here's what the server needs to do.
 
 * Use HttpServer to set up a server to listen on a port and host.
 * Listen for requests.
 * Use CORS headers to set access permissions for each request.
 * Respond to requests using HttpResponse.
 * Handle communication asynchronously with Futures.
 * Use streams to write the response data.
 
 These resources, mostly from the core Dart libraries,
 provide support for writing clients and servers.
 Note that there are two HttpRequest classes, one in dart:html (for clients)
 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://pub.dartlang.org/packages/web_ui" target="_blank">Web UI package</a> | web_ui | Data binding, templates, and custom elements |
+| <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}
 
-The slambook sample uses the Web UI package to
+The slambook sample uses Polymer 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.
-[Target 6: Get Started with Web UI](/docs/tutorials/web-ui/)
+[Define a Custom Element](/docs/tutorials/polymer-intro/)
 provides introductory details
-about data binding with Web UI.
+about data binding with Polymer.
 
 With this 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 Web UI:
+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}
 
 ###Using bind-value with any input element
 
@@ skipping 26 matching lines @@
 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 10 matching lines @@
 `multiselect`.
 
 **Try it!**
 
 * Click to select one option.
 * Shift-click to select options in series.
 * Command-click to make a discontiguous selection.
 
 <iframe class="running-app-frame"
         style="height:400px;width:500px;"
-        src="http://dart-lang.github.io/dart-tutorials-samples/web/target10/multiselect/web/out/multiselect.html">
+        src="http://dart-lang.github.io/dart-tutorials-samples/web/forms/multiselect/web/out/multiselect.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/target10/multiselect"
+<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/forms/multiselect"
    target="_blank">multiselect</a>.
 
 Key-value pairs in a map called `books` contain the data
 for the &lt;select&gt; element.
 The keys are strings and the values are boolean.
 
 {% prettify dart %}
 final Map<String, bool> books = toObservable(
     { 'The Cat in the Hat': true, 'War and Peace': false,
       'Pride and Prejudice': true, 'On the Road': true,
       'The Hunger Games': true, 'The Java Tutorial':  false,
       'The Joy of Cooking': false, 'Goodnight Moon': true }
 );
 {% endprettify %}
 
-Using `template repeat` from Web UI,
+Using `template repeat` from Polymer,
 the HTML code puts &lt;option&gt; elements in the 
 &lt;select&gt; element based on the Dart map.
 Instead of binding the values of the &lt;option&gt; elements
 to the `books` map,
 the HTML code specifies a change event handler
 for the &lt;select&gt; element.
 
 {% prettify html %}
 <select multiple
         on-change="changeselected($event)"
@@ skipping 23 matching lines @@
 This iterative template specifies
 a Dart getter, called `booksselected`,
 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
 
 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
 to bind a Dart integer to a pull-down menu.
 The integer indicates the index of the selected item.
 Indices begin at 0.
@@ skipping 13 matching lines @@
 
 <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 Target,
-       including Web UI, JSON, and URIs.
+       You'll find many recipes related to topics in this tutorial,
+       including JSON and URIs.
   </li>
-  <li> The previous target,
+  <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.
 
 {% endcapture %}
 
 {% include tutorial.html %}