Creating Web Page Forms

1
Tutorial 6

• Creating Web Page Forms

2
Tutorial Objectives

• Describe how Web forms can interact with a
  server-based program
• Review the various parts of an online form
• Create form elements
• Create a hidden field on a form
• Work with form attributes

3
Forms Server-Based Programs

• HTML supports tags for creating forms, however,
  it does not process the information.
• A server-based program, e.g., CGI script,
  receives data from a form and processes form
  information.
• ISPs and universities may provide CGI scripts
  that their customers and student can use, but
  which they cannot directly access or modify

4
Server-Side Programs

• Among the many things server-side programs made
  possible are
• online database containing customer information
• online catalogues for ordering and purchasing
  merchandise
• determining the number of times a Web page has
  been accessed
• server-side image maps
• message boards for hosting online discussion
  forums

5
Server-Side Programs

• The earliest of server-side programs are CGI
  scripts written in perl. Other popular languages
  used are
• ASP
• ColdFusion
• C/C
• Perl
• TCL
• PHP
• Visual Basic

6
Form Components and Elements
7
Form Control Elements

• text boxes for text and numerical entries
• selection lists for long lists of options,
  appearing in a drop-down list box
• radio buttons or option buttons to select a
  single option from a predefined list
• check boxes to specify an item as either present
  or absent
• groups boxes to organize form elements
• text areas for extended entries that can include
  several lines of text
• buttons that can be clicked to start processing
  the form

8
The ltformgt Tag

• A single page can include several different
  forms, but you cannot nest one form inside
  another.
• The general syntax isltform namename idid
  other attributesgt form elementslt/formgt
• The name or id attribute identifies each form on
  the page. It is also needed for programs that
  retrieve values from the form.

9
Form Control Elements

• Each control element in which the user can enter
  information is called a field.
• Information entered into a field is called the
  field value, or simply the value.
• In some fields, users are free to enter anything
  they choose.
• Other fields, such as selection lists, limit the
  user to a predefined list of options.

10
input boxes
selection list
check boxes
option buttons
form button
text area
11
Input Types
12
Working with Text Boxes

• The general syntax is
• ltinput typetype namename ididgt
• type specifies the type of input field
• name and id attributes identifies the input field
  for the server-side program
• To create a text box, you would enter the tag
• ltinput typetextgt
• If the type attribute is not included, the Web
  browser assumes, by default, that you want to
  create a text box.

13
The name and id Attribute

• The name and id attributes of the ltinputgt tag
  identifies the input field for the CGI script.
• The name attribute represents the older standard.
  The newest standard uses the id attribute.
• The id attribute is required, if a form contains
  form labels.
• It is best to duplicate the information by using
  both the name and id attributes.

14
Creating a Text Box

• ltinput typetext namename idid
  valuevalue sizevalue maxlengthvaluegt
• name and id attributes identify the field
• value attribute assigns a default value to the
  text box
• size attribute defines the width of the text box
  in number of characters. By default, all text
  boxes are 20 characters wide.
• maxlength attribute defines the maximum number of
  characters allowed in the field

15
Setting the Width of Text Boxes
ltinput typetext namelname idlname"
size30 /gt
16
Setting the Maximum Length for Text Input

• Setting the width of an input box does not limit
  the number of characters the box can hold.
• The syntax for setting the maximum length is
• ltinput maxlengthvaluegt
• value is the maximum number of characters that
  can be stored in the field
• ltinput type"text" name"zip" id"zip size10
  maxlength10 /gt
• no more than 10 characters are allowed in this
  zip text box

17
Setting a Default Value for a Field

• When the same value is entered into a field, it
  may make sense to define a default value for a
  field.
• To define a default value, use
• ltinput valuevaluegt
• value is the default text or number that is
  displayed in the field
• ltinput typetext namecountry id country
  size"40" valueUnited States /gt

18
Creating a Password Field

• A password field is a text box in which the
  characters typed by the user are displayed as
  bullets or asterisks i.e. .
• The syntax for creating a Password field is
• ltinput typepassword /gt
• The password field only acts as a mask for a
  field entry as it is entered.

19
Working with Form Labels

• HTML allows you to link a label with an
  associated text element for scripting purposes.
• The syntax for creating a form label is
• ltlabel foridgtlabel textlt/labelgt
• id is the value of the id attribute for a field
  on the form
• Labels can simplify the data entry process by
  allowing a user to click on either the control
  element or the elements label to enter data.
• Labels allow users to write scripts to modify
  their content for interactive forms.

