Tutorial 6 Working with Web Forms

1
Tutorial 6Working with Web Forms
2
Objectives

• Explore how Web forms interact with Web servers
• Create form elements
• Create field sets and legends
• Create input boxes and form labels
• Creation option buttons
• Create selection lists
• Create check boxes

3
Objectives

• Create text area boxes
• Apply styles to Web forms
• Work with form buttons
• Explore image elements and hidden fields
• Work with form actions and methods

4
Introducing Web Forms

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

5
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.

6
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
• ASP
• ColdFusion
• C/C
• PHP
• VBScript

7
Creating a Web Form

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

8
Creating a Web Form

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

9
Creating a Web Form

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

10
Creating a Field Set

• HTML and XHTML allow you to organize option
  buttons into a group of fields called field sets.
  
• ltfieldset ididgt
• controls
• lt/fieldsetgt
• where id identifies the field set and controls
  are the control elements associated with fields
  within the field set

11
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.

12
Creating Input Boxes

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

13
Creating Input Boxes
14
Working with Field 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
  fields control element, and label text is the
  text of the label.

15
Setting the Width of an Input Box

• To change the width of an input box, use the
  width attribute, which is displayed as follows
• id width value
• Where id is the id of the control and value is
  the width you want to apply to the input box

16
Setting the Width of an Input Box
17
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.

18
Creating a Group of Option Buttons

• To create a group of option buttons associated
  with a single field, add the elements
• ltinput type"radio" name"name" id"id1"
  value"value1" /gt
• ltinput type"radio" name"name" id"id2"
  value"value2" /gt
• ltinput type"radio" name"name" id"id3"
  value"value3" /gt
• to the Web form, where name identifies the field
  associated with the collection of option buttons
  id1, id2, id3, etc. identify the specific
  options and value1, value2, value3, etc. are the
  field values associated with each option.
• To specify the default option, add the following
  attribute to the ltinputgt tag
• checked"checked"

19
Creating a Selection List

• A selection list is a list box from which a user
  selects a particular field value or set of field
  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 element.
• You can specify each individual selection item
  using the ltoptiongt element.

20
Setting the Selection List Size

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

21
Setting the Selection List Size
22
Making Multiple Selections

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

23
Working with Check Boxes

• To create a check box, use
• ltinput typecheckbox namename idid
  valuevalue /gt
• Where the name and id attributes identify the
  check box controls 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

24
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 idfirstName tabindex1
  /gt
• This syntax assigns the tab index number 1 to
  the fname field from the registration form.

25
Working with Text Area Control

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

26
Working with Text Area Control

• To create a text area box, use the textarea
  element
• lttextarea rows"value" cols"value"gt ...
  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.

27
Working with Text Area Control
28
Working with Text Area Control
29
Working with Form Buttons

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

30
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

31
Completed Form
32
Designing a Custom 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.

33
Creating File Buttons

• File buttons are used to select files so that
  their contents can be submitted for processing to
  a program.

34
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

35
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.

36
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.

37
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.
• Bypasses the need for server-based programs.
• The syntax is as follows
• ltform action-mailtoe-mail methodpost
• enctypetext/plaingt lt/formgt
• Where e-mail_address is the e-mail address of the
  recipient in the form.

38
Tips for Creating Effective Forms

• Mark fields that are required, but also limit the
  number of unrequired fields. Dont overwhelm your
  users with requests for information that is not
  really essential. Keep your forms short and to
  the point.
• If you need to collect a lot of information,
  break the form into manageable sections spread
  out over several pages. Allow users to easily
  move backward and forward through the forms
  without losing data.

39
Tips for Creating Effective Forms

• Provide detailed instructions about what users
  are expected to do. Dont assume that your form
  is self-explanatory.
• If you ask for personal data and financial
  information, provide clear assurances that the
  data will be secure. If possible, provide a link
  to a Web page describing your security practices.
• Clearly indicate what users will receive once the
  form is submitted, and provide feedback on the
  Web site and through e-mail that tells them when
  their data has been successfully submitted.