| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Get Input from a Form" | 3 title: "Get Input from a Form" |
| 4 description: "Using HTML forms and input elements to send data to a server" | 4 description: "Using HTML forms and input elements to send data to a server" |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: forms | 7 id: forms |
| 8 next: indexeddb/ | 8 next: indexeddb/ |
| 9 next-title: "Use IndexedDB" | 9 next-title: "Use IndexedDB" |
| 10 prev: fetchdata/ | 10 prev: fetchdata/ |
| 11 prev-title: "Fetch Data Dynamically" | 11 prev-title: "Fetch Data Dynamically" |
| 12 --- | 12 --- |
| 13 | 13 |
| 14 {% capture whats_the_point %} | 14 {% capture whats_the_point %} |
| 15 | 15 |
| 16 * Use forms with inputs to gather data from a user. | 16 * Use forms with inputs to gather data from a user. |
| 17 * Send data to the server, declaratively or programmatically. | 17 * Send data to the server, declaratively or programmatically. |
| 18 * Get the response from the server with HttpRequest. | 18 * Get the response from the server with HttpRequest. |
| 19 * Handle communication asynchronously with Futures. | 19 * Handle communication asynchronously with Futures. |
| 20 * Use HttpServer to set up a server to listen on a port and host. | 20 * Use HttpServer to set up a server to listen on a port and host. |
| 21 * Use CORS headers to set access permissions for each request. | 21 * Use CORS headers to set access permissions for each request. |
| 22 * Use Polymer data binding to sync form data and Dart data. | 22 * Use Polymer data binding to sync form data and Dart data. |
| 23 | 23 |
| 24 {% endcapture %} | 24 {% endcapture %} |
| 25 | 25 |
| 26 {% capture sample_links %} | 26 {% capture sample_links %} |
| 27 | 27 |
| 28 |
| 29 <p> This tutorial features these examples:</p> |
| 30 * search_form |
| 31 * slambook |
| 32 |
| 28 <p> | 33 <p> |
| 29 Get the source code for the samples featured in this tutorial:</p> | 34 Don't have the source code? |
| 30 | 35 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip"
> |
| 31 <ul> | 36 Download it. |
| 32 <li> | 37 </a> |
| 33 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/forms/search_form" | |
| 34 target="_blank">search_form</a> | |
| 35 </li> | |
| 36 <li> | |
| 37 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/forms/slambook" | |
| 38 target="_blank">slambook</a> | |
| 39 </li> | |
| 40 </ul> | |
| 41 | 38 |
| 42 {% endcapture %} | 39 {% endcapture %} |
| 43 | 40 |
| 44 {% capture content %} | 41 {% capture content %} |
| 45 | 42 |
| 46 <div class="tute-target-title"> | 43 <div class="tute-target-title"> |
| 47 <h1>{{page.title}}</h1> | 44 <h1>{{page.title}}</h1> |
| 48 <h3>Use forms to get data from users.</h3> | 45 <h3>Use forms to get data from users.</h3> |
| 49 </div> | 46 </div> |
| 50 | 47 |
| (...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 112 the default is to search | 109 the default is to search |
| 113 [dartlang.org](http://www.dartlang.org) | 110 [dartlang.org](http://www.dartlang.org) |
| 114 for "Cookbook", | 111 for "Cookbook", |
| 115 a useful resource for learning about Dart. | 112 a useful resource for learning about Dart. |
| 116 | 113 |
| 117 <iframe class="running-app-frame" | 114 <iframe class="running-app-frame" |
| 118 style="height:100px;width:500px;" | 115 style="height:100px;width:500px;" |
| 119 src="examples/search_form/web/search_form.html"> | 116 src="examples/search_form/web/search_form.html"> |
| 120 </iframe> | 117 </iframe> |
| 121 | 118 |
| 122 The source code for this example is available on github: | |
| 123 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/for
ms/search_form" | |
| 124 target="_blank">search_form</a>. | |
| 125 | |
| 126 Here is the HTML code that creates the form: | 119 Here is the HTML code that creates the form: |
| 127 | 120 |
| 128 {% prettify html %} | 121 {% prettify html %} |
| 129 <form action="http://www.google.com/search" | 122 <form action="http://www.google.com/search" |
| 130 method="GET" | 123 method="GET" |
| 131 target="_blank"> | 124 target="_blank"> |
| 132 ... | 125 ... |
| 133 </form> | 126 </form> |
| 134 {% endprettify %} | 127 {% endprettify %} |
| 135 | 128 |
| (...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 234 <hr> | 227 <hr> |
| 235 | 228 |
| 236 **Try it!** | 229 **Try it!** |
| 237 Enter some data and push the **Submit** button. | 230 Enter some data and push the **Submit** button. |
| 238 | 231 |
| 239 <iframe class="running-app-frame" | 232 <iframe class="running-app-frame" |
| 240 style="height:500px;width:525px;" | 233 style="height:500px;width:525px;" |
| 241 src="examples/slambook/out/web/slambook.html"> | 234 src="examples/slambook/out/web/slambook.html"> |
| 242 </iframe> | 235 </iframe> |
| 243 | 236 |
| 244 The complete source code for both the client and the | |
| 245 server is available on github: | |
| 246 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/for
ms/slambook" target="_blank">slambook</a> | |
| 247 | |
| 248 The request gives you an innocent stare and displays "No server" | 237 The request gives you an innocent stare and displays "No server" |
| 249 because you are not running the server on your machine. | 238 because you are not running the server on your machine. |
| 250 Let's fix that. | 239 Let's fix that. |
| 251 | 240 |
| 252 ###Run the server | 241 ###Run the server |
| 253 | 242 |
| 254 Download or copy the source code for the basic server program | 243 Get the source code for the basic server program, |
| 255 from the github repository: | 244 slambookserver.dart, |
| 256 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/for
ms/slambook/bin/slambookserver.dart" | 245 from the |
| 257 target="_blank">slambookserver.dart</a> | 246 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip"
> |
| 247 tutorials samples |
| 248 </a> |
| 249 download. |
| 258 | 250 |
| 259 Run the server program from the command line: | 251 Run the server program from the command line: |
| 260 | 252 |
| 261 {% prettify %} | 253 {% prettify %} |
| 262 % dart slambookserver.dart | 254 % dart slambookserver.dart |
| 263 Listening for GET and POST on http://127.0.0.1:4040 | 255 Listening for GET and POST on http://127.0.0.1:4040 |
| 264 {% endprettify %} | 256 {% endprettify %} |
| 265 | 257 |
| 266 Now, you can try submitting data again with the slambook app above. | 258 Now, you can try submitting data again with the slambook app above. |
| 267 | 259 |
| (...skipping 582 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 850 | 842 |
| 851 * Click to select one option. | 843 * Click to select one option. |
| 852 * Shift-click to select options in series. | 844 * Shift-click to select options in series. |
| 853 * Command-click to make a discontiguous selection. | 845 * Command-click to make a discontiguous selection. |
| 854 | 846 |
| 855 <iframe class="running-app-frame" | 847 <iframe class="running-app-frame" |
| 856 style="height:400px;width:500px;" | 848 style="height:400px;width:500px;" |
| 857 src="http://dart-lang.github.io/dart-tutorials-samples/web/forms/multise
lect/web/out/multiselect.html"> | 849 src="http://dart-lang.github.io/dart-tutorials-samples/web/forms/multise
lect/web/out/multiselect.html"> |
| 858 </iframe> | 850 </iframe> |
| 859 | 851 |
| 860 The source code for this example is available on github: | |
| 861 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/for
ms/multiselect" | |
| 862 target="_blank">multiselect</a>. | |
| 863 | |
| 864 Key-value pairs in a map called `books` contain the data | 852 Key-value pairs in a map called `books` contain the data |
| 865 for the <select> element. | 853 for the <select> element. |
| 866 The keys are strings and the values are boolean. | 854 The keys are strings and the values are boolean. |
| 867 | 855 |
| 868 {% prettify dart %} | 856 {% prettify dart %} |
| 869 final Map<String, bool> books = toObservable( | 857 final Map<String, bool> books = toObservable( |
| 870 { 'The Cat in the Hat': true, 'War and Peace': false, | 858 { 'The Cat in the Hat': true, 'War and Peace': false, |
| 871 'Pride and Prejudice': true, 'On the Road': true, | 859 'Pride and Prejudice': true, 'On the Road': true, |
| 872 'The Hunger Games': true, 'The Java Tutorial': false, | 860 'The Hunger Games': true, 'The Java Tutorial': false, |
| 873 'The Joy of Cooking': false, 'Goodnight Moon': true } | 861 'The Joy of Cooking': false, 'Goodnight Moon': true } |
| (...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 966 ###What next? | 954 ###What next? |
| 967 | 955 |
| 968 The next tutorial, | 956 The next tutorial, |
| 969 [Use IndexedDB](/docs/tutorials/indexeddb), | 957 [Use IndexedDB](/docs/tutorials/indexeddb), |
| 970 describes how to save data on the client | 958 describes how to save data on the client |
| 971 in the browser's Indexed Database. | 959 in the browser's Indexed Database. |
| 972 | 960 |
| 973 {% endcapture %} | 961 {% endcapture %} |
| 974 | 962 |
| 975 {% include tutorial.html %} | 963 {% include tutorial.html %} |
| OLD | NEW |