Tutorial 6 Creating Web Page Forms

1
Tutorial 6 - Creating Web Page Forms

• By Susan FuschettoModified by Marge Hohly

2
Objectives

• Learn about CGI scripts
• Review the various parts of an online form
• Create form elements
• Create a hidden field on a form
• Work with form properties
• Learn how to send data from a form to a CGI
  script
• Learn how to send form information without using
  CGI scripts
• Learn about enhancements to the HTML form elements

3
Creating a Registration Form for Jackson
Electronics

• Products - printers, copiers, and flatbed
  scanners
• Currently fewer than 10 of registration cards
  are returned
• Solution
• Create an online registration form
• Send the form via e-mail
• Administrative staff performs data entry into the
  company's database

4
Working With CGI Scripts

• HTML used to create a form, but not ability to
  process the information in the form
• CGI (Common Gateway Interface) scripts run on a
  Web server processes the data
• A CGI script is any program or set of commands
  running on the Web server that receives data from
  the Web page and then acts on that data to
  perform a certain task
• Process a customer's order
• Update a database
• Access a server-side image map
• Validate the form's data entry
• Send information back to the Web page

5
Working With CGI Scripts

• CGI scripts have made it possible for users to
  interact with companies and vice versa
• Maintain online databases
• Publish catalogues for ordering and purchasing
  items online
• Publish databases containing product support
  information
• Determine the number of times a Web page has been
  accessed
• Create server-side image maps
• Create message boards for online discussion
  forums
• Manage e-mail for discussion groups Just to name
  a few

6
Working With CGI Scripts

• CGI scripts run on the server, therefore you may
  not have access to them
• Another programmer will create the script and
  provide you with the specifications of the input
  and outputs the script will work with
• Why? System administrators want to control
  access to their servers.

7
Working With CGI Scripts

• CGI scripts can be written in a variety of
  languages
• AppleScript C/C
• Perl The UNIX shell
• TCL Visual Basic (VBScript)
• ASP (Active Server Pages) and more
• Which language depends on the server
• Check with your ISP or system administrator as to
  what scripts are used and what your rights and
  privileges are for working with them

8
Working With CGI Scripts

• Jackson Electronics Registration Form
• The CGI script is on the Jackson Electronics'
  server
• It retrieves the data from the form
• Sends the data in an e-mail message to
  administrative staff
• The administrative staff performs the data entry
  into the company's database
• You will not have access to the CGI script
• You will just be creating the HTML form
• In theory, the programmer of the CGI script will
  test the script and form together on the server

9
Working With CGI Scripts
10
Creating an Online Form

• Form elements may contain
• Input boxes for text numerical entries
• Radio buttons (option buttons) to select a single
  option from a predefined list
• Selection lists for long lists of options,
  usually in a drop-down list box
• Check boxes to specify an item as being either
  present or absent
• Text areas for extended entries that might
  include several lines of text
• Submit buttons to submit the form to the CGI
  script
• Reset buttons to reset the form to its original
  state

11
Creating an Online Form

• Users enter information into the elements
  referred to as fields
• The data entered into field is called the field
  value, or simply value
• Use the ltFORMgt tag to create the form
• You may create more than one form on a Web page
• You may not nest a form inside of another form

12
Creating an Online Form
13
Creating an Online Form

• Syntax ltFORM Propertiesgt
• Form elements and layout
  tagslt/FORMgt
• Specify the form's appearance using standard HTML
  tags, such as tables and italicized header tags
• The ltFORMgt tag includes properties that control
  how the form will be processed by the CGI script,
  but you start by building the form first, then
  the CGI properties

14
Creating an Online Form

• Since there can be multiple forms on a page, you
  add the NAME property to the ltFORMgt tag
• The NAME property is not required when there's
  only one form on the page, but it is good
  practice if you might add more forms later
• The NAME property value is case sensitive
• Registration form
• Open Regtext.htm and save as Register.htm
• NAME REG
• View Example 1 Initial form

15
Creating an Online Form

• Adding the ltFORMgt tag and NAME property to
  Register.htm
• Tables help with form layout
• Two columns 11 rows
• 2nd column has more than one field

16
Creating an Online Form

• Insert the table tags inside of the form tags in
  Register.htm
