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 tag. In between and 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 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: 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: 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: 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: 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: option 1 option 2 Also, you can make it so that one of the radio buttons is already checked by default:

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: 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: option 1 option 2 Also, you can make it so that any of the check boxes is already checked by default:

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: Any default text that you wish to add goes in between the opening and closing textarea tags

Text Areas (cont’d) The “rows” and “cols” parameters are used to determine the size of the text area Try inserting a text area: This is the default text inside the text area

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: Option Display Text

Drop Down Lists (cont’d) In the tag, the name parameter refers to the name of the entire list In the tags, the value parameters refer to the names of the individual options in the list Try adding a drop down list to your form: Option 1 Option 2

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 tag to show what will be in the box Also, you can use 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: Try adding a reset button to your form:

The Submit Button (type = “submit”) The general structure looks like this: 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 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:

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 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: 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: 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 This MUST be address A hidden input field named “ ” to tell it where to send the from This just tells the program what account to use to send the mail – use your address

FormMail – Optional Fields You can have the user input an address into a text field so that when the form is sent, it appears to be coming from the user specified address You can determine the subject (title) of the being sent with the Form Mailer in a hidden field named “subject”:

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. 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=“

Example!! Here’s a special treat for showing up to lab… Tune your browser to:

Hints for Testing When you first write your form, put in your OWN 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 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 or 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: 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.shtml 3.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