Foundations of the Web HTML Forms by Klipart

VIEWS: 29 PAGES: 52

									Foundations of the Web:
HTML Forms

            Pieter Berkel
            University of Tirana


2/26/2009                HTML Forms   1
Road Map
   Forms are Everywhere
   Form Example 1.0: Overview
   GET v. POST
   Basic Form Controls
      Text Boxes, Password Boxes, Radio Buttons,
       Check Boxes, Pull-Down Menus, and Hidden
       Fields.
 Form Layout and Validation
 XForms: The Future of Forms


2/26/2009               HTML Forms                  2
Forms are Everywhere
 A quick demo:
      Registering for Yahoo: my.yahoo.com
 Forms provide a simple mechanism for
  collecting user data and submitting it to
  a web server.
 Every web application uses forms. So,
  you need to know how they work.


2/26/2009            HTML Forms               3
Form Example 1.0




2/26/2009   HTML Forms   4
Example 1.0
 What it does
      User is prompted to enter first name, last name
       and password.
      Data is submitted to a Java Servlet that echoes
       the user data.
      (More on the Java Servlet in a few weeks…)
 All Form examples are located on the course
  web site:
   http://pjberkel.com/courses/applied/examples/html/



2/26/2009                HTML Forms                      5
<HTML>
<HEAD>
<TITLE>Form Example 1.0</TITLE>
</HEAD>

<BODY>          Start of Form Tag
<CENTER>
...
<FORM
ACTION=http://mycgiserver.com/servlet/pjberkel.FormServl
et METHOD="POST">
First Name:
<INPUT TYPE=TEXT NAME=first SIZE=20 MAXLENGTH=20><BR>
Last Name:
<INPUT TYPE=TEXT NAME=last SIZE=20 MAXLENGTH=20><BR>
Password:
<INPUT TYPE=PASSWORD NAME=password SIZE=20 MAXLENGTH=20>
<BR><INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
</CENTER>
</BODY>
                         End of Form Tag
</HTML>
 2/26/2009              HTML Forms                   6
Example 1: Overview
 Every form must have a start <form> tag and
  an end </form> tag.
<FORM>
…
</FORM>
 Note that the form tag also has two attributes:
      Method
      Action



2/26/2009            HTML Forms                 7
  Form Tag Attributes
 Action (Required):
   indicates where to submit user data.
   Usually indicates a CGI program or a Java
    Servlet.
   In Example 1, data is submitted to a Java
    Servlet:
  http://mycgiserver.com/servlet/pjberkel.FormServlet




  2/26/2009           HTML Forms                  8
Form Tag Attributes
   Method: indicates the way in which user data
    is submitted via the HTTP protocol.
        GET: browser sends user data as part of URL.
         http://mycgiserver.com/servlet/pjberkel.FormServlet?first=Pie
         ter&last=Berkel&password=yellow
        POST: browser sends user data as part of the
         HTTP Body.
   We will return to the exact differences when
    we discuss the HTTP protocol.


2/26/2009                      HTML Forms                            9
More on the Form Method
 Historical meaning:
    POST: Used to “post” news messages.
    GET: Given an ID, go “get” the new
     message.
 This is now confusing, since you can use
  either one. So, why use one over the other?
  Let’s look at another example….




2/26/2009           HTML Forms                  10
Example 2.0: GET v. POST




2/26/2009   HTML Forms     11
Example 2.0
 What it does:
      This code does the exact same thing as
       example 1.0.
      The only difference is that Example 1.0
       sends data via POST, whereas Example
       2.0 sends data via GET.
      Regardless of the Method, the same
       servlet still echoes the same data.
      Let’s take a look at the code…


2/26/2009             HTML Forms                 12
<HTML>
<HEAD>
<TITLE>Form Example 2.0</TITLE>
</HEAD>
<BODY>
<CENTER>
...
<FORM ACTION="http://mycgiserver.com/servlet/pjberkel.
FormServlet" METHOD="GET">
First Name:
<INPUT TYPE=TEXT NAME=first SIZE=20 MAXLENGTH=20><BR>
Last Name:
<INPUT TYPE=TEXT NAME=last SIZE=20 MAXLENGTH=20><BR>
Password:
<INPUT TYPE=PASSWORD NAME=password SIZE=20 MAXLENGTH=2
<BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
…

 2/26/2009             HTML Forms                13
Example 2.0
 When submitting data for Example 2.0, note
  that the user data is now appended to the
  URL:
 http://mycgiserver.com/servlet/pjberkel.FormS
  ervlet?first=Pieter&last=Berkel&password=yel
  low
 URLEncoding:
      Path and first piece of user data are separated
       with a ? character.
      After that, each piece of user data is separated
       with an & character.