• You will be creating the rows and columns as you
  create the input elements

17
Working with Input Boxes

• NAME property is required
• The NAME is used by the CGI script to identify
  fields and their respective values

18
Working with Input Boxes

• An input box is a single-line box into which the
  user can enter text or numbers
• Syntax
• ltINPUT TYPEoption NAMEtextgtOption is the type
  of input fieldText is the name assigned to the
  input field
• TEXT is the default TYPE, so if you don't specify
  a TYPE, then the browser will assume TEXT
• TYPE properties are BUTTON, CHECKBOX, HIDDEN,
  IMAGE, PASSWORD, RADIO, RESET, SUBMIT, TEXT, and
  TEXTAREA
• We discuss each of these TYPES during this lecture

19
Working with Input Boxes

• The NAME property is used by CGI script and not
  seen by the user on the form
• So, you need to add a field label for each field
  in the form
• Let's start with the contact information in the
  Register.htm form
• Add rows and columns between the table tags
• Add field labels
• Add INPUT BOXES
• Leave the TYPE property off since these are text
  boxes and TEXT is the default type

20
Working with Input Boxes

• View the Example 2 INPUT boxes
• Syntax
• ltINPUT NAMEtext VALUEvalue SIZEvalue
  MAXLENGTHvaluegt
• Name is field name

21
Controlling the Size of an Input Box

• All input boxes by default are the same size - 20
  characters wide
• Specify the size with the SIZE property
• Syntax ltINPUT SIZEvaluegt Value is the
  size of the input box in number of
  characters
• Change the sizes of the input boxes for first
  name, last name, address 1, address 2, state and
  zip

22
Controlling the Size of an Input Box

• View Example 3 Controlling input box size

23
Setting the Maximum Length for Text Input

• By setting the size of the input box, you are not
  putting limitations on the text that can be
  entered into that field.
• Text will automatically scroll to the left
• All of the text will be sent to the CGI script
• For example
• You can limit the number of characters entered
  with the MAXLENGTH property
• Syntax
• ltINPUT MAXLENGTHvaluegt
• Value is the maximum number of characters that
  can be entered into the field

24
Setting the Maximum Length for Text Input

• Specify the maximum length for the Zip code field
  to 5 characters
• Now let's test the zip field

25
Setting the Default Value for an Input Box

• Use the VALUE property to set a default value for
  a field
• Syntax
• ltINPUT VALUE"value"gt
• Value is the default text or number that will
  appear in the field "" quotes are required for
  text strings

26
Setting the Default Value for an Input Box

• Set the default value for the Country field to
  "United States"
• View the Example 4 Maximum length and default
  value

27
Creating a Password Field

• Use the PASSWORD type when you don't want the
  information entered in the field to appear on the
  screen
• Looks like a password field with bullets or
  asterisks
• Is NOT a secure password field with a secure
  connection to the server nor is it encrypted
• Only acts as a mask
• Syntax
• ltINPUT TYPEPASSWORDgt
• You may specify the size, maximum length, and
  name properties
• Not used in the Register.htm form

28
Finishing the Contact Information on the Form

• Add a horizontal rule to Register.htm under the
  contact information
• It looks like this View Example 5 Horizontal
  line added to form

29
Creating a Selection List

• Create a selection list for the Jackson
  Electronics' product list
• Use the ltSELECTgt and ltOPTIONgt tags
• Syntax
• ltSELECT NAMEtextgt
• ltOPTIONgtOption 1
• ltOPTIONgtOption 2
• .
• .
• lt/SELECTgt

30
Creating a Selection List

• Text is the name you assign to the selection
  field
• Option 1, Option 2, etc. are the values displayed
  in the selection list
• The selection list looks like this View Example
  6 Selection list example

31
Adding the Date Purchased Serial Fields

• It looks like Example 7 Purchase date and
  Serial added

32
Modifying the Appearance of a Selection List

• Defaults
• Only one item is displayed
• Drop-down arrow is present
• Change the number items displayed with the SIZE
  property
• Syntax
• ltSELECT SIZEvaluegt
• Value is the number of items displayed

33
Modifying the Appearance of a Selection List

• By specifying a SIZE value greater than 1, you
  change the selection list from a drop-down list
  box to a list box with a scroll bar
