Forms and Server Side Includes

What are Forms?

• Forms are used to get user input• We’ve all used them before. For example, ever had to

sign up for courses using web advisor? Web advisor makes good use of forms!

• Usually forms consist of two different parts:• Input

• this is where users type in things / click on options

• Submit & Reset• these buttons submit the data in the form for processing (more

on this later) or reset the input areas to their original value,

What goes in a Form?

• A form is defined using the <form> tag.

• In between <form> and </form>you can have:• Input Areas• Buttons• Text • Any HTML element

Let’s do an example!

• START Programs Accessories Notepad• Save the file as form.html

• Remember to save it as type: ‘All Files’

Form Example

Input Areas

• Most input areas are defined using the <input> tag• Tag properties / parameters in the tag tell the

browser what kind of input it is and what kind of information the user is inputting

• You can also define things like input area size and the default value with tag properties / parameters

Input areas

• The usual input tag structure looks like this:<input type=“something” name=“something”>

• The input opening tag tells the web browser that the user will be able to enter input here

• The type parameter is required to tell the browser what kind of input area to display

• The name parameter tells the browser how to refer to the input area

• This is incredibly important so that YOU also can know how to refer to a specific input area!

Text Fields (type = “text”)

• Text fields are used when you want the user to type in a word or number

• The general structure looks like this:

<input type=“text” name=“something”>• Two useful parameters:

• size specifies the length of the text field in characters• Most browsers have a default text field size of 20 characters

• value sets the default value of the text field• Is overwritten when the user adds information into the text field

Text Field Example

Text Field Example (cont’d)

• Don’t forget to tell your users what you want them to enter into the input area!

• Just let them know by adding some plain text and/or html tags to your form

Password Field(type = “password”)

• Password fields are used when you want the user to type in a password

• The general structure looks like this:

<input type=“password” name=“something”>• The size and value parameters can also be used with

password field, however, anything used for the “value” parameter will be displayed as stars (*)

• Also, don’t forget to put in something to tell your user that you are looking for a password!

Password Fields (cont’d)

• A password box is almost exactly the same as a text input, except that everything the user types is displayed as stars (*)• This is to avoid a security

problem known as

“shoulder surfing”

Radio Buttons(type = “radio”)

• Radio buttons are used when you want the user to pick one option from a list of options

• The general structure looks like this:

<input type=“radio” name=“something” value=“something”>

• name the name of the whole list of radio buttons• value the name of one of the radio buttons

Radio Buttons (cont’d)

• Try adding two radio buttons to your form:

<input type=“radio” name=“radio1” value=“option1”> option 1 <br><input type=“radio” name=“radio1” value=“option2”> option 2 <br>

• Also, you can make it so that one of the radio buttons is already checked by default:

<input type=“radio” name=“radio1” value=“option3” checked=“checked”>

Check Boxes(type = “checkbox”)

• Check Boxes are used when you want the user to pick one or more options from a list of options

• The general structure looks like this:

<input type=“checkbox” name=“something” value=“something”>

• name the name of the whole list of check boxes• value the name of one of the check boxes

Check Boxes (cont’d)

• Try adding two check boxes to your form:

<input type=“checkbox” name=“check1” value=“option1”> option 1 <br><input type=“checkbox” name=“check1” value=“option2”> option 2 <br>

• Also, you can make it so that any of the check boxes is already checked by default:

<input type=“checkbox” name=“check1” value=“option3” checked=“checked”>

Text Areas

• Text areas are used when you want the user to input multiple lines of text• For example, areas for writing comments

• The general structure looks like this:

<textarea rows=“number” cols=“number” name=“something”>

Any default text that you wish to add goes in between the opening and closing textarea tags

</textarea>

Text Areas (cont’d)

• The “rows” and “cols” parameters are used to determine the size of the text area

• Try inserting a text area:

<textarea rows=“10” cols=“50” name=“comments”>

This is the default text inside the text area </textarea>

Drop Down Lists

• Drop down lists are similar to regular lists• There’s a tag to start the list and tags for each of the

options in the list

• The general structure looks like this:

<select name=“something”>

<option value=“something”> Option Display Text </option>

<option value=“something”> Option Display Text </option>

</select>

Drop Down Lists (cont’d)

• In the <select> tag, the name parameter refers to the name of the entire list

• In the <option> tags, the value parameters refer to the names of the individual options in the list

• Try adding a drop down list to your form:

<select name=“drop1”><option value=“opt1”> Option 1 </option><option value=“opt2”> Option 2 </option>

</select>

Fieldsets

• Fieldsets are used to separate user input areas into groups• Places a border around whatever is inside it• For example, if you had questions on a number of different

topics, you might want to visually separate them

• Use the <fieldset> tag to show what will be in the box• Also, you can use <legend> tag inside the fieldset to put

text around the border.• Ok, let’s look at a quick example…

Fieldset Example

Fieldset Example (cont’d)

The Reset Button(type = “reset”)

• Reset buttons restore the default values in the form• The general structure looks like this:

<input type=“reset” value=“The text appearing on the button”>

• Try adding a reset button to your form:

<input type=“reset” value=“Reset”>

The Submit Button(type = “submit”)

• The general structure looks like this:

<input type=“submit” value=“The text appearing on the button”>

• When the submit button is pressed, the data from the form is sent to another page or program for processing

• But how does it know where to send it?….

Submit Actions

• You tell the server where to send your form information by using parameters inside the <form> tag

• The “action” parameter tells the server where to send it The “method” parameter tells the server how to send it

• A full form tag that will actually do something with your data.

• The general structure looks like this:

<form action=“address to send to” method=“how to send it”>

The method Parameter

• There are two different ways to send data:• Get – sends the data to the next page by attaching it to the url

• Advantages – you can bookmark the page and all the data from the form is retained as a part of the URL

• Disadvantages – people can see it - there are limits on the amount of data that can be

sent this way• Post – sends the data to the next page through the server

• Advantages – makes it so people can’t easily see your data - no limit on the amount of data that can be sent

• Disadvantages – you can’t use a bookmark to see the page

• Most programs use post• you should use post to send that for your assignment #3

The action Parameter

• If you had something specific you wanted to do with the data you could write your own script• For example, collect it in a file, run an analysis of it, etc…• This is fairly difficult because you need to have some

knowledge of programming

• Fortunately, the general server provides a script that you can use to email the form results to yourself. • this is fairly common and many servers have services like this

Guelph Form Mailer

• To use the Guelph form mailer:• Action: http://www.uoguelph.ca/cgi-bin/FormMail.pl

• Method: post

• This is what you should use for assignment #3

Guelph Form Mailer (cont’d)

• Because everyone in the school can use the form mailer, it is pretty generic • you need to tell the program certain things like

where to send the mail, what you want it called, etc…

• So how do we send the program this info• Hidden input tags!

Hidden

• When a form is completed, and the submit button is pressed, the form information is sent to a program or script for processing

• Hidden input tags are used to send additional information to this program

• Because the user cannot see the inputs, they cannot change the values

Hidden (cont’d)

• To add a hidden input tag:

<input type=“hidden” name=“whatever” value=“something”>

• These tags will not show on the page

• We will need hidden input tags in order to use the University of Guelph’s Form Mailer

FormMail – Required Fields

• A hidden input field named “recipient” that will tell the form where to send the mail – change the address to where you want it sent

<input type=“hidden” name=“recipient” value=“destination@uoguelph.ca">

• This MUST be an @uoguelph email address

• A hidden input field named “email” to tell it where to send the email from

<input type=“hidden” name=“email” value="somebody@uoguelph.ca"> • This just tells the program what account to use to send the mail –

use your own @uoguelph email address

FormMail – Optional Fields

• You can have the user input an email address into a text field so that when the form is sent, it appears to be coming from the user specified email address

<input type=“text” name=“email”>

• You can determine the subject (title) of the email being sent with the Form Mailer in a hidden field named “subject”:

<input type=“hidden” name=“subject” value=“description">

FormMail – Optional Fields (cont’d)

• If you choose, you can make it so that when the submit button is clicked, it will redirect you to another webpage.

• This is done with another hidden field that tells the program where to send the user after submitting the form.<input type=“hidden” name=“redirect” value="http://whatever">

• Make sure you use the absolute page address because the program is located in a totally different area than your home page. For example…

• value=“http://www.uoguelph.ca/~user/pages/thanks.shtml”

Example!!

Here’s a special treat for showing up to lab…

Tune your browser to:

www.uoguelph.ca/~jdutrisa

Hints for Testing

• When you first write your form, put in your OWN email address as the place to send it to, otherwise you will not be able to tell if it works • Make sure to change the address to jizhu@uoguelph.ca

after you know your form works

• You have to post your page to general in order to use the Guelph Form Mailer

Server Side Includes (SSI)

• This section about SSI is just for your knowledge and you may or may not use it.

• When you have a number of different pages, usually they share some common elements

• For example, a menu bar, a header, a footer, etc…

• Until now, each of these pages would have had to have their own version of these, and each would have to be updated separately each time the element was changed

• Much like CSS, SSI is used to centralize global page objects by allowing you to include the objects in a number of different pages

Server Side Includes (cont’d)

• A server side include tells the browser to take all the text from a file and insert that text where the tag is

• Think of it like like copying all the text from another file and pasting directly into your html source code

• A server side include is a directive issued to the server

• It appears to be a tag, but it is actually different because it is processed by the server, and not the browser

• This means you cannot test your tags unless your pages are on a server

Server Side Includes (cont’d)

• The text from the files that include into a webpage should be in html format so that when the final copy is presented to the browser the code is readable• You do not need any of the starting tags (such as <html>

or <body> in the include file because it is going in the middle of the document and the other file should have them already to begin with

• The general structure of an SSI tag looks like this:<!--#include virtual=“filename.ext"-->

• To use SSI in an html page, the page extension must be changed from .html .shtml

Let’s Do An Example!

• For this example, we’re going to create a very simple webpage that uses SSI

• We’ll call our webpage: example.shtml

• We’ll call our include file: includeme.html

• And the we’ll upload the files onto General:• example.shtml into the “public_html” directory• includeme.html into the “pages” directory

SSI Example (cont’d)

Here is example.shtml

SSI Example (cont’d)

Here is includeme. html

SSI Example (cont’d)

SSI Tips

1. Don’t forget to change your extensions to .shtml !!!2. Don’t forget to change your links to .shtml3. Don’t forget to remove your old .html pages,

especially index.html because otherwise your .shtml page will not show by default

4. Make sure to set the permissions correctly for the include file (-rw-r--r--)

5. Don’t forget that you can’t test your includes until the page is posted to general