Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 6: Creating XHTML Forms Kelly L. Valqui Essentials for Design XHTML

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Why Use Forms?  Purpose of a form – acquire information from the user and send it to the server  Many advantages:  Monitor users’ behavior on your sites  Interactions with users  E-commerce  Enable Internet searches

Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Visual Summary A typical form Single-line text fields Multi-line text area Submit input

Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Using the Tag   Tells browser where a form begins and ends  Attributes can indicate  Name of form  Destination of form data  How data is sent

Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Using the Tag   Specifies an input field of the form  Attributes can indicate  Name of input field  Type of input field (e.g. text, submit button, etc.)  Other items such as size, color, formats

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Code for Form Page Form Test Page Start of form End of form Text type input field

Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Effects of and (initial page) The text-type input field. User has typed text into the field

Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Effects of and (after user types text and hits Enter) Note that data entered by user was sent to the Web server, added to the URL address

Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Submitting Form Data  Form data – the information a user types into a form  Submitting – pressing the Enter key, or clicking a Submit button  Form Data is submitted as part of the URL address location  Data is submitted in name-value pairs  Name – the name of the input field's tag  Value – the value the user typed into the input field

Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 The Tag's action Attribute  Form action – the receiving page of the data sent by the browser  Action attribute – specifies the relative or absolute URL of the receiving page  Action attribute will usually pertain to a server-side script file (CGI, ASP, PHP)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Effect of Using the action Attribute Action attribute caused a different page to be called Data was sent to this page as a name-value pair Name = username Value = test user name (spaces represented with +)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Working with Text Input Fields  Text input field – a single-line option that allows users to enter alphanumeric text  Attributes controlling text input fields  type – if you indicate "text", this makes it a single- line text field  value – sets initial value displayed in the text field  size – specifies number of visible characters  maxlength – specifies the maximum number of characters that can be input into the field  Example syntax:

Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Effect of Input Tag Attributes Type = "text" Single line text field Size = "20" 20 visible characters Maxlength = "20" max 20 characters can be entered Value = "Enter Your Userid" initial value seen in text field

Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Using Password Fields  Setting the tag's type attribute  type = "password"  Effect –  data typed by the user cannot be observed on the screen  characters displayed as black dots  Limitations  this does not encrypt the data as it is sent over the Internet

Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Using Submit Buttons  Setting the tag's type attribute  type = "submit"  Effect –  Clicking the button sends data to the Web server  Particularly useful for forms with multiple input tags

Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Effect of Input Password and Submit

Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Radio Buttons  Radio button – input field with a round button for item selection  Radio group – a group of radio buttons  Only one radio button in a radio group can be selected  Attributes for radio button input tags  type = "radio"  name – specifies the radio group  checked – indicates that a button is selected

Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Radio Buttons Syntax  <input type="radio" name="name" value="val" checked="checked"> Text to Display Indicates radio type Value that will be submitted for the group if checked Selected item. Only one in a group Label displayed to the user for the radio button Name of the group

Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Effect of Radio Buttons Yes No Maybe

Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Checkboxes  Indicate something to which the user must agree  Similar to Radio Buttons  Difference from Radio Buttons – user can select more than one choice  Attributes  type="checkbox"  name – specifies the checkbox group  checked – indicates that a checkbox is selected

Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Effect of CheckBoxes Yes No Maybe

Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Creating an Order Form Check boxes, more than one can be checked at a time Radio buttons, only one in the group can be checked at a time

Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Working with Order Forms  A typical type of Web form is an Order Form  Order form – a form that allows users to buy items from a Web site, usually on a secure server  Secure server – a Web server that ensures encryption of data to prevent hacking  Order forms make use of many input types, including checkboxes and radio buttons

Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Tabbing Through a Form  Goal – control which input tag gets the focus when user presses the Tab key  Solution – use the tag's tabindex attribute  tabindex is assigned a number, which determines the tab order of the input tag  Example syntax: 

Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Select Boxes  Concepts  Pull-down menus, drop-down boxes, drag-down menus, or drop lists  Select and option elements  Single vs. multiple selections  Hands-on Exercise  Add a Select Box  Add a Multiple-Choice Select List

Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Select Boxes  Also known as pull-down menus, drop-down boxes, drag-down menus, or drop lists  Hybrids of radio buttons and checkboxes  Two tags:  – indicates the complete list of options to choose from  – indicates one of the choices (nested within )

Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Attributes of the and Tags  attributes  name – name of the element from which a value is chosen  size – how many options are visible at a time  multiple – whether more than one option can be chosen at a time  attributes  value – value of the option  selected – whether the option is chosen

Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Single-Selection Dropdown List Yes No Maybe

Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Multiple-Selection List Yes No Maybe

Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Working with the Tag  – a multiline text box  attributes  cols – indicates number of visible characters in a line  rows – indicates the number of lines of the text area that will be visible

Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Effect of The initial text for a textarea goes into the textarea element.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Purpose of Hidden Fields  Send information to Web server without displaying to user  Example uses:  Session number that identifies user  Information of pages user has visited  Information on page the user visited before coming to the form.  Additional information about product required for packaging.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Creating Hidden Fields  Example syntax:   Submitting form:  Hidden field is submitted with the page  Hidden field is in plain view in the URL  Not encrypted or secure

Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Submit and Reset Buttons  Submit buttons  Send form data to the Web server  Syntax:  Reset buttons  Clear the data in input fields of a form  Syntax:  Attributes  name – identifier of the button  value – text that appears in the label of the button

Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Button Tags

Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Form Script Options  Form submissions go to Web server scripts to be processed  Server script is identified in the form tag's action attribute  Common types of server-side scripts  Common Gateway Interface (CGI)  ColdFusion  Active Server Pages (ASP)