• Set the SIZE value to the number of items in the
  list and the scroll bar is not displayed or is
  dimmed

34
Working With Option Values

• For example
• ltSELECT NAMEProductgt
• ltOPTION VALUE1gtScanMaster
• ltOPTION VALUE2gtScanMaster II
• lt/SELECTgt

35
Selection List

• To see the results of selection box showing 2
  items
• View Example 8 - Selection List displaying 2
  items

36
Making Multiple Selections

• Modify your list to allow multiple selections
• Syntax
• ltSELECT MULTIPLEgt
• Noncontiguous - Ctrl key and click items
• Contiguous - click the first item, hold down the
  Shift key, click the last item
• The CGI script must be able to handle multiple
  selections for one field

37
Working With Option Values

• By default, the form will send to the CGI script
  the values that appear in the selection list
• Sometimes you will want to send a different text
  string, usually an abbreviated version of a long
  entry
• Use the VALUE property to specify what is sent to
  the CGI script

38
Working With Option Values

• Also, by default, the first item in the list is
  the item initially selected and displayed
• Use the SELECTED property to specify the default
  list item to be selected and displayed
• For example
• ltSELECT NAMEProductgt
• ltOPTIONgtScanMaster
• ltOPTIONgtScanMaster II
• ltOPTION SELECTEDgtLaserPrint 1000
• lt/SELECTgt
• For Register.htm we will use the defaults

39
Working With Radio Buttons

• Radio buttons are similar to selection lists in
  that they display a list of choices
• Difference is that the user can only select one
  choice
• Syntax
• ltINPUT TYPERADIO NAMEtext VALUEvaluegt
• Text is the name assigned radio button field
• Value is the value sent to the CGI script when
  radio button is selected
• The NAME property is important because it groups
  the buttons together and automatically deselects
  the buttons that are not selected
• Therefore the name property must be the same name
  for all radio buttons in a group
• It is case sensitive

40
Working With Radio Buttons

• Each button needs a description next to it
• Each button needs a value, this value does not
  have to match the descriptive text

41
Working With Radio Buttons

• For Register.htm
• NAME will be USE
• Five buttons - home, business, government,
  educational institution, and other
• Add a new row with 2 columns

42
Working With Radio Buttons

• VALIGNTOP aligns the "Used for" text at the top
  of the cell
• ltBRgt tags force the next radio button to go to a
  new line within the cell

43
Working With Radio Buttons

• Let's take a look at it
• Add the CHECKED property to set a default option
• ltINPUT TYPERADIO NAMEUSE VALUEBUS
  CHECKEDgtBusiness
• Now it looks like Example 9 Radio buttons

44
Working With Check Boxes

• Similar to radio buttons, except the user may
  select as many boxes or no boxes
• Syntax
• ltINPUT TYPECHECKBOX NAMEtextgtText is the name
  of the field
• A check box has a value of "on" if the box is
  selected, and no value if the box is not selected
• You can assign a different value, such as "YES"
  instead of "on" if the box is selected
• ltINPUT TYPECHECKBOX NAMEtext VALUEYESgt
• Each checkbox will need descriptive text

45
Working With Check Boxes

• By default, checkboxes are deselected when the
  form is opened
• You may use the CHECKED property previously
  described for radio buttons
• Since a user can select all of the checkboxes,
  you must use unique NAMES for each checkbox
• For Register.htm
• Add a row with two columns
• Add the checkboxes with unique names
• Leave checkboxes deselected
• Add a horizontal rule after the checkboxes

46
Working With Check Boxes

• View Example 10 CheckBox Example

47
Working With Check Boxes

• Horizontal rule
• ltTRgt
• ltTD COLSPAN2gtltHRgtlt/TDgt
• lt/TRgt

48
Creating a Text Area

• Text Areas are useful for long comments, where as
  Input Boxes might be too small
• Use the ltTEXTAREAgt tag to create a text box like
  the one in Figure 6-23

49
Creating a Text Area

• Syntax
• ltTEXTAREA ROWSvalue COLSvalue NAMEtextgtdefault
  textlt/TEXTAREAgt
• ROWS is the number of lines in the box (some
  earlier browser may show more lines than
  specified)
