Forms

1
Forms

• Describe common uses of forms on web pages
• Describe the elements used in forms
• Create forms on web pages using the ltformgt,
  ltinputgt, lttextareagt, and ltselectgt tags
• Create forms that provide additional
  accessibility features using the accesskey and
  tabindex attributes
• Associate form elements and element groups using
  the ltlabelgt, ltfieldsetgt, and ltlegendgt tags
• Create custom image buttons and use the ltbuttongt
  tag to include more variety and richer content
  than the standard form button
• Describe the features of CGI
• Invoke server-side processing to handle form data
• Find free CGI resources on the Web

2
Overviewof Forms

• Forms are used all over the Web to
• Accept information
• Provide interactivity
• Types of forms
• Search form, Order form, Newsletter sign-up form,
  Survey form. Etc.
• A form is an XHTML element that is used to
  contain and organize other objects such as text
  boxes, check boxes, and buttons that can accept
  information from web site visitors.

3
Two Componentsof Using Forms

• 1. The XHTML form itself, which is the web page
  user interface
• and
• 2.The server-side processing, called CGI for
  Common Gateway Interface, which works with the
  form data and sends email, writes to a text file,
  updates a database, or performs some other type
  of processing on the server.

4
XHTMLUsing Forms

• ltformgt tag
• Used to contain the form elements on a web page
• Container tag
• ltinputgt tag
• Used to configure a number of form elements
  including text boxes, radio buttons, check boxes,
  and buttons
• Stand alone tag
• lttextareagt tag
• Used to configure a scrolling text box
• Container tag
• ltselectgt tag
• Used to configure a select box (drop down list)
• Container tag
• ltoptiongt tag
• Used to configure an option in the select box
• Container tag

5
Sample FormXHTML

• ltformgt
• Email ltinput type"text" name"CustomerEmail"
  /gtltbr /gt
• ltinput type"submit" /gt
• lt/formgt

6
XHTML ltformgt tag

• The form tag attributes
• action
• Specifies the server-side program or script will
  process your form data
• id
• Identifies the form
• method
• get default value, form data passed in URL
• post more secure, form data passed in HTTP
  Entity Body
• name
• Identifies the form

7
XHTMLltinputgt tagText box

• Used to accept text information
• Attributes
• typetext
• name
• size
• maxlength
• value

8
XHTMLltinputgt tagPassword box

• Used to accept text information that needs to be
  hidden as it is entered
• Attributes
• typepassword
• name
• size
• maxlength
• value

9
XHTMLltinputgt tagCheck box

• Used to allow the user to select one or more of a
  group of predetermined items
• Attributes
• typecheckbox
• name
• checked
• value

10
XHTMLltinputgt tagRadio Button

• Used to allow the user to select exactly one from
  a group of predetermined items
• Each radio button in a group is given the same
  name and a unique value
• Attributes
• typeradio
• name
• checked
• value

11
XHTMLlttextareagt tagScrolling Text Box

• Used to configure a scrolling text box
• Attributes
• name
• cols
• rows
• value

12
XHTMLltselectgt tagSelect List

• Used (along with ltoptiongt tags) to configure a
  Select List .
• This form element is often referred to by several
  different names Select List, Select Box,
  Drop-Down List, Drop-Down Box, and Option Box.
• Used to allow the user to select one or more
  items from a list of predetermined choices.
• Attributes
• name
• size
• multiple

13
XHTMLltoptiongt tagOptions in a Select List

• Used to configure the options in a Select List
• Attributes
• value
• selected

14
XHTMLltinputgt tagSubmit Button

• Used to submit the form
• When clicked, it triggers the action method on
  the ltformgt tag and causes the browser to send the
  form data (the name and value pairs for each form
  element) to the web server.
• Attributes
• typesubmit
• name
• value

15
XHTMLltinputgt tagReset Button

• Used to reset the form fields to their initial
  values
• Attributes
• typereset
• name
• value

16
XHTMLltinputgt tag Button

• Used to offer a flexible user interface
• There is no default action when the button is
  clicked
• Usually a JavaScript function is invoked when a
  button is clicked
• Attributes
• typebutton
• name
• value

17
XHTMLltinputgt tag Hidden form element

• This form element is not displayed on the web
  page.
• Hidden form fields can be accessed by both
  client-side and server-side scripting and are
  sometimes used to contain information needed as
  the visitor moves from page to page.
• Attributes
• typehidden
• name
• value

18
XHTML Using a Table to Format a Form

• ltformgt
• lttable border"0" width"75"gt
• lttrgt
• lttd align"right" width"10"gtName lt/tdgt
• lttdgtltinput type"text" nameCustomerName"
  size"30" /gtlt/tdgt
• lt/trgt
• lttrgt
• lttd align"right" width"10"gtEmail lt/tdgt
• lttdgtltinput type"text" name"CustomerEmail"
  /gtlt/tdgt
• lt/trgt
• lttrgt
• lttd align"right" width"10"gtltinput
  type"submit" value"Submit"gtlt/tdgt
• lttdgtltinput type"reset"gtlt/tdgt
• lt/trgt
• lt/tablegt
• lt/formgt

19
Questions

• 1. You are designing a web site for a client who
  sells items in a retail store.
