Http:// HTML FORMS

http://www.flickr.com/photos/bespoke/2692422909/

HTML FORMShttp://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-sidePrograms

Type URL

Gimme HTML

HTML for form

Show form

User fills out formSend values entered

Do something withthese values, please

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.

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/~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.

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/~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.

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.

Web server

Database

SMTP serverPrograms

Browser

ProgramsProxy

Servers

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 serverPrograms

Browser

ProgramsProxy

Servers

Browser

Programs

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 serverProgramsProxy

Servers

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 serverPrograms

Search engines

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.