2/26/2009                 HTML Forms                      14
URL Encoding
   Because the GET Method passes user data
    within the URL, you can easily create links
    that act like forms.
   For example:
   http://mycgiserver.com/servlet/pjberkel.FormS
    ervlet?first=Bill&last=Gates&password=micro
    soft
   This is a very common technique. Let’s go
    find some on mail.yahoo.com.


2/26/2009             HTML Forms               15
GET v. POST
   If GET and POST end up with the same
    result, why choose one over the other?
   Some servers limit the length of GET
    requests to 240 characters. Hence, use
    POST for large forms.
   If security is an issue, use POST. This will
    not encrypt the user data, but at least you
    cannot easily view the data by inspecting the
    URL.
   If you want to create links that act like forms,
    use GET.
2/26/2009               HTML Forms                     16
One More Form Attribute
 Enctype: Indicates the character encoding
  (Optional)
    text/plain: default
    multipart/form-data: used for file uploads.
 If you want to create an application that
  enables file upload, you need to use the
  multipart option.
 Examples: application for uploading your
  photos, sharing files, e.g.
  briefcase.yahoo.com
2/26/2009           HTML Forms                 17
Basic Form Controls




2/26/2009   HTML Forms   18
Basic Form Controls
 There are half dozen basic form controls:
        Text boxes, password boxes
        Pull-Down menus
        Radio Buttons
        Checkboxes
        Text Areas
        Hidden Fields
 We will now examine each of these in detail.



2/26/2009                 HTML Forms             19
Basic Input Syntax
   Every form control is specified with the
    <INPUT> tag.
   As usual, every start <INPUT> tag must
    have an end </INPUT> tag.
   Every <INPUT> tag must also have a
    name attribute.
   The name enables your server side
    program to extract the relevant data.


2/26/2009           HTML Forms             20
Text Controls
   Text boxes enable you to capture small
    amounts of text, such as a person’s name or
    an email address.

<INPUT TYPE=TEXT NAME=first SIZE=20
  MAXLENGTH=20>

   size: size of the text box
   maxlength: maximum length of string user
    can enter

2/26/2009             HTML Forms                  21
Password Controls
 Same as Text Box Controls. Only difference
  is that data is masked, so that someone
  cannot easily peer over your shoulder.
<INPUT TYPE=PASSWORD NAME=password
  SIZE=20 MAXLENGTH=20>
 Note: Password boxes are really not that
  secure. The data is not encrypted, and it is
  therefore still relatively easy to “sniff” out
  someone’s password.
 More on Security at the end of the semester.


2/26/2009            HTML Forms                    22
Submit/Reset Buttons
 Submit Button: Submits the form data
 <INPUT TYPE=SUBMIT
  VALUE="Click Here!">
 Reset Button: Clears the form
 <INPUT TYPE=RESET
  VALUE="Clear">
 Value: text you want to appear on the
  button.

2/26/2009        HTML Forms               23
Check Boxes
   Check boxes enable users to select one
    or more options.
     <input type=checkbox name="options" value="images"> Image
     <input type=checkbox name="options" value="video"> Video
     <input type=checkbox name="options" value="mp3"> MP3
   value: the text submitted to server.
   Let’s take a look at Example 3.0


2/26/2009                     HTML Forms                         24
Example 3.0
   This example simulates a search
    system.
   Users can enter a search keyword.
   Users can also select one or more
    search criteria: images, videos or
    mp3s.



2/26/2009          HTML Forms            25
<HTML>
<HEAD><TITLE>Form Example 3.0</TITLE></HEAD>
<BODY><CENTER>
...
<FORM ACTION="http://mycgiserver.com/servlet/pjberkel.FormServlet"
METHOD="GET">
Search for:
<INPUT TYPE=TEXT NAME=target SIZE=10 MAXLENGTH=20>
<BR>Pages must include:
<BR><input type=checkbox name="options" value="images"> Image
<BR><input type=checkbox name="options" value="video"> Video
<BR><input type=checkbox name="options" value="mp3"> MP3
<BR>
<INPUT TYPE=SUBMIT VALUE="Search">
</FORM></CENTER></BODY></HTML>

 2/26/2009                  HTML Forms                         26
Radio Buttons
   As opposed to check boxes, you can select
    only one radio button.

<input type=radio name="options" value="images"> Image
<input type=radio name="options" value="video"> Video
<input type=radio name="options" value="mp3"> MP3


   value: the text submitted to server.
   Let’s take a look at Example 4.0


