Forms and Server Side Includes

1
Forms and Server Side Includes
2
What are Forms?

• Forms are used to get user input
• Weve 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,

3
What goes in a Form?

• A form is defined using the ltformgt tag.
• In between ltformgt and lt/formgtyou can have
• Input Areas
• Buttons
• Text
• Any HTML element

4
Lets do an example!

• START ? Programs ? Accessories ? Notepad
• Save the file as form.html
• Remember to save it as type All Files

5
Form Example
6
Input Areas

• Most input areas are defined using the ltinputgt
  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

7
Input areas

• The usual input tag structure looks like this
• ltinput typesomething namesomethinggt
• 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!

8
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
• ltinput typetext namesomethinggt
• 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

9
Text Field Example
10
Text Field Example (contd)

• Dont 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

11
Password Field(type password)

• Password fields are used when you want the user
  to type in a password
• The general structure looks like this
• ltinput typepassword namesomethinggt
• 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, dont forget to put in something to tell
  your user that you are looking for a password!

12
Password Fields (contd)

• 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

13
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
• ltinput typeradio namesomething
  valuesomethinggt
• name ? the name of the whole list of radio
  buttons
• value ? the name of one of the radio buttons

14
Radio Buttons (contd)

• Try adding two radio buttons to your form
• ltinput typeradio nameradio1
  valueoption1gt option 1 ltbrgt
• ltinput typeradio nameradio1
  valueoption2gt option 2 ltbrgt
• Also, you can make it so that one of the radio
  buttons is already checked by default
• ltinput typeradio nameradio1 valueoption3
  checkedcheckedgt

15
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
• ltinput typecheckbox namesomething
  valuesomethinggt
• name ? the name of the whole list of check boxes
• value ? the name of one of the check boxes

16
Check Boxes (contd)

• Try adding two check boxes to your form
• ltinput typecheckbox namecheck1
  valueoption1gt option 1 ltbrgt
• ltinput typecheckbox namecheck1
  valueoption2gt option 2 ltbrgt
• Also, you can make it so that any of the check
  boxes is already checked by default
• ltinput typecheckbox namecheck1
  valueoption3 checkedcheckedgt

17
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
• lttextarea rowsnumber colsnumber
  namesomethinggt
• Any default text that you wish to add goes in
  between the opening and closing textarea tags ?
• lt/textareagt

18
Text Areas (contd)

• The rows and cols parameters are used to
  determine the size of the text area
• Try inserting a text area
• lttextarea rows10 cols50 namecommentsgt
• This is the default text inside the text area ?
• lt/textareagt

19
Drop Down Lists

• Drop down lists are similar to regular lists
• Theres a tag to start the list and tags for each
  of the options in the list
• The general structure looks like this
• ltselect namesomethinggt
• ltoption valuesomethinggt Option Display Text
  lt/optiongt
• ltoption valuesomethinggt Option Display Text
  lt/optiongt
• lt/selectgt

20
Drop Down Lists (contd)

• In the ltselectgt tag, the name parameter refers
  to the name of the entire list
• In the ltoptiongt tags, the value parameters refer
  to the names of the individual options in the
  list
• Try adding a drop down list to your form
• ltselect namedrop1gt
• ltoption valueopt1gt Option 1 lt/optiongt
• ltoption valueopt2gt Option 2 lt/optiongt
• lt/selectgt

21
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 ltfieldsetgt tag to show what will be in
  the box
• Also, you can use ltlegendgt tag inside the
  fieldset to put text around the border.
• Ok, lets look at a quick example

22
Fieldset Example
23
Fieldset Example (contd)
24
The Reset Button(type reset)

• Reset buttons restore the default values in the
  form
• The general structure looks like this
• ltinput typereset valueThe text appearing on
  the buttongt
• Try adding a reset button to your form
• ltinput typereset valueResetgt

25
The Submit Button(type submit)

• The general structure looks like this
• ltinput typesubmit valueThe text appearing on
  the buttongt
• 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?.

26
Submit Actions

• You tell the server where to send your form
  information by using parameters inside the ltformgt
  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
• ltform actionaddress to send to methodhow to
  send itgt

27
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 cant easily see
  your data
• - no limit on the amount of data that
  can be sent
• Disadvantages you cant use a bookmark to see
  the page
• Most programs use post
• you should use post to send that for your
  assignment 3

28
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

29
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

30
Guelph Form Mailer (contd)

• 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!

31
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

32
Hidden (contd)

• To add a hidden input tag
• ltinput typehidden namewhatever
  valuesomethinggt
• These tags will not show on the page
• We will need hidden input tags in order to use
  the University of Guelphs Form Mailer

33
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
• ltinput typehidden namerecipient
  valuedestination_at_uoguelph.ca"gt
• This MUST be an _at_uoguelph email address
• A hidden input field named email to tell it
  where to send the email from
• ltinput typehidden nameemail
  value"somebody_at_uoguelph.ca"gt
• This just tells the program what account to use
  to send the mail use your own _at_uoguelph email
  address

34
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
• ltinput typetext nameemailgt
• You can determine the subject (title) of the
  email being sent with the Form Mailer in a hidden
  field named subject
• ltinput typehidden namesubject
  valuedescription"gt

35
FormMail Optional Fields (contd)

• 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.
• ltinput typehidden nameredirect
  value"http//whatever"gt
• Make sure you use the absolute page address
  because the program is located in a totally
  different area than your home page. For example
• valuehttp//www.uoguelph.ca/user/pages/thanks.s
  html

36
Example!!

• Heres a special treat for showing up to lab
• Tune your browser to
• www.uoguelph.ca/jdutrisa

37
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_at_uoguelph.ca after you know your form works
• You have to post your page to general in order to
  use the Guelph Form Mailer

38
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

39
Server Side Includes (contd)

• 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

40
Server Side Includes (contd)

• 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
  lthtmlgt or ltbodygt 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
• lt!--include virtualfilename.ext"--gt
• To use SSI in an html page, the page extension
  must be changed from .html ? .shtml

41
Lets Do An Example!

• For this example, were going to create a very
  simple webpage that uses SSI
• Well call our webpage example.shtml
• Well call our include file includeme.html
• And the well upload the files onto General
• example.shtml into the public_html directory
• includeme.html into the pages directory

42
SSI Example (contd)

• Here is example.shtml

43
SSI Example (contd)

• Here is includeme. html

44
SSI Example (contd)
45
SSI Tips

• Dont forget to change your extensions to .shtml
  !!!
• Dont forget to change your links to .shtml
• Dont forget to remove your old .html pages,
  especially index.html because otherwise your
  .shtml page will not show by default
• Make sure to set the permissions correctly for
  the include file (-rw-r--r--)
• Dont forget that you cant test your includes
  until the page is posted to general