• COLS is the number of characters allowed on each
  line
• Default text is the text that is displayed in the
  box when the form is first opened.
• Default text is not required, but sometimes
  helpful to give instructions to the user.
• The ending lt/TEXTAREAgt tag is required even if
  you don't use default text in your box

50
Creating a Text Area

• Text in a TEXTAREA box does not automatically
  wrap, the text will continue to scroll to the
  left as the text is typed
• Use the WRAP property to override this default
  setting
• Usually specify PHYSICAL or VIRTUAL, the
  difference is how the data is sent to the CGI
  script
• See Figure 6-24

51
Creating a Text Area

• For Register.htm
• Add a new row with 2 columns
• Add the Comments field using the ltTEXTAREAgt tag
• Wrap property set to virtual
• 4 lines high and 50 characters wide
• No default text

52
Creating a Text Area

• Let's look at the comments box and type in a lot
  of text to see it wrap around and the scroll bar
  change
• View Example 11 Text Area

53
Creating Form Buttons

• Buttons can be used to run programs, submit
  forms, or reset a form to its original state
• Use the INPUT tag with a TYPE of BUTTON
• Example
• ltINPUT TYPEBUTTON VALUE"Click to calculate
  total order"gt
• Value is the label on the button

54
Creating Submit Reset Buttons

• The SUBMIT button sends the data in the form to
  the CGI script
• The RESET button restores the form to its
  original default values without submitting it to
  the CGI script
• Syntax
• ltINPUT TYPESUBMITgt
• ltINPUT TYPERESETgt
• You can specify NAME and VALUE properties.
• These are used when you have more than one submit
  and reset buttons on the form and you want the
  CGI script to perform different actions

55
Creating Submit Reset Buttons

• View Examples 12 - Buttons
• Submit and reset buttons don't have to be labeled
  "submit" and "reset", you can specify the label
  with the VALUE property

56
Creating Submit Reset Buttons

• For Register.htm
• Add a row with only one column which will be
  centered
• Add a submit button labeled "Send Registration"
• Add a reset button labeled "Cancel"

57
Creating Submit Reset Buttons

• Let's test the Register.htm cancel button
• Register.htm with buttons
• Type in name, address, etc.
• Change the radio button from business to home
• Check some boxes
• Change United States
• Type in comments
• Then click the CANCEL button

58
Creating Image Fields

• Inline images can act like Submit buttons
• A user can click on an image and this action will
  submit the coordinates to the CGI script, then
  the script will perform an action based upon the
  coordinates
• Used with server-side maps
• Syntax
• ltINPUT TYPEIMAGE SRCURL NAMEtext VALUEtextgt
• URL is the filename or URL of the inline image
• NAME assigns a name to the field
• Value assigns a value to the image

59
Creating Image Fields

• Example
• ltINPUT TYPEIMAGE SRCUSAMAP.gif NAMEUSA
  VALUESTATEgtUser clicks the image at
  coordinates (15,30)The form sends
• Field name of USA and coordinate x USA.15
• Field value of STATE and coordinate y
  STATE.30
• The CGI script will perform an action based upon
  these coordinates

60
Creating Image FieldsWorking With Hidden Fields

• Our CGI script needs to know where to e-mail the
  form to, but we dont want the e-mail address to
  be displayed on the form where the user can see
  it
• We will create a hidden field that is part of the
  form, but not displayed on the form
• Syntax
• ltINPUT TYPEHIDDEN NAMEtext VALUEvaluegt

61
Working With Hidden Fields

• Place the hidden fields between the FORM tags
• Good practice to place all hidden fields in one
  place, usually at the beginning of the form
• Add the hidden e-mail field to Register.htm
• Note this is my email address
• View Example 13 Hidden example

62
Working With Form Properties

• Finally we need to specify where to send the form
  data and how to send it
• Modify the properties of the FORM tag with
  ACTION, METHOD, and ENCTYPE
• ACTION identifies the CGI script that will
  process the form
• ltFORM ACTIONURLgtURL is the URL of the CGI
  scriptThe URL is supplied to you by the person
  who wrote the CGI script

63
Working With Form Properties

• METHOD controls how your Web browser sends data
  to the Web server thats running the CGI
  scriptltFORM METHODtypegtType is either GET or
  POST