2/26/2009                      HTML Forms                27
Example 4.0
   Nearly identical to Example 3.0
   Only difference: Checkboxes have now
    been replaced with radio buttons.
   User can only select one of three
    search criteria: images, videos or
    mp3s.



2/26/2009         HTML Forms           28
<HTML>
<HEAD><TITLE>Form Example 4.0</TITLE></HEAD>
<BODY><CENTER>
...
<FORM ACTION="http://mycgiserver.com/servlet/pjberkel.FormServlet"
METHOD="POST">
Search for:
<INPUT TYPE=TEXT NAME=target SIZE=10 MAXLENGTH=20>
<BR>Pages must include:
<BR><input type=radio name="options" value="images"> Image
<BR><input type=radio name="options" value="video"> Video
<BR><input type=radio name="options" value="mp3"> MP3
<BR><INPUT TYPE=SUBMIT VALUE="Search">
</FORM></CENTER></BODY>
</HTML>

2/26/2009                   HTML Forms                        29
 Hidden Fields
 Sometimes it is useful to send hidden data
  fields.
 These fields are hidden from user, but
  submitted to the server just like any other piece
  of data.
     <INPUT TYPE=HIDDEN NAME="username" value=“pjberkel">
 These are actually very useful for all sorts of
  applications: shopping carts, store checkouts,
  etc.
 Let’s take a look at Example 5.0

 2/26/2009               HTML Forms                     30
Example 5.0
 This example submits two pieces of
  data:
      A hidden field called username, that is
       automatically set to “pjberkel”.
      A text box for entering the password.
 When you click submit, you will see
  both pieces of data echoed.


2/26/2009              HTML Forms                31
<HTML>
<HEAD><TITLE>Form Example 5.0</TITLE></HEAD>
<BODY><CENTER>
...
<FORM ACTION="http://mycgiserver.com/servlet/.pjberkelFormServlet"
METHOD="POST">
<INPUT TYPE=HIDDEN NAME="username" value=“pjberkel">
Enter Password:
<INPUT TYPE=TEXT NAME="password" SIZE=20 MAXLENGTH=20>
<BR>
<INPUT TYPE=SUBMIT VALUE="Login">
</FORM>

</CENTER>
</BODY>
</HTML>
 2/26/2009                  HTML Forms                         32
Text Boxes
   Used to submit large blocks of text.

<TEXTAREA NAME="bio" COLS=40 ROWS=10>
Write a short bio here
</TEXTAREA>
   COLS: Width of the text Box
   ROWS: Height of the text Box
   Text: Represents default text that will
    automatically appear.
   Let’s take a look at Example 6.0
2/26/2009              HTML Forms             33
<HTML>
<HEAD><TITLE>Form Example 6.0</TITLE></HEAD>

<BODY>
<CENTER>
...
<FORM ACTION="http://mycgiserver.com/servlet/pjberkel.FormServlet"
METHOD="POST">
Tell us about yourself:
<BR>
<TEXTAREA NAME="bio" COLS=40 ROWS=10>
Write a short bio here</TEXTAREA>
<BR><INPUT TYPE=SUBMIT VALUE="Submit My Bio">
</FORM>
</CENTER></BODY>
</HTML>
 2/26/2009                  HTML Forms                         34
Select Options
   Creates pull-down and selection lists.
<SELECT NAME="major">
<OPTION VALUE="cs">Computer Science</OPTION>
<OPTION VALUE="is">Information Systems</OPTION>
<OPTION VALUE="psych">Psychology</OPTION>
<OPTION VALUE="hist">History</OPTION>
<OPTION VALUE="bio">Biology</OPTION>
</SELECT>
   There are several variations to the select
    control. Example 7.0 examines three
    different options.
2/26/2009              HTML Forms                 35
Example 7.0
 Contains three different selection boxes.
 Each one enables the user to select from a list of
  College Majors.
 Select Option #1:
    Options appear as a pull-down menu
    User can select one major.
 Select Option #2:
    Options appear as a list of three.
    User can select one major
 Select Option #3
    Options appear as a list of three
    User can select one or more majors.
2/26/2009               HTML Forms                     36
 Selection Option #1
<P><B>Option 1: SELECT SIZE defaults to 1</B>
<FORM ACTION="http://mycgiserver.com/servlet/pjberkel.FormServlet"
METHOD="POST">
Select your major:
<BR><SELECT NAME="major">
<OPTION VALUE="cs">Computer Science</OPTION>
<OPTION VALUE="is">Information Systems</OPTION>
<OPTION VALUE="psych">Psychology</OPTION>
<OPTION VALUE="hist">History</OPTION>
<OPTION VALUE="bio">Biology</OPTION>
</SELECT>
<BR><INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
 2/26/2009                  HTML Forms                         37
 Selection Option #2