• They want to create a customer list for e-mail
  marketing purposes. Your client sells to
  consumers and needs a form that accepts their
  customers name and e-mail address.
• Would you recommend using two input boxes (one
  for the name and one for the e-mail) or three
  input boxes (for the first name, last name, and
  email address)?Explain your answer.

20
Questions

• 2. You are designing a survey form for a client.
  One of the questions has 10 possible responses.
  Only one response can be selected per question.
  What type of form element would you use to
  configure this question on the web page?
• 3. True or False. In a radio button group, the
  value attribute is used by the browser to process
  separate elements as a group.

21
XHTML Form Enhancementsltlabelgt tag

• The label tag
• ltlabelgtEmail ltinput type"text"
  name"CustomerEmail" /gtltlabelgt
• Or
• ltlabel for"email " gtEmail lt/labelgtltinput
  type"text" name"CustomerEmail" id " email " /gt
  
• Container tag
• Used to associate a text message with a form
  element

22
XHTML Form Enhancementsltfieldsetgt ltlegendgt tags

• The fieldset tag
• Container tag
• Used to create a visual group of form elements on
  a web page
• The legend tag
• Container tag
• Used to create a text label within the fieldset
• ltfieldsetgtltlegendgtCustomer Informationlt/legendgt
• Name ltinput type"text" nameCustomerName"
  size"30" /gtltbr /gt
• Email ltinput type"text" name"CustomerEmail" /gt
  lt/fieldsetgt

23
XHTML Form Enhancementstabindex attribute

• Attribute that can be used on form elements and
  anchor tags
• Not supported by all browsers
• Used to modify the default tab order
• Assign a numeric value
• ltinput type"text" name"CustomerEmail"
  tabindex1 /gt

24
XHTML Form Enhancementsaccesskey attribute

• Attribute that can be used on form elements and
  anchor tags
• Not supported by all browsers
• Used to create a hot-key combination to place
  the focus on the component
• Assign a value of a keyboard letter
• On Windows use the CTRL and the hot-key to
  move the cursor
• ltinput type"text" name"CustomerEmail"
  accesskey"E" /gt

25
XHTML Form Enhancementsltinputgt tag Image Button

• Used to submit the form
• When clicked, it triggers the action method on
  the ltformgt tag and causes the browser to send the
  form data (the name and value pairs for each form
  element) to the web server.
• Attributes
• typeimage
• name
• src

26
XHTML Form Enhancementsltbuttongt tag

• The button tag
• A container tag
• When clicked, its function depends on the value
  of the type attribute.
• Can contain a combination of text, images, and
  media
• Attributes
• typesubmit, typereset, typebutton
• name
• value

27
Questions

• Describe the purpose of the fieldset and legend
  tags.
• Describe the purpose of the accesskey attribute
  and how it supports accessibility.
• When designing a form, should you use the
  standard submit button, an image button or a
  button tag? Are these different in the way that
  they provide for accessibility? Explain your
  answer.

28
Server-SideProcessing

• Your web browser requests web pages and their
  related files from a web server.
• The web server locates the files and sends them
  to your web browser.
• The web browser then renders the returned files
  and displays the requested web pages for you to
  use.

29
CGICommon Gateway Interface

• CGI is a protocol or standard method for a web
  server to pass a web page user's request (which
  is typically initiated through the use of a form)
  to an application program and accept information
  to send to the user.
• The web server typically passes the form
  information to a small application program that
  processes the data and usually sends back a
  confirmation web page or message.

30
Using CGI

• A web page invokes CGI by either an action method
  on a form or a hyperlink -- the URL of the
  server-side script or program is used. Any form
  data that exists is passed to the server-side CGI
  script.
• ltform methodpost actionorder.phpgt
• The server-side script completes its processing
  and may create a confirmation or response Web
  page with the requested information.
• The web server returns this page to the web
  browser.

31
Languages that support CGI

• Programs or scripts that work with CGI can be
  written in many languages
• PHP
• Perl
• C
• C
• Active Server Pages (ASP)
• Java Server Pages (JSP)
• ASP.NET
• Ruby on Rails
• And so on.

32
Steps in Utilizing CGI

• Web page invokes CGI by a form post, action,
  hyperlink, etc...
• Any form information is sent in the form of
  namevalue pairs to the web sever.
• 2. Script on web server is executed
• 3. Script accesses requested database, file, or
  process
• 4. Web server returns web page with requested
  information or confirmation of action

33
Common Uses of Server-Side Scripting CGI

• Search a database
• Place an order at an online store
• Send a web page to a friend
• Subscribe to a newsletter
• Any type of server-side file or e-mail processing
  is a candidate for CGI

34
Sources of FreeServer-Side Processing

• Many web host providers offer free scripts for
  their clients. Contact their support area or FAQ
  to learn more about their services.
• Some web sites that offer remotely hosted scripts
  (in return for displaying an ad).
• http//formbuddy.com
• http//hostedscripts.com
• http//response-o-matic.com
• http//master.com
• http//www.formmail.com
• Microsoft FrontPage has Server Extensions that
  provide form processing sending form data in
  emails, saving form data in files, and saving
  form data in databases.

35
Questions

• Describe CGI.
• Code the form tag for a web page form that will
  use the post method to invoke a server-side
  script located at http//webdevfoundations.net/scr
  ipts/subscribe.asp