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 <form> Tag• Like a list tag or an image map tag, the form tag surrounds all of the code that go into the form– <form>…</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 <input /> 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 <input /> 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 ExamplePlease fill in the following information about yourself:<br /><form method="post"

action="mailto:webmaster@somecompany.com" name="customer“ id="customer">

Name: <input type="text" name="name" id="name" /><br />Address: <input type="text" name="address" id="address" /><br />City: <input type="text" name="city" id="city" />State: <input type="text" name="state" id="state" size=2 maxlength=2 />Zip Code: <input type="text" name="zip" id="zip"

size=10 maxlength=10 /><br /><input type="submit" value="Press Enter to Submit" /></form>

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 <table>…</table> tags and place the individual parts (the text and the <input> tags inside <td>…</td> tags

• All of this is embedded inside <form>…</form> 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 abovethe form spans across multiplecolumns, we can accomplish this byeither placing that text into a <td colspan=1>…</td> or placing itabove the <form>…</form> code(the latter is easier)

Password and Check Boxes• The password box– Input is shown as *** to keep the typed text hidden

– 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)

Enter your password: <input type="password" name="pw" id="pw" size=20 maxlength=15 />

Which activities do you plan to attend?<br /><input type="checkbox" name="act1" id="act1" value="yes" /input>Concert<br /><input type="checkbox" name="act2" id="act2" value="yes" /input>Sports<br /><input type="checkbox" name="act3" id="act3" value="yes" /input>Dining<br /><input type="checkbox" name="act4" id="act4" value="yes" /input>Shopping<br /><input type="checkbox" name="act5" id="act5" value="yes" /input>Other<br /><input type="submit" />

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

submittedSelect your major:<br /><input type="radio" name="major" id="csc" value="csc" /input>CSC<br /><input type="radio" name="major" id="cit" value="cit" /input>CIT<br /><input type="radio" name="major" id="bis" value="bis" /input>BIS<br /><input type="radio" name="major" id="other" value="other" /input>Other<br /><input type="submit" />

Email comes as: major=cit

Text Areas• A text area (<textarea>…</textarea>) 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:<br /><textarea name="comments" id="comments" cols=40 rows=4">Enter your comments here</textarea><br /> <input type="submit" /><input type="reset" />

The value returned will look like this:

comments=firstword+secondword+…

That is, all words placed together andseparated 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 <select>…</select> tags– Inside of these, place <option>…</option> 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 size=1 name="sports" id="sports"><option selected="selected"> Select your favorite sport</option><option value="football">Football (American)</option><option value="baseball">Baseball</option><option value="basketball">Basketball</option><option value="hockey">Hockey</option><option value="soccer">Soccer</option></option></select><br /><input type="submit" /><input type="reset" />

Data sent as:sports=football

Notice how the drop box covers up the buttons, how can we fix this?

Example ContinuedBy changing size=1 to size=4, the list now appearsas shown to the left

Notice the scroll bar because the number of entriesis greater than 4 (the size)

Also, we remove the first <option> tag because weno longer need the instructions “select your favorite sport”

By adding multiple=“multiple” in the <select> tag, we convert our list to one that accepts 1 or moreitems (the user must press the ctrl key between clicksto select multiple items)

To the right, the user has selected Football, Hockeyand Soccer (not shown because of the scroll barposition), resulting in the data being sent assports=football&sports=hockey&sports=soccer

Full ExampleTo apply for our tutoring services, please fill in the following information:<br /><form method="post" action="mailto:foxr@nku.edu" name="customer“ id="customer">Name: <input type="text" size=30 name="name" id="name" /><br />Email: <input type="text" size=30 name="email" id="email" /><br />Specify State:<br /><input type="radio" name="state" id="oh" value="OH" />Ohio<br /><input type="radio" name="state" id="ky" value="KY" />Kentucky<br /><input type="radio" name="state" id="in" value="IN" />Indiana<br />

Continued on the next slide

Notice that we are not usinga 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

