Creating Web Page Forms

1
Creating Web Page Forms
Tutorial 6

• Designing a Product Registration Form

2
Objectives

• Describe how Web forms can interact with a
  server-based program
• Insert a form into a Web page
• Create and format an input box for simple text
  data
• Add a form label and link it to a control element

3
Objectives

• Set up a selection list for a predefined list of
  data values
• Create option buttons for a list of possible
  field values
• Organize fields into field sets
• Insert a text area box for multiple lines of text
  data

4
Objectives

• Generate form buttons to submit or reset a form
• Describe how data is sent from a Web form to a
  server
• Understand how to create image fields, hidden
  fields, and file buttons
• Apply tab indices and access keys to control
  elements

5
Introducing Web Forms

• Web forms collect information from customers
• Web forms include different control elements
  including
• Input boxes
• Selection lists
• Drop-down lists boxes
• Option buttons or radio buttons
• Check boxes
• Group boxes
• Text areas
• Form buttons

6
Forms and Server-Based Programs

• While HTML supports the creation of forms, it
  does not include tools to process the information
• The information can be processed through a
  program running on a Web server

7
Forms and Server-Based Programs

• Server-based programs are written in many
  languages
• The earliest and most commonly used are Common
  Gateway Interface (CGI) scripts that are written
  in perl
• Other popular languages include
• AppleScript - PHP
• ASP - TCL
• ColdFusion - the Unix shell
• C/C - Visual Basic

8
Creating the Form Element

• Forms are created using the form element,
  structured as follows
• ltform attributesgt
• elements
• lt/formgt
• Where attributes are the attributes that control
• how the form is processed and elements are
• elements places within the form.

9
Creating the Form Element

• Form attributes usually tell the browser the
  location of the server-based program to be
  applied to the forms data
• Always specify an id or name for the form
• Two attributes are available to identify the
  form id and name

10
Creating the Form Element

• The syntax of the id and name attributes are as
  follows
• ltform namename ididgt lt/formgt
• Where name is the name of the form and id is the
  id of
• the form.

11
Creating Input Boxes

• The general syntax of input elements is as
  followsltinput typetype namename idid
  /gt
• Where type specifies the type of input field,
• and the name and id attributes provide the
• fields name and id.

12
Creating Input Boxes

• Input types
• typebutton
• Displays a button that can be clicked to perform
  an action from a script
• typecheckbox
• Displays a check box
• typefile
• Displays a browse button to locate and select a
  file
• typehidden
• Creates a hidden field, not viewable on the form

13
Creating Input Boxes

• Input types
• typeimage
• Displays an input image that can be clicked to
  perform an action from a script
• typepassword
• Displays an input box that hides text entered by
  the use
• typeradio
• Displays an option button

14
Creating Input Boxes

• Input types
• type-reset
• Displays a button that resets the form when
  clicked
• typesubmit
• Displays a button that submits the form when
  clicked
• typetext
• Displays an input box that displays text entered
  by the user

15
Setting the Size of an Input Box

• By default, an input box displays at 20
  characters of text
• To change the width of an input box, use the size
  attribute which is displayed as followsltinput
  sizevalue /gt
• Where value is the size of the input box in
  characters.

16
Setting the Size of an Input Box
17
Creating a Password Field

• A password field is an input box where characters
  typed by the user are displayed as bullets or
  asterisks to protect private or sensitive
  information on a Web site
• The syntax for creating a Password field is as
  follows
• ltinput typepassword /gt

18
Creating an input box

• To create an input box, use the following HTML
  code
• ltinput namename idid
• valuevalue sizevalue
• maxlengthvalue /gt
• Where the name and id attributes identify the
  field, the value
• attribute assigns the fields default value, the
  size attribute
• defines the width of the input box in characters,
  and the
• maxlength attribute specifies the maximum number
  of
• characters that a user can enter into the field.

19
Working with Form Labels

• You can also expressly link a label with an
  associated text element for scripting purposes
• The syntax for creating a form label is as
  follows
• ltlabel foridgtlabel textlt/labelgt
• Where id is the value of the id attribute for a
  field on the form, and label text is the text of
  the label.

20
Creating a Selection List

• A selection list is a list box from which a user
  selects a particular value or set of values
• Selection lists are useful when there are a fixed
  set of possible responses from the user
• You can create a selection list using the
  ltselectgt tag
• You can specify each individual selection item
  using the ltoptiongt tag

21
Modifying the Appearance of a Selection List

• You can change the number of options displayed in
  the selection list by modifying the size
  attribute. The syntax is as follows
• ltselect size valuegt lt/selectgt
• Where value is the number of items that the
  selection list displays in the form.

22
Modifying the Appearance of a Selection List
23
Making Multiple Selections

• Add the multiple attribute to the select element
  to create multiple selections
• ltselect multiplemultiplegt lt/selectgt

24
Working with Option Groups

• Use option groups to organize selection lists
  into distinct groups.
• ltselect attributesgt
• ltoptgroup labellabel1gt
• ltoptiongtitema1lt/optiongt
• ltoptiongtitema2lt/optiongt
• ltselect attributesgt
• ltoptgroup labellabel1gt
• ltoptiongtitema1lt/optiongt
• ltoptiongtitema2lt/optiongt
• lt/optgroupgt
• lt/selectgt

25
Creating Option buttons

• Option buttons, or radio buttons allow users to
  make selections.
• Unlike selection lists, option buttons only allow
  the user to select one option at a time.

All option buttons belonging to the same field
share a common name
Labels are matched to the id values of the option
buttons
26
Creating a Field Set

