Transcript Project Polymath

Lecture 5: Forms.

Allowing users to submit information.
 Forms.
 HTTP: GET vs. POST.
 Form processing: invoking server-side scripts.


We’ve learned how to present a wide
variety of content to users.
We have not yet learned how users can
contribute content back.
 Users may wish to comment on a page or
product, send feedback, sign up for an
account, or search your website.

Ideally, communication flows both ways.
We know how to design most of this page, but not the textbox or buttons.
(And where do they go once they’re submitted anyway?)

These interactive components are known as form fields, contained within forms.

One-line textboxes.

Password textboxes (showing *s in place of characters).


Dropdown lists (a list of choices, only one shown at a time unless you expand it).
Lists (multiple items to select, many displayed at once).

Buttons (or images that serve as buttons).


Submit buttons.
Reset buttons.
▪
Other buttons.
Checkboxes.
Option buttons.

Multi-line textboxes.
File uploads.

Hidden form fields (information sent with the form but not seen).

They can also be styled with CSS.
Often it is possible to create more complex form inputs by combining styled simple elements.


▪
▪
All of these elements are possible to create in HTML.


All form fields must go between opening and
closing <form> tags.
 This tag defines the action taken when the form is
submitted.
 Multiple forms on a single page are allowed.
 It has two important attributes:
▪ method, which is one of “GET” or “POST”, defining the
HTTP command used to submit the form.
▪ action, which is an address to submit the form data to.
Often this points to a server-side PHP or Perl script.





The methods GET and POST correspond to HTTP (hypertext transfer protocol) commands.
“GET” is the normal method used to retrieve pages (from links, or by typing in the URL).
When you fetch index.html in your browser, the browser connects to the server and sends the following
command:

GET index.html HTTP/1.0

For example, http://tech.slashdot.org/article.pl?sid=09/05/03/154231 and
http://ask.slashdot.org/article.pl?sid=09/05/03/1318242 both point to the same file on the server (article.pl).
However, they lead to different articles because the “sid” parameters are different.
The server then returns the HTML code of the page index.html.
Some pages (mainly server-side scripts) also make use of variables passed to them:


This is an example of passing variables by a GET request, and it is how your form data will be sent if
method=“GET”.






You can also link to pages with parameters by adding data to the URL as follows:
Variables are given in the form var=value (no quotes).
The first one is preceded by a “?”, to let the browser know that the rest are parameters to the page and not part of its
filename.
Each subsequent variable is separated from earlier ones with a “&”.
For example, http://www.mysite.com/page.cgi?var1=value1&var2=value2&var3=value3
Note that GET variables appear as part of the URL in the address bar.
POST is a request used to send large blocks of content back
to a server.
 The variables are not part of the URL in a POST request; they
are part of the HTTP headers sent after the URL.

 As such, they are not shown in the address bar.
 A typical POST request looks like:
POST /cgi-bin/script.cgi HTTP/1.0
Host: mysite.com
var1=val1&var2=val2&var3=val3
This method is not used with links or manually-typed
addresses; it’s reserved for forms.
 There’s an important reason for that…


GET requests are meant to be used for retrieving content, not modifying it.

These requests should be safe, meaning that they do not modify resources on the server.

Failing that, they should at least be idempotent, meaning that the effects of many identical calls are the same as the
effects of one such call.






For example, a counter would not be idempotent; it would increment each time a user refreshed it.
▪
If it logged IP addresses and only incremented on the first load by each IP address (assuming IP is a parameter passed to it), it
would then be idempotent.
Applications of GET requests include submitting search queries, fetching specific articles or other content, and
navigating to forums.
▪
These requests do not change anything on the server; they’re “safe”.
▪
Since subsequent calls to the same resource won’t affect the output, the browser can cache the results to display them quicker
the next time the page is loaded.
POST requests are used to modify content.


▪
Examples:
▪
Deleting a forum post.
▪
Submitting contact information (sending an email is a modification).
▪
Charging a credit card.
▪
Changing the text of a wiki or blog.
The effects of a POST are lasting, perhaps permanent.
Because they produce changes, the browser will not cache them.
If you try to refresh a POSTed page, browsers will warn you that doing so will resubmit the information and may cause
the action to repeat (e.g. double charges to a credit card).
Search engines will index pages they can get to via GET requests; none will follow POST requests.
Therefore, if you use GET for modification, search engines may alter your content when they index.

HTML alone is not enough to make functioning forms.
 The frontend of the form is designed in HTML.
 But there is no way to process the submitted data in HTML.
 This data is processed using scripts: small programs running on
the server.
▪ These scripts are written in languages such as Perl, PHP, Ruby, or ASP.
▪ Learning these languages is too advanced for this course.
The variables submitted from the web form are passed into
the script specified by the “action” attribute.
 Although we won’t discuss writing your own scripts, we’ll
demonstrate how to use others’ CGI scripts today.



Textboxes, checkboxes, buttons, password boxes, option buttons, file uploads, and hidden form fields are
all created using the <input> tag.
They are differentiated using the “type” attribute, which has the following values:

text: A normal textbox.

password: A masked password input box.
checkbox: A checkbox (multiple boxes can be checked).








radio: Option button (selecting one deselects the others).
submit: A button that submits the form (sends its contents to its “action” URL) when clicked.
reset: A button that clears the form values when clicked.
button: A button that does not do anything by default (but can be scripted to do something when clicked using
Javascript).
image: An image that acts as a submit button.

hidden: A hidden form field. Submitted to the processing script, but not shown directly to the user. The user can still
see it in “view source”.