ContinuedSpecify subject area(s) of help requested:<br /><input type="checkbox" name="math" id="math" value="yes" />Math<br /><input type="checkbox" name="eng" id="eng" value="yes" />English<br /><input type="checkbox" name="his" id="his" value="yes" />History<br /><input type="checkbox" name="chem" id="chem" value="yes" >Chemistry<br /><input type="checkbox" name="bio" id="bio" value="yes" />Biology<br /><select size="4" name="pay" id="pay"><option selected="selected">Select a payment option</option><option value="cash">Cash</option><option value="mc">Mastercard</option><option value="visa">Visa</option><option value="disc">Discover Card</option><option value="ae">American Express</option><option value="nku1">NKU All Card</option><option value="nku2">NKU Payroll Deducation</option></select><br /><input type="submit" value="Press Enter to Submit" /><br /><input type="reset" value="Reset Form" />

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 <table></table> 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• <label>Email: <input type=“text” name=“email” id=“email”

/></label>• <label for=“email”>Email: </label><input type=“text”

name=“email” id=“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

<form name="sample" method="post" action="mailto:foxr@nku.edu"><fieldset><legend>Customer Information</legend><label>Name: <input type="text" name="name" id="name" size=30 /></label><br /><br /><label>Email: <input type="text" name="email" id="email" size=30 /></label><br /><br /><label>Phone: <input type="text" name="phone" id="phone" size=15 maxlength=12 value="###-###-####" /></label><br /><br /><input type="submit" /></fieldset></form>

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 <input type=“image” src=“…” />, you can specify a

button that appears based on the image file specified– Alternatively, you can do <button type=“submit”><img

src=“…”></button>

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 Tablecss code:table { border: solid 3px black; width: 100%; }td { padding: 5px; }.mylabel { text-align: right; }

xhtml code:<form method=“post”><table> <tr><td class=“mylabel”><label for=“name”>Name:</label></td> <td><input type=“text” name=“name” id=“name” /></td></tr> <tr><td class=“mylabel”><label for=“email”>Email:</label></td> <td><input type=“text” name=“email” id=“email” /></td></tr> <tr><td class=“mylabel”><label for=“comm”>Comments:</label></td> <td><textarea name=“comm” id=“comm” cols=60 rows=2></textarea></td></tr> <tr><td colspan=2><input type=“submit” value=“Get Newsletter” /></td></tr></table></form>

Example 2: Form Without a Tablecss 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:<div id="myform"><form method="post"><div class="row"><label class="lab" for="name">Name:</label> <input type="text" name="name" id="name" /></div><div class="row"><label class="lab" for="email">Email:</label> <input type="text" name="email" id="email" /></div><div class="row"><label class="lab" for="comm">Comments:</label> <textarea name="comm" id="comm" cols=60 rows=2></textarea></div><br /><div class="sub"><input type="submit" value="Get Newsletter" /></div></form></div>

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:<form action=“http://www.nku.edu/~foxr/sum.php" method="post" name="add" id="add"><table><tr><td>First term: </td> <td><input type="text" name="term1" id="term1" /> </td></tr><tr><td>Second term: </td> <td><input type="text" name="term2" id="term2" /> </td></tr><tr><td></td><td><input type="submit"/></td></tr></table></form>

Php:<html><head><title> Processing a form </title></head><body> <?php $a=$_POST['term1'];

$b=$_POST['term2'];$c=$a+$b;echo "{$a} + {$b} = {$c}";

?></body></html>

Another Example<form action="http://www.nku.edu/~foxr/processform.php" method="post" name="form" id="form"><table><tr><td align="right">Name:</td><td colspan=4><input type="text" name="name" id="name" size=40 /></td></tr><tr><td align="right">Email:</td><td colspan=4><input type="text" name="email" id="email" size=40 /></td></tr><tr><td align="right">City:</td><td colspan=4><input type="text" name="city" id="city" size=40 /></td></tr><tr><td align="right">State:</td><td><input type="text" name="state" id="state" size=4 maxlength=2 /></td><td></td><td align="right">Zip Code:</td><td><input type="text" name="zip" id="zip" size=10 maxlength=12 /></td></tr><tr><td></td><td colspan=2><input type="submit" /></td></tr></table></form>

<html><head><title>Form Response</title></head><body><?php

$n=$_POST['name'];$c=$_POST['city'];$s=$_POST['state'];echo "Hello {$n}, from {$c}, {$s} <br /> ";echo " Your submission has been received, thank you. "; ?>

</body></html>

Forms and Privacy Concerns• If you have forms on your website, this means that you are

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