Transcript forms

HTML FORMS
http://www.flickr.com/photos/bespoke/2692422909/
http://www.flickr.com/photos/wili/242259195/
Overview of HTML forms
• HTML forms enable your web application to
collect information from your users
Browser
Web server
Server-side
Programs
Type URL
Gimme HTML
HTML for form
Show form
User fills out form
Send values entered
Do something with
these values, please
Bare minimum for a form
<form
action="http://web.engr.oregonstate.edu/~cscaffid/formrep
eater.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.
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.
POST: Keep it secret, keep it safe
<form
action="http://web.engr.oregonstate.edu/~cscaf
fid/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.
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.
Textarea fields
<form
action="http://web.engr.oregonstate.edu/~cscaf
fid/formrepeater.php" method="POST">
<textarea name="mytextarea"></textarea>
<input type="submit">
</form>
Textarea is a handy way to provide a multi-line input field.
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.
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.
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.
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.
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)
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."
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.
So why does this difference exist?
Technically, your browser might not connect
directly to servers. You connect via proxy servers.
Database
Browser
Programs
Web server
Proxy
Servers
Programs
SMTP
server
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.
Database
Browser
Programs
Browser
Programs
Web server
Proxy
Servers
Programs
SMTP
server
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.
Database
Web server
Proxy
Servers
Programs
SMTP
server
It can cache this data and omit a GET call later!
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).
Database
Web server
Programs
Search engines
SMTP
server
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
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.
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.