<P><B>Option 2: SELECT SIZE is set to 3</B>
<FORM ACTION="http://mycgiserver.com/servlet/pjberkel.FormServlet"
METHOD="POST">
Select your major:<BR><SELECT SIZE=3 NAME="major">
<OPTION VALUE="cs">Computer Science</OPTION>
<OPTION VALUE="is">Information Systems</OPTION>
<OPTION VALUE="psych">Psychology</OPTION>
<OPTION VALUE="hist">History</OPTION>
<OPTION VALUE="bio">Biology</OPTION>
</SELECT>
<BR><INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

 2/26/2009                  HTML Forms                         38
Selection Option #3
<P><B>Option 3: SELECT SIZE is set to 3, MUTLIPLE</B>
<FORM ACTION="http://mycgiserver.com/servlet/pjberkel.FormServlet"
METHOD="POST">
Select your majors:
<BR><SELECT SIZE=3 NAME="major" multiple>
<OPTION VALUE="cs">Computer Science</OPTION>
<OPTION VALUE="is">Information Systems</OPTION>
<OPTION VALUE="psych">Psychology</OPTION>
<OPTION VALUE="hist">History</OPTION>
<OPTION VALUE="bio">Biology</OPTION>
</SELECT>
<BR><INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
2/26/2009                   HTML Forms                        39
Form Layout and Validation




2/26/2009   HTML Forms       40
Form Layout
   To create more elegant forms, it is
    generally very useful to combine forms
    with tables.
   Example 8.0 provides a simple
    example.




2/26/2009           HTML Forms               41
Form Validation
 Every computer program must be prepared to
  deal with human errors and unexpected
  conditions.
 Hence, while it is easy to create forms, most of
  the hard work goes into validating the user input.
 For example:
      Did the user enter all the required fields?
      Did the user enter a search keyword (try
       yahoo.com without a keyword)
      Did the user enter a valid zip code?
      Did the user enter a valid email address?

2/26/2009                 HTML Forms                 42
Form Validation Options
 There are two broad options for form
  validation:
      Option 1: Client Side Validation
             Performed via the JavaScript language.
             Good for checking that required fields are filled in.
             Immediately prompts the user with the error.
      Option 2: Server Side Validation
             Performed via a CGI Application or Java Servlet
             Upon submission, web server checks form data, and
              then returns a refreshed page with errors denoted.
             An example: Registering for Yahoo.com
             This is the option we will explore for Java Servlets


2/26/2009                         HTML Forms                          43
XForms: The Future of Forms




2/26/2009   HTML Forms    44
Problems with HTML Forms
 There are two main problems with
  current HTML forms technology:
      Poor integration with XML
      Device dependent, running well only on
       desktop browsers
 To deal with these issues, the World
  Wide Web Consortium (W3C) has a
  new specification called XForms.

2/26/2009             HTML Forms                45
XForms and XML
 With HTML forms, data is submitted as name value
  pairs.
 For example:
  http://mycgiserver.com/servlet/pjberkel.FormServlet?f
  irst=Pieter&last=Berkel&password=yellow
 With XForms, this data would be submitted as XML:
     <first>Pieter</first>
     <last>Berkel</last>
     <password>yellow</password>
 This makes it potentially easier to parse more
  complicated form data.


2/26/2009                 HTML Forms                 46
XForms Validation
 Crucial for forms is additional processing,
  including calculating, validating, and keeping
  track of which form controls are relevant,
  read-only, or required.
 In HTML, nearly all such processing is
  accomplished through attached scripts.
 With XForms, each field can be associated
  with specific rules. For example:
      regular expression pattern for an email address.
      this field can only contain dates.
      this field can only contain numbers, etc.


2/26/2009                HTML Forms                       47
Other XForms Features
   permits date data-types to be entered through
    user-friendly interfaces like pop-up calendars.
   forms are usable across a wide variety of
    devices, including Palm Pilots, Phones, etc.
   it is even possible to create multi-page forms
    that don't need to contact the server when
    switching pages.




2/26/2009              HTML Forms                48
XForms Controls
   XForms also
    supports additional
    user controls.




2/26/2009             HTML Forms   49
Demo XForms
 To view a demo of XForms in action,
  download the XSmiles Web Browser:
      http://www.xsmiles.org/
 The next two slides show screenshots
  from the XSmiles web browser.




2/26/2009             HTML Forms         50
2/26/2009   HTML Forms   51
2/26/2009   HTML Forms   52

								
To top