20
Creating a Label for the fname and lname Fields
lttrgt lttd width"110"gt ltlabel
forfnamegtFirst Namelt/labelgt lt/tdgt
lttdgt ltinput typetext namefname idfn
ame size30 /gt ltlabel forlnamegtLast
Namelt/labelgt ltinput typetext
namelname idlname size30
/gt lt/tdgt lt/trgt
21
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 good to use when there is a
  fixed set of possible responses.
• Selection lists help prevent spelling mistakes
  and erroneous entries.
• A selection list is created using the ltselectgt
  tag.
• The ltoptiongt tag is used to specify individual
  selection items.

22
Creating a Selection List
ltselect nameitem iditemgt ltoptgroup
labelRoutersgt ltoptiongtLanPass
115lt/optiongt ltoptiongtLanPass 125lt/optiongt ltopt
iongtLanPass 250lt/optiongtlt/optgroupgt ltoptgroup
labelSwitchesgt ltoptiongtFastSwitch
200lt/optiongt ltoptiongtFastSwitch
400lt/optiongtlt/optgroupgt ltoptgroup
labelAdaptersgt ltoptiongtLG 10Mpbslt/optiongt lt
optiongtLG 10Mpbs/wlt/optiongt ltoptiongtLG
100Mpbslt/optiongt ltoptiongtLG 100Mpbs/wlt/optiongtlt/
optgroupgt lt/selectgt
23
Selection Lists withDifferent Size Values

• The number of options displayed can be modified
  with the size attribute. The syntax is
• ltselect sizevaluegt
• value is the number of items that the selection
  list displays in the form
• by specifying a value greater than 1, the
  selection list changes from a drop-down list box
  to a list box

size 1
size 4
24
Working with Option Values

• By default, a form sends an entire text string to
  the server. An abbreviation or code can also be
  sent to the server with the value
  attributeltoption value1gtLanPass
  115lt/optiongtltoption value2gtLanPass
  125lt/optiongt
• Use the selected attribute to specify which item
  in the selection is selected, or highlighted,
  when the form is displayed.ltoption
  selectedselectedgtFastSwitch 200lt/optiongt

25
Working with Option Groups

• HTML allows you to organize selection lists into
  groups. The syntax isltoptgroup labellabelgt
• label is the label assigned to the option group
• the text for the label appears in the selection
  list above each group of items but is not a
  selectable item from the list

26
Working with Radio Buttons

• Radio buttons display a list of choices from
  which a user makes only one selection. The syntax
  isltinput typeradio namename idid
  valuevalue checkedchecked /gt
• name identifies the field containing the
  collection of radio buttons
• id identifies the specific option
• value attribute specifies the value sent to the
  server, if that radio button is selected by the
  user
• Selecting one radio button in the group
  automatically deselects all of the other radio
  buttons

27

• ltfieldsetgt
• ltlegendgtUsed For (check one)lt/legendgt
• ltinput typeradio nameuse idhome
  valuehome /gt ltlabel
  forhomegtHomelt/lablelgtltbr /gt
• ltinput typeradio nameuse
  idbus valuebus checkedchecked /gt
  ltlabel forbusgtBusinesslt/labelgtltbr /gt
• ltinput typeradio nameuse
  idchar valuechar /gt
• ltlabel forchargtReligious or
  Charitable Institutionslt/labelgtltbr /gt
• ltinput typeradio nameuse
  idgov valuegov /gt
• ltlabel forgovgtGovernmentlt/labelgtltbr /gt
• ltinput typeradio nameuse
  idedu valueedu /gt ltlabel
  for"edu"gtEducational
  Institutionlt/labelgt
• lt/fieldsetgt

28
Selection Lists vs. Radio Buttons

• If you have a long list of options, use a
  selection list.
• If you want to allow users to select more than
  one option, use a selection list with the
  multiple attribute.
• If you have a short list of options, and only one
  option is allowed at a time, use radio buttons.

29
Creating a Group Box

• A group box labels an entire collection of radio
  buttons.
• A group box is a box placed around a set of
  fields that indicates that they belong to a
  common group.
• The syntax for creating a group box is
• ltfieldsetgt
• ltlegendgttextlt/legendgt
• collection of fields
• lt/fieldsetgt

30
Working with Check Boxes

• A check box is either selected or not, there is
  only one check box per field. The syntax
  isltinput typecheckbox namename idid
  valuevalue checkedchecked /gt
• name and id attribute identify the check box
• the value attribute specifies the value that is
  sent to the server if the check box is selected

31
Creating a Text Area

• To create a larger text area for the input box,
  use the taglttextarea namename idid
  rowsvalue colsvaluegt default
  text lt/textareagt
• rows and cols attributes define the dimensions of
  the input box
• Default text can be specified in the input box
  when the form is initially displayed.

32
Creating Form Buttons

• Another type of control element is one that
  performs an action. In forms, this is usually
  done with a button.
• Buttons can be clicked to
• run programs
• submit forms
• reset the form to its original state

33
Creating a Command Button

• One type of button, called a command button, is
  created using the ltinputgt tag as follows
• ltinput typebutton valuetext /gt
• text is the text that appears on the button
• By themselves, command buttons perform no actions
  in the Web page.
• To create an action, write a script or program
  that runs automatically when the button is
  clicked.

34
Creating Submit and Reset Buttons

• A submit button is a button that submits the form
  to the server for processing.
• A reset button resets the form to its original
  (default) values.
• The syntax for creating these two buttons is
• ltinput typesubmit namename idid
  valuetextgt
• ltinput typereset valuetextgt
• value attribute defines the text that appears on
  the button

35
Creating Buttons with the ltbuttongt Tag

• Buttons created with the ltinputgt tag do not allow
  the Web page designer to control the appearance
  of the button. For greater artistic control over
  the appearance of the button, use the ltbuttongt
  tag. The syntax isltbutton namename idid
  valuevalue typeoptiongtcontentlt/buttongt
• value provides an initial value for the button
• type is submit, reset, or button
• content consists of the page elements displayed
  in the button

36
Using the ltbuttongt Tag

• ltbutton nameback typebuttongt
• ltimg srcback.gif alt
• stylemargin 4 vertical-align middle /gt
• ltspan stylecolor blue font-weight boldgt
• Home Pagelt/spangt
• lt/buttongt

37
Creating File Buttons

• A file button is used to select files so that
  their contents can be submitted for processing to
  a program.
• The contents of the file are not displayed--only
  the files location.
• The program can then use that information to
  retrieve the file for processing.
• The syntax isltinput inputfile namename /gt

38
Using a File Button
39
Creating Image Fields

• Inline images can act like submit buttons, so
  that when the user clicks the image, the form is
  submitted. The syntax is
• ltinput typeimage srcurl namename
  valuetextgt
• url is the filename and location of the inline
  image
• name assigns a name to the field
• value attribute assigns a value to the image
• When the form is submitted to the CGI script, the
  coordinates of where the user clicked are
  attached to the images name and value in the
  format namex_coordinate, value.y_coordinate.

40
Working with Hidden Fields

• A hidden field is added to the form but not
  displayed in the Web page. It can be placed
  anywhere between the opening and closing ltformgt
  tags. The syntax is
• ltinput typehidden namename idid
  valuevalue /gt

41
Working with Form Attributes

• To specify where to send the form data and how to
  send it add the following attributesltform
  actionurl methodtype enctypetypegt
• url specifies the filename and location of the
  program that processes the form
• method attribute specifies how your Web browser
  sends data to the server
• enctype attribute specifies the format of the
  data stored in the forms field

42
The method Attribute get or post

• The get method (the default) appends the form
  data by appending it 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 what is called standard input
• The post method is safer, because some Web
  servers limit the amount of data sent via the
  get method and will truncate the URL, cutting
  off valuable information

43
The enctype Attribute

• The enctype attribute determines how the form
  data should be encoded as it is sent to the
  server.
• The default enctype value is application/x-www-fo
  rm-urlencoded.
• The most basic way of encoding data is to use
  text/plain, which encodes the data as simple
  text.

44
Using the mailto Action

• Use the mailto action to send form information
  via e-mail without using a server-based program.
  The syntax isltform actionmailtoe-mail_addres
  s methodpost enctypetext/plaingt
• e-mail_address is the e-mail address of the
  recipient of the form

45
Mail Message Created Using the mailto Action
This figure shows an e-mail message that the
mailto action generated for a registration
form.
46
Specifying the Tab Order

• The Tab key moves the cursor from one field to
  another in the order that the field tags are
  entered.
• Add the tabindex attribute to any control element
  in the form to specify the tab order.
• The cursor moves through the fields from the
  lowest index number to the highest. For example,
  to assign the tab index number 1 to the fname
  field, enter the codeltinput namefname
  tabindex1gt

47
Specifying an Access Key

• An access key is a single key that you type in
  conjunction with the Alt key for Windows users to
  jump to one of the control elements in the form.
• Add the accesskey attribute to any of the control
  elements to create an access key.
• ltinput namelname accesskey1gt
• if a user types Altl (or Command1 for Macintosh
  users), the control element for the lname field
  is selected