• GET method, the default, packages the form data
  by appending it to the end of the URL specified
  in the ACTION property. The Web server then
  retrieves the modified URL and stores it in a
  text string for processing by the CGI script.
• POST method, sends form information in a separate
  data stream, allowing the Web server to receive
  the data through standard input.

64
Working With Form Properties

• The POST method is the preferred method
• Safer, since some Web servers limit the amount of
  data sent with a GET method and will truncate the
  URL, losing valuable data
• If you write your own CGI scripts, then you will
  consider these issues which are out of the scope
  of this class
• In the meantime you will use what ever method the
  author of the CGI script tells you to use

65
Working With Form Properties

• ENCTYPE (encoding type) property specifies the
  format of the data when it is transferred from
  your Web page to the CGI scriptltFORM
  ENCTYPEtextgtText is the data formatDefault is
  application/x-www-form-urlencodedIf you dont
  specify a type, the above default is usedAnother
  often used format is multipart/form-data which
  allows the form to send files along with any form
  data
• Again this is a bit technical and beyond the
  scope of this course
• You will more than likely get your ENCTYPE
  specifications from the CGI author

66
Working With Form Properties

• One more possible property, the TARGET property.
• Use the TARGET property when your Web page has
  frames and you need to indicate where the output
  from the CGI script is going to display it
• For Register.htm
• Add ACTION and METHOD properties, no need for
  ENCTYPE since we will use the default format
• ACTION has a fictional URL

67
Working With Form Properties

• You have finished the form, but of course you
  cant test it since we used a fictional e-mail
  address and URL
• You can check out the following site to see how
  it would work
• http//www.careys.com/Jkson_Electronics/Register.h
  tm View Example 14 for completed form.
• Type your e-mail address in the first field
• Fill out the form
• Click the Click to register button
• You will get an immediate response back from the
  CGI script on the screen
• And, you will soon receive a message in your
  e-mail box

68
Using the MAILTO Action

• You can use the MAILTO ACTION instead of a CGI
  script to e-mail form information
• SyntaxltFORM ACTIONmailtoe-mail_address
  METHODPOSTgte-mail_address is the e-mail address
  of the recipient of the form information
• The mailto property uses the users own e-mail
  program to send the form

69
Using the MAILTO Action

• The advantage is that this is a simple way send
  information via e-mail without a CGI script
• Disadvantages
• Not all browsers support mailto, versions earlier
  than IE 4.0 and Netscape 3.0
• Not encrypted for privacy
• The recipients e-mail address is revealed to the
  user
• Depending on the users e-mail program settings,
  the e-mail will allow the user to make changes to
  the e-mail before sending it, or it will be sent
  automatically
• E-mails created with the mailto action have
  special characters inserted that have to be
  interpreted before it can be read Special
  Characters shown in Figure 6-34

70
Using the MAILTO Action

• You can use the WebForms translation program
  at http//www.q-d.com/wf.htm

71
Additional Form Elements

• HTML 4.0 enhancements for online forms more
  flexible and easier
• Supported by IE 4.0 or higher
• Check Netscape support
• Obviously, you should test these new enhancements
  on a variety of browsers to be certain

72
Creating Buttons With the ltBUTTONgt Tag

• More versatile than the INPUT tag supporting
  character and graphic elements
• SyntaxltBUTTON NAMEname VALUEvalue
  TYPEtypegt button text and HTML
  tagslt/BUTTONgtName is the fields nameValue is
  the default valueType of button (submit, reset,
  or button is default)

73
Creating Buttons With the ltBUTTONgt Tag

• You can format the buttons appearance with HTML
  tags including inline images

74
Assigning Labels to Fields

• Use the ltLABELgt tag to assign labels to fields
  instead of typing text in the form
• Two ways
• Place the input field within the ltLABELgt tags
• Assign the label using the FOR property

75
Assigning Labels to Fields

• Place the input field within the
• ltLABELgt tagsltLABELgtlabel textinput field tag
  and propertieslt/LABELgtLabel text is the text
  that youll associate with the field

76
Assigning Labels to Fields

• Assign the label using the FOR property
• ltLABEL FORfield_namegtlabel textlt/LABELgtInput
  field tag and propertiesField_name is the field
  name you want to associate with the label
• This approach allows you to place the label in
  one part of the document and the field in another
  part of the document

77
Assigning Labels to Fields

• The ltLABELgt tags are useful with radio buttons
  and check boxes because the user can click the
  label or the field to select/deselect the radio
  button or check box
• Example with a checkboxltTRgtltTDgt
• ltLABEL FORWINDOWSgtWindowslt/LABELgt
  lt/TDgt ltTDgt ltINPUT TYPECHECKBOX
  NAMEWINDOWSgt lt/TDgtlt/TRgt
• You could put the label and the input tags any
  where in the document
• See Example 16 Label

78
Assigning Labels to Fields

• The LABEL tag has a property called ACCESSKEY
• Access key or the accelerator key is a keyboard
  character that can be pressed along with CTRL,
  ALT, or OPTION (for Macs) key in order to jump
  to/select a field

79
Assigning Labels to Fields

• SyntaxltLABEL ACCESSKEYkey_lettergt
• Example create a quick key ALTw or
  OPTIONwltLABEL FORWINDOWS ACCESSKEYWgtltUgtWlt/
  UgtindowsltINPUT TYPECHECKBOX NAMEWINDOWSgtlt/LAB
  ELgt
• View Example 17 - Access Key Note the w is
  underlined, this is not required, but is a
  standard convention

80
Creating Group Boxes

• You can group together a set of buttons that
  share a common theme or appearance
• Usually done with radio buttons and check boxes
• The ltFIELDSETgt tag will place a box around the
  input fields and text located within the
  ltFIELDSETgt tags
• SyntaxltFIELDSETgtcollection of input fields and
  textlt/FIELDSETgt

81
Creating Group Boxes

• You can add a legend with the LEGEND tag
• SyntaxltFIELDSETgtltLEGEND ALIGNaligngtlegend
  textlt/LEGENDgtcollection of input fields and
  textlt/FIELDSETgtALIGN aligns the legend on the
  group box, Properties are TOP (default),
  BOTTOM, LEFT, and RIGHT

82
Creating Group Boxes

• For example, to redesign the registration
  formltFIELDSETgt ltLEGEND ALIGNTOPgtUsed
  forlt/LEGENDgt ltINPUT TYPERADIO NAMEUSE
  VALUEHomegtHomeltBRgt ltINPUT TYPERADIO
  NAMEUSE VALUEBUSgtBusinessltBRgt ltINPUT
  TYPERADIO NAMEUSE VALUEGOVgtGovernmentltBRgt
  ltINPUT TYPERADIO NAMEUSE
  VALUEEDgtEducational InstitutionltBRgt ltINPUT
  TYPERADIO NAMEUSE VALUEOTHERgtOtherlt/TDgtlt
  /FIELDSETgt
• View Example 18 Group Box

83
Creating Group BoxesSpecifying the Tab Order

• Users usually use the Tab key to move from field
  to field
• The default tab order is the order in which you
  entered your fields in the HTML file
• You can specify a different tab order using the
  TABINDEX property
• Syntax ltINPUT NAMEname TABINDEXvaluegtName is
  the field nameValue is the tab index number

84
Creating Group BoxesSpecifying the Tab Order

• ExampleltINPUT NAMEFirstName TABINDEX1gtFirstNa
  me field will be the first field the user goes to
  when the tab key is pressed

85
Specifying the Tab Order

• Set the tab index number for each field you want
  the user to move to in a particular order
• 1 first field, 2 second field, etc.
• 0 field will be tabbed to in the order that
  its encountered in the file
• Negative tab indexes are left out of the tabbing
  order entirely, the only way a user can get to
  that field is with the mouse
• Suggest thoroughly testing your tab order if you
  use the TABINDEX property, especially if you
  dont specify all fields with a tab index order
• View Example 19 Tab Order

86
What have we learned?

• Learned about CGI scripts
• Created an online form with text boxes, selection
  lists, checkboxes, radio buttons, text areas,
  submit and reset buttons
• Created a hidden field on a form
• Work with form properties
• Learned how to send data from a form to a CGI
  script
• Learned how to send form information without
  using CGI scripts
• Learned about enhancements to the HTML form
  elements