Forms
• To this point, all of our interaction with our website has
been in one direction – output
– web pages are received and displayed
– the user only inputs by selecting the next page through links
• However, there are many occasions where the user should
be allowed to provide input
– When ordering from a web site, the user supplies address and
payment information
– When altering or removing items from a shopping cart
– A web site may seek user feedback through a text area, or have
a way for the user to specify their email address to receive
further information
– Using a search engine
• To provide input to a web page, we will use the form tag
– Within a form, there are other tags that allow us to place
different types of input – text boxes, text areas, buttons, check
boxes, radio buttons
The Tag
• Like a list tag or an image map tag, the form tag
surrounds all of the code that go into the form
– …
– Inside the …, we can place our form elements
• The form tag should include four attributes
– action – what we want to do when the form information is
entered
• often, this will invoke code on either the client or server machine
– method – there are two methods, get (default) and post but
get is not secure, so we will always use post
– id and name – strings that we give the form for use in
server and client code
• use them both although id currently is only available for forward
compatibility with future versions of xhtml
• use the same name for both id and name but use a unique name (a
name not used elsewhere in this particular xhtml page)
The tag
• The input tag is used for creating a number of different types
of input
– The type of input is based on what type we assign in the tag using
assign=“…”
• text – a textbox
• password – a textbox where **** appear in place of the actual characters
being entered in order to hide whatever is typed
• radio – one radio button, should have at least two
• checkbox – one checkbox which can default to being checked or unchecked
• submit – a submit button
• reset – a reset button
• button – a button where you will specify what the button does in server or
client side code
• hidden – an item that is not visible but placed in the form to invoke server or
client side code
– Aside from type, the tag also has properties of id and
name (just like form) and depending on the above type, value
• the value to be returned if the item is selected
• the value (text) to appear in the button
• the value (text) to appear initially in the text area
A Simple Example
Please fill in the following information about yourself:
Name:
Address:
City:
State:
Zip Code:
Here is a sample of the email sent to webmaster@somecompany.com:
name=Frank+Zappa&address=101+N.+Penguin+St&city=Los+Angeles&state=CA&zip=90111
Sending Data by Email
• The previous example used mailto as the action
– This approach should not be used because
• the email is not secure
– private information such as credit card, social security or account
number, password, or even address, should be encrypted before
being transmitted over the Internet, but mailto does not encrypt
• the user’s email address will be seen by the recipient
– while this is not necessarily a bad thing, it removes anonymity
• in IE, the user is given warning messages which might cause
the user to cancel the message and thus not provide the data
or feedback requested (see the messages below)
Continued
• Firefox does not appear to be set up to handle the
mailto form
– Instead, the data in the form is wrapped up into an email
message and your email program is invoked to open a
new email window
– The email window has the mailto address as the
destination, and the data as the body of the email
• We want to utilize either server side or client side
code to handle the form data and transmit it
– We will explore some examples later in this chapter
• you will implement your own server side code in some exercises
and in a homework but mostly, that will be covered in CSC/CIT
301
• you will also see how you can handle forms using JavaScript
when we get to chapter 14 later in the semester
Making Your Form Look Good
• Our previous form didn’t look very good
– the text boxes weren’t aligned
– but we can force alignment using a table
• We use the … tags and place the individual
parts (the text and the tags inside … tags
• All of this is embedded inside … tags
– We use table properties to give the form a neater appearance
– We also use border=0 so that the table does not look like a table
• The html code for the table/form below is given in the notes
section of this slide
Notice that the title that runs above
the form spans across multiple
columns, we can accomplish this by
either placing that text into a
… or placing it
above the … code
(the latter is easier)
Password and Check Boxes
• The password box
– Input is shown as *** to keep the typed text hidden
Enter your password:
– Checkboxes are inserted one per input statement
• Supply a value for each checkbox, this is the value
returned by the form (for instance, yes/no, y/n, t/f)
Which activities do you plan to attend?
Concert
Sports
Dining
Shopping
Other
The email data will look like this:
act1=yes&act2=yes&act5=yes
Radio Buttons
• Radio buttons are grouped together so that the form
ensures exactly 1 button of the group is selected
– Therefore, each radio button in the group must share the
same name but should have different ids and values
– The value is used as the value returned when the form is
submitted
Select your major:
CSC
CIT
BIS
Other
Email comes as: major=cit
Text Areas
• A text area (…) is like input
type=“text” except that the area consists of multiple
lines and will come with possible scroll bars
– You specify the rows and columns to dictate the size of the
area
– You can also provide an initial set of text but the user will
have to delete it so it might be best to not include the value
property
Comments:
Enter your
comments here
The value returned will look like this:
comments=firstword+secondword+…
That is, all words placed together and
separated by + signs
Select Lists (Drop Boxes)
• The select list allows the user to select items from a list
• This type of input can appear as either
– A list that appears within a set sized window
• if there are more items than the size of the window, a scroll bar appears
• as a single entry box with a drop down menu
• This type permits two different types of selections:
– Select a single item from the list
– Select multiple items from the list
• To create a select list, first use the … tags
– Inside of these, place … tags
– Each option will have a value property and may have a selected
property (that is, this item by default is selected)
– In the …, place the string that you want to appear for that
selection
• Examples follow on the next slides
Example Select List
Select your favorite sport
Football (American)
Baseball
Basketball
Hockey
Soccer
Data sent as:
sports=football
Notice how the drop box covers up the buttons, how can we fix this?
Example Continued
By changing size=1 to size=4, the list now appears
as shown to the left
Notice the scroll bar because the number of entries
is greater than 4 (the size)
Also, we remove the first tag because we
no longer need the instructions “select your favorite sport”
By adding multiple=“multiple” in the tag,
we convert our list to one that accepts 1 or more
items (the user must press the ctrl key between clicks
to select multiple items)
To the right, the user has selected Football, Hockey
and Soccer (not shown because of the scroll bar
position), resulting in the data being sent as
sports=football&sports=hockey&sports=soccer
Full Example
To apply for our tutoring services, please fill in the following information:
Name:
Email:
Specify State:
Ohio
Kentucky
Indiana
Continued on the next slide
Notice that we are not using
a table here – with a table,
the form will look nicer
Sample data:
name=Frank+Zappa&
email=zappaf@nku.edu&state=OH&
eng=yes&his=yes&pay=mc
Continued
Specify subject area(s) of help requested:
Math
English
History
Chemistry
Biology
Select a payment option
Cash
Mastercard
Visa
Discover Card
American Express
NKU All Card
NKU Payroll Deducation
Why Use id and name?
• As we have seen throughout the semester, many of
our tags allow for a defined id and a defined name
– Since we are using the same name for each, why bother
with using both?
• The name attribute is supported by both html and
xhtml and can be used by client-side or server-side
scripts to identify a particular form element
• The id attribute is used in css code, and supported by
xhtml
• The idea is that by using both id and name (and
giving both the same value), the element is
accessible in any situation
– Your page(s) is supporting both backward compatibility
and future (or forward) compatibility
– The best practice is to use both and give both the same
value
The Label Tag
• In our examples to this point, we have added text
descriptors before or after the various form elements
– We can also specify these descriptors using the label tag
which combines the text descriptor and the form element
• this more precisely lines up the labels and boxes so that you do
not have to use the approach to make your
forms appear nice
• also, the label tag gives the user more control over how to
activate a box – you can now click in the box or on the label
itself
– You can either embed the form element inside a label tag
or you can connect the two by using the id value
• Email:
• Email:
– The for tag links the label to the input
Fieldset and Legends Tags
• In order to better control the appearance of form
elements, we can wrap them all into a fieldset tag
– This provides a border around the entire form
• The legend tag adds a descriptor to the border itself
– While these two tags are optional, they make the form
look more coherent and keep the form separate from the
remainder of the page
Customer Information
Name:
Email:
Phone:
Other Properties
• Tabindex
– When pressing the tab key in a form, the cursor moves from
one item to the next in the order that the items are listed in the
xhtml code
– You can override this behavior by giving each element its own
tabindex to specify the order (starting at 1)
• Accesskey
– You can also allow users to select a form element using a “hot
key” (alt+key in PCs)
– For instance, accesskey=“E” would mean that the item (e.g., a
radiobutton) can be selected automatically by pressing alt+E
• NOTE: access keys only work on capital letters
• Images in Buttons
– Using , you can specify a
button that appears based on the image file specified
– Alternatively, you can do
Using CSS To Style Forms
• We can specify the layout of our forms either with or
without tables
– Either way, we can use CSS to specify the format of the forms
themselves
– We now have additional tags that can be formatted such as
input, label, etc
• If we want to use a table to format the layout of the form,
we might specify css rules for the table, tr and td tags
– Unfortunately, this would affect all tables, not just a form
placed inside a table
– If we want to impact just the form, we might come up with a
number of classes such as .formtable and .formtd in our css
code
• Alternatively, we can use css to create borders, padding,
margins, width and so on so that we don’t need a table
– Two examples follow, one inside a table, one without a table
Example 1: Form in a Table
css code:
table { border: solid 3px black; width: 100%; }
td { padding: 5px; }
.mylabel { text-align: right; }
xhtml code:
Name:
Email:
Comments:
Example 2: Form Without a Table
css code:
.row { height: 30px; }
.sub { margin-top: 10px; margin-left: 110px; }
.lab { float: left; width: 100px; text-align: right; padding-right: 10px; }
#myform { border: 3px solid #000000; padding: 10px; margin: 10px; min-width:
500px; }
xhtml code:
Name:
Email:
Comments:
Processing Forms
• To this point, all of our processing of forms has simply
been to mail the data to a given email address
– As stated earlier, this is not secure and causes warning
messages to appear to the user
• The more proper way to handle a form is to write a
program (script) to handle the form from the client or
server side, more commonly the server side
– The client side might run a script that verifies that all relevant
information has been entered
• Writing scripts is mostly beyond the scope of this course
(we will write some JavaScript later in the semester, but JS
is client side scripting)
– Server side scripting is done in many different languages: perl,
php, active server pages (asp), Sun Java Server pages (jsp) or
cold fusion
– What all of these have in common is that they make up what is
known as CGI processing (common gateway interface)
CGI
• Here we see the CGI model
– The user is currently browsing a web page on their own client
machine
– They may click on a link that requires some CGI processing, or they
may submit a form
– The request is sent to the web server
• form data is encapsulated into the message sent to the server
– The server receives the request (and data) and executes the script
(perhaps on the same machine, perhaps sent to a separate machine)
– After running the script,
the server takes the output
from the script and sends it
back to the web server
• thus, the script creates a
new, dynamic web page
• often the script itself will
generate html code and any
data or text that goes in the
new page
– The browser receives the
new page and displays it
Example Script
• You have already tested out some examples in activities
• You did this by replacing your “mailto” action with an action
that specifies a php file on a webserver (in this case, nku’s)
• You can also use one available at the following
– action=“http://webdevfoundations.net/scripts/formdemo.asp”>
• The result is that when you click on the submit button, the form
data is sent to the web server and the script creates a new form
which is sent back to your browser and displayed, in this case
one that displays all of the form information
– Typically, you will not want to merely mimic the input of the form,
instead your script should do something meaningful with the data
• for instance, for the
newsletter example,
it should add the
user’s email address
to the listserv and
place the
name/email/comment
all into a database for
someone to later read
Example in PHP
• Here is a simple example of html + php code to provide
a website that has a form which can be used to add two
numbers together
Html:
First term:
Second term:
Php:
Processing a form
Another Example
Name:
Email:
City:
State:Zip
Code:
Form Response
";
echo " Your submission has been received, thank you. "; ?>
•
Privacy Concerns
Forms andyour website, this means that you are
If you have forms on
collecting information from the user
– Is the information something that they may wish to keep
private?
– What are your purposes for collecting the data?
– Will you share the data with others? If so, who?
• Because of the privacy threats that the Internet presents,
websites regularly publish their privacy policy on their
web site
– Why they are collecting the data, what data they are collecting,
who they might share the data with in the future
• Be aware that providing your email address in a web form
gives that company the right to distribute your email
address to others
– This is how mailing lists are formed and why you might get
tons of spam!
• we will examine privacy concerns in more detail later in the semester
Available CGI Resources
• CGI overview:
– hoohoo.ncsa.uiuc.edu/cgi/overview.html
• W3C resources on cgi:
– www.w3.org/CGI
• Free remove-hosted form processing:
– formbuddy.com
– hostedscripts.com
– response-o-matic.com
– www.formmail.com
– www.master.com
– www.wufoo.com
– www.formassembly.com
– www.iceberg.com
• Sources of CGI scripts:
– www.scriptarchive.com
– cgi.resourceindex.com/Programs_and_Scripts
– www.extropia.com
– www.asp101.com
– php.resourceindex.com