file: A file upload box.
Since these correspond to variables sent to the script, they also need names. These names are specified
using the “name” attribute of each input tag, and can be any combination of alphanumeric characters.
Input fields can also be assigned default values using the “value” attribute. In some fields, e.g. text fields,
the user can and usually does change the defaults. Other fields, such as submit buttons, are immutable
and have values set solely for the purpose of displaying a certain caption to the user.


This form will query Google when submitted.
Note that the language (value=“en”) is stored in a hidden field
(name=“hl”) and is not seen by the user.
 Google is using it; try setting it to another value (say “fr”) and see what
happens.

<form method="GET" action="http://www.google.com/search">
 Query: <input type="text" name="q" value="Type your search term
here." />
 <input type="hidden" name="hl" value="en" />
 <input type="submit" value="Google It" />
 <input type="reset" value="Start Over" />

</form>






type=“text” or type=“password”.
Allow the user to type in one-line of text.
Used for storing information such as name, address, email, phone number,
credit card number, username, password, etc.
The password box displays “*”s instead of characters (but the text is still sent
to the server unencrypted).
A width may be specified in number of characters using the “size” attribute,
but you should prefer setting it in CSS using width: (use 5em for space to
hold 5 characters).
A maximum length in characters may be specified using the maxlength
attribute. There is no analogue in CSS.


For example, <input type=“text” name=“year” maxlength=“4” />
If the user hits enter in a single line text box, the default behavior is to
automatically submit the form.
type=“submit”, “reset”, or “button”.
 All three appear the same, but have different behaviors.


Submit buttons submit the form when clicked.

Reset buttons clear all fields on a form to their default values when clicked.
Other buttons do nothing by default.


One form may have more than one submit button (e.g. Google’s “I’m
Feeling Lucky”).

In this case, the button that is clicked will have its name and value sent to the server;
the other buttons won’t.
The value of a button is the text shown within it. It is not usually useful on
the server.
 The name is generally not required either unless more than one submit
button exists on a form.

type=“radio” or “checkbox”
 Option (“radio”) buttons and checkboxes allow one or more selections to be
made from a small list of choices.



Checkboxes allow any number of options to be checked.

However, only one option button in a group may be selected. When a new option is
selected, the others will be cleared.
All option buttons in a group have the same name but different values; only
the selected button will send its value to the server.

E.g. <input type=“radio” name=“opt1” value=“1” /> <input type=“radio” name=“opt1”
value=“2” />

If the second option button is selected, the value of “opt1” will be “2”.
You may specify which button is (or checkboxes are) to be selected by default when the
page loads by giving the relevant <input> tag(s) the attribute selected=“selected”.


Checkboxes only send their values if they are checked.



type=“hidden”
Hidden fields are not shown to the user and thus
cannot be edited by the user.
They are used to send static data that you, the
developer, choose to send.
 For example, the language sent to Google was fixed at
“en” (English).

Their names and values are arbitrary; both the
name and the value will be sent to the server.

The most commonly used rules on form
fields are likely:
 height: Sets the height of the field.
 width: Sets the width of the field.
 font: Sets font properties.
 color: Sets the text color.

There is nothing particularly special about
form fields as CSS is concerned.
 Most of them can be styled just like anything else.

A few fields are not created using the <input> tag, but have their own tags:

Dropdown lists.
Simple lists.

Multi-line text boxes.

The name belongs to the <select> tag, but the values belong to the <option> tags.


Only the selected option’s value is sent.
For example,

<select name=“timezone”>


Dropdown and simple lists are created using the <select> tag. Between this tag and the closing </select> tag are <option> tags for
each choice in the list.
▪
▪
▪
▪


<option value=“-5”>Eastern</option>
<option value=“-6”>Central</option>
<option value=“-7”>Mountain</option>
<option value=“-8”>Pacific</option>

</select>

These can be used to input very long strings of text.
The dimensions can be controlled with CSS height and width, or the “rows” and “cols” attributes (rows in # of lines, cols in # characters).
<select> also takes a size attribute. If set to “1”, the list will be a dropdown. If set greater than 1, it will be a simple list (with the height to
accommodate that number of options).
Multiline text boxes are specified with the <textarea> tag.



The name attribute acts as it does in a single line text input box.
However, the value attribute does not. To set the default text shown in the textarea, insert it between the <textarea> and </textarea> tags:
▪
▪
▪
▪
<textarea name=“LongText”>
This is the default content of the textbox.
It can span multiple lines and can potentially be very long.
</textarea>
The <label> tag associates a block of text with a form field.
 When clicked, a label will highlight its corresponding form
field for input.

 The user can then type into it if it’s a text field.

There are two ways to use labels:
1.
2.
Wrap it around a form field; e.g. <label>Query: <input
type=“text” name=“q” /></label>
Give the form field an ID and point the label to it using the
“for” attribute with that ID; e.g. <label for=“q”>Query:</label>
<input type=“text” name=“q” id=“q” />

I’ve created a Perl script at
http://resources.polymathlectures.org/IT150/formdata.
cgi that will print out the information you submit from
a form.
 (You can find the source code for the script at formdata.txt
in the same path if interested).
Similar scripts exist on the Internet; you need not write
your own for many common tasks.
 We’ll now see how to write a form that uses all of
these field types (except file uploads, which require a
script specifically written to accept them).


Making pages dynamic.
 Rollovers.
 Popups.
 Dropdown menus.

Including Javascripts (client-side scripting)
in your pages and some of the dangers.
A Nonprofit Organization of New Jersey, USA