• HTML and XHML allow you to organize option
  buttons into a group of fields called field sets
  
• Most browsers place a group box around a field
  set to indicate that the fields belong to a
  common group
• ltfieldsetgt
• fields
• lt/fieldsetgt
• Where fields are the individual fields within a
  set.

27
Creating a Field Set

• To create a field set, enclose the fields in the
  following tags
• ltfieldsetgtfields
• lt/fieldsetgt
• Where fields are the form fields in the field
  set. Field sets are
• usually displayed in a group box

28
Creating a Field Set

• To add a caption to a field set, add the
  following tag after the opening ltfieldsetgt tag
• ltlegendgttextlt/legendgt
• Where text is the text of the field set caption.

29
Creating Check Boxes

• To create a check box, use
• ltinput typecheckbox namename
  ididvaluevalue /gt
• Where the name and id attributes identify the
  check box field and
• the value attribute specifies the value sent to
  the server if the check
• box is selected
• To specify that a check box be selected by
  default, use the checked attribute as follows
• ltinput typecheckbox checkedchecked /gt
• or
• ltinput typecheckbox checked /gt

30
Creating a Text Area Box

• Text area boxes allow users to enter comments
  about the products theyve purchased
• An input box would be too small to accommodate
  the length of text for this use

31
Creating a Text Area Box

• To create a text area box, use the textarea
  element
• lttextarea namename idid rowsvalue
  colsvaluegt
• default text
• lt/textareagt
• Where the rows and cols attributes define the
• dimensions of the input box and the rows
  attribute
• indicates the number of lines in the input box

32
Creating a Text Area Box
33
Wrap values

• Wrapoff
• Wrapsoft
• Wraphard

34
Working with Form Buttons

• Buttons are a type of control element that
  performs an action
• Types of buttons
• Command button
• Submit button
• Reset button
• File button

35
Creating a Command button

• Command buttons are created using the ltinputgt
  tag
• ltinput typebutton valuetext /gt
• Submit buttons submit forms to the server for
  processing when clicked. Syntax is as follows
• ltinput typesubmit valuetext /gt
• Reset buttons reset forms to their original
  (default) values. Syntax is as follows
• ltinput typereset valuetext /gt

36
Completed Registration Form
37
Designing a Command button

• Use the button element for greater artistic
  control over the appearance of a button
• ltbutton namename idid valuevalue
  typetypegt
• content
• lt/buttongt
• Where the name and value attributes specify the
  name of the button
• and the value sent to a server-based program, the
  id attribute
• specifies the buttons id, the type attribute
  specifies the button type,
• and the content is page content displayed within
  the button.

38
Creating a File button

• File buttons are used to select files so that
  their contents can be submitted for processing to
  a program.
• The Web page then only displays the files
  location, not the files contents.

39
Working with Hidden Fields

• Hidden fields are added to a form, but not
  displayed in the Web page. The syntax is as
  follows
• ltinput typehidden namename idid
• valuevalue /gt

40
Working with Form Attributes

• After adding the elements to your form, youll
  need to specify where to send the form data and
  how to send it. Use the following attributes
• ltform actionurlmethodtypeenctypetypegt
  lt/formgt
• Where url specifies the filename and location of
  the program that processes
• the form and the method attribute specifies how
  your Web browser sends
• data to the server. The enctype attribute
  specifies the format of the data
• stored in the forms field.

41
Working with Form Attributes

• The method attribute can have one of two values
• Post
• Get
• The get method is the default get appends the
  form data to the end of the URL specified in the
  action attribute
• The post method sends form data in a separate
  data stream, allowing the Web server to receive
  the data through standard input

42
Using the mailto Action

• The mailto action accesses the users own e-mail
  program and uses it to mail form information to a
  specified e-mail address
• By-passes the need for server-based programs
• The syntax is as follows
• ltform action-mailtoe-mail_address methodpost
• enctypetext/plaingt lt/formgt
• Where e-mail_address is the e-mail address of the
  recipient in the form

43
Specifying the Tab Order

• Users typically navigate through a form with the
  tab key
• You can specify an alternate tab order by adding
  the tabindex attribute to any control element in
  your form
• The syntax is as follows
• ltinput namefname tabindex1 /gt
• This syntax assigns the tab index number 1 to
  the fname field from the
• registration form

44
Specifying an Access Key

• An access key is a single key typed with the Alt
  key (Windows) or Control key (Mac), in order to
  jump to one of the control elements in the form
• Create an access key by adding the accesskey
  attribute to any control element
• Example of creating an access key for the lname
  field
• ltinput namelname accesskey1 /gt

45
Tips for Creating Effective Forms

• Label all control elements clearly and concisely
• Use horizontal lines, tables, and line breaks to
  separate topical groups from one another
• Use field sets to organize common groups of
  fields, especially option buttons
• Use the tab order to ensure that users will move
  correctly from one field to another

46
Tips for Creating Effective Forms

• Use option buttons, check boxes, and selection
  lists whenever possible to limit a users choice
  of entries, thus reducing the chance of an
  erroneous data value. Use input boxes only when
  the field has no predefined list of values.
• Use selection lists for items with several
  possible options. Use option buttons for items
  with few options. Use a check box for each item
  with only two possible values.

47
Tips for Creating Effective Forms

• Let users know the correct format for input box
  text by inserting default text in the appropriate
  format (for example, insert the text string,
  mm/dd/yyyy in a Date input box to indicate the
  format for inserting date values
• Use password fields for sensitive or confidential
  information (such as passwords)
• Because form elements differ between browsers,
  view your form on different browsers and
  different browser versions to ensure that the
  form displays correctly in all situations