Creating Web Page Forms

1
Creating Web Page Forms
2
Introducing Web Forms

• Web forms collect information from users
• 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

3
Form on a Web page
New Perspectives on HTML and XHTML, Comprehensive
3
4
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

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

6
Creating the Form Element

• Form attributes usually tell the browser the
  method and actions 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

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

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

9
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

10
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

11
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

12
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

13
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

14
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

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

16
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

17
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

18
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

19
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

20
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

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

22
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