HTML forms

1. HTML forms http://www.flickr.com/photos/bespoke/2692422909/ http://www.flickr.com/photos/wili/242259195/

2. Overview of HTML forms • HTML forms enable your web application to collect information from your users Web server Browser Server-side Programs Type URL Gimme HTML HTML for form Show form User fills out form Send values entered Do something withthese values, please

3. Bare minimum for a form <form action="http://web.engr.oregonstate.edu/~cscaffid/formrepeater.php" method="GET"> <input type="submit"> </form> When the user hits the submit button, the form gathers all the input and sends to the server. (But this very minimal form has no input fields!) Note: the URL above might break some day. In that case, search online for the URL of a "form tester" that can replace the URL shown above.

4. Textbox fields <form action="http://web.engr.oregonstate.edu/~cscaffid/formrepeater.php" method="GET"> <input type="text" name="myfield"> <input type="submit"> </form> When your user types a value and hits submit, the form sends the value of myfield to the server. Notice the value appears on the URL.

5. POST: Keep it secret, keep it safe <form action="http://web.engr.oregonstate.edu/~cscaffid/formrepeater.php" method="POST"> <input type="text" name="myfield"> <input type="submit"> </form> Now the value is not shown on the URL. This helps to keep it secret. We will discuss GET vs POST later in this lecture.

6. Password fields <form action="http://web.engr.oregonstate.edu/~cscaffid/formrepeater.php" method="POST"> <input type="text" name="myfield"> <input type="password" name="mypasswordfield"> <input type="submit"> </form> The value of the password field is also kept hidden on the screen when the user types it. NEVER EVER transmit passwords via GET.

7. Textarea fields <form action="http://web.engr.oregonstate.edu/~cscaffid/formrepeater.php" method="POST"> <textarea name="mytextarea"></textarea> <input type="submit"> </form> Textarea is a handy way to provide a multi-line input field.

8. Radio fields <form action="http://web.engr.oregonstate.edu/~cscaffid/formrepeater.php" method="POST"> <input type="radio" name="myradio" value="1"> Option one<BR> <input type="radio" name="myradio" value="2"> Option two<BR> <input type="radio" name="myradio" value="3"> Option three<BR> <input type="submit"> </form> The user can only choose one option from a radio field.

9. Checkbox fields <form action="http://web.engr.oregonstate.edu/~cscaffid/formrepeater.php" method="POST"> <input type="checkbox" name="mychk" value="1"> Option one<BR> <input type="checkbox" name="mychk" value="2"> Option two<BR> <input type="checkbox" name="mychk" value="3"> Option three<BR> <input type="submit"> </form> The user can only choose multiple options from a checkbox field.

10. Dropdown fields <form action="http://web.engr.oregonstate.edu/~cscaffid/formrepeater.php" method="POST"> <select name="myselect"> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> </select> <input type="submit"> </form> The user can choose only option from a dropdown.

11. Listbox fields <form action="http://web.engr.oregonstate.edu/~cscaffid/formrepeater.php" method="POST"> <select name="myselect" multiple size="3"> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> </select> <input type="submit"> </form> The user can choose multiple options from a listbox with multiple.

12. Form methods (GET vs POST) • So what's the deal with GET vs POST? • Difference in purpose • GET is for retrieving data from the server(or any other purpose that can safely be repeated an arbitrary number of times) • POST is for making changes to the server(or any other purpose that cannot be safely repeated an arbitrary number of times)

13. Examples of good ways to use GET • Retrieving an HTML table or list • Retrieving a form • Checking to see if the page still exists • Checking to see if the server has crashed • Checking to see fast the server is today All of these can safely be repeated lots of times. Repeating these won't mess up the server. These are called "idempotent operations."

14. Examples of bad ways to use GET.For these, use POST instead. • Deleting data from the server • Updating data on the server • Logging in (changes state on the server) • Logging out (ditto) Each of these changes the state of the server, so repeating them an arbitrary number of times could mess up the server.

15. So why does this difference exist? Technically, your browser might not connect directly to servers. You connect via proxy servers. Web server Database SMTP server Programs Proxy Servers Browser Programs

16. So why does this difference exist? If two people GET the same URL, the proxy server can GET the URL once and give the data to both. Web server Database SMTP server Programs Proxy Servers Browser Programs Browser Programs

17. So why does this difference exist? Or, a proxy server can preemptively GET certain URLs as many times as desired, even when nobody is logged on. It can cache this data and omit a GET call later! Web server Database SMTP server Programs Proxy Servers

18. So why does this difference exist? Search engines are also allowed to GET any URL at any time, or as many times as desired (subject to certain restrictions). Web server Database SMTP server Programs Search engines

19. So GET can be called arbitrary times • GET can be called… • 1 time when 1 user wants data • 1 time when 2 users want data • 1 time when 300 users want data • Many times when 0 users want data (preemptive caching) • 0 times when 1 user wants data (if it was cached) • Many times when search engines want data

20. POST is not allowed to be cached • A proxy server will always forward the POST request exactly 1 time when each user's browser tries to POST. • A proxy server may not cache POST data. • So if you send passwords via POST, proxy servers are not allowed to keep copies of passwords going by! • And search engines are also not supposed to automatically perform POST operations, either.

21. More about GET and POST to follow • We will revisit the subject of GET vs POST • When discussing how to upload files to servers • When discussing scalability • When discussing security • For now, when in doubt, just use POST. • If you use POST, the worst that can happen is that you harm scalability.