1. XP 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6

2. XP 2 Introducing Web Forms Information flows from server to browser - not a one-way street - information can be collected by browsers and sent to server for processing - e-business, e-commerce Information flows from server to browser - not a one-way street - information can be collected by browsers and sent to server for processing - e-business, e-commerce HTML form - enables browsers to collect information from users - send data to a designated server - invokes specified programming - CGI program - process the data and provide a response to user HTML form - enables browsers to collect information from users - send data to a designated server - invokes specified programming - CGI program - process the data and provide a response to user

3. XP 3 Introducing Web Forms Form basics - essential parts Form basics - essential parts Instruction to user of what information is sought and how to fill out form Instruction to user of what information is sought and how to fill out form Blanks - input collection elements Blanks - input collection elements Labels to clearly indicate the exact information needed Labels to clearly indicate the exact information needed Button - submit completed form information Button - submit completed form information HTTP query method to send form data to server HTTP query method to send form data to server URL of server-side program to receive and process the collected form data URL of server-side program to receive and process the collected form data

4. XP 4 Introducing Web Forms Web forms collect information from customers Web forms collect information from customers Web forms include different control elements, fields, field values Web forms include different control elements, fields, field values including: including: Input boxes Input boxes Selection lists Selection lists Drop-down lists boxes Drop-down lists boxes Option buttons or radio buttons Option buttons or radio buttons Check boxes Check boxes Group boxes Group boxes Text areas Text areas Form buttons Form buttons

5. XP 5 Forms and Server-Based Programs While HTML supports the creation of forms, it does not include tools to process the information 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 The information can be processed through a program running on a Web server

6. XP 6 Forms and Server-Based Programs Server-based programs are written in many languages 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 The earliest and most commonly used are Common Gateway Interface (CGI) scripts that are written in perl Other popular languages include: Other popular languages include: AppleScript- PHP AppleScript- PHP ASP- TCL ASP- TCL ColdFusion- the Unix shell ColdFusion- the Unix shell C/C++- Visual Basic C/C++- Visual Basic

7. XP 7 Creating the Form Element Forms are created using the form element, structured as follows: elements Where attributes are the attributes that control how the form is processed and elements are elements places within the form.

8. XP 8 Creating the Form Element Form attributes usually tell the browser the location of the server-based program to be applied to the form’s data Always specify an id or name for the form Two attributes are available to identify the form: id and name - for maximum compatibility, the form element should include both attributes

9. XP 9 Creating the Form Element The syntax of the id and name attributes are as follows: … Where name is the name of the form and id is the id of the form.

10. XP 10 Creating Input Boxes The general syntax of input elements is as follows: The general syntax of input elements is as follows: Where type specifies the type of input field, and the name and id attributes provide the field’s name and id.

11. XP 11 Creating an input box To create an input box, use the following HTML code: To create an input box, use the following HTML code: <input name=“name” id=“id” value=“value” size=“value” maxlength=“value’ /> Where the name and id attributes identify the field, the value attribute assigns the field’s default value, the size attribute defines the width of the input box in characters, and the maxlength attribute specifies the maximum number of characters that a user can enter into the field.

12. XP 12 Creating Input Boxes Input types: Input types:type=“button” Displays a button that can be clicked to perform an action from a script type=“checkbox Displays a check box type=“file” Displays a browse button to locate and select a file type=“hidden” Creates a hidden field, not viewable on the form

13. XP 13 Creating Input Boxes Input types: Input types:type=“image” Displays an input image that can be clicked to perform an action from a script type=“password” Displays an input box that hides text entered by the use type=“radio” Displays an option button

14. XP 14 Creating Input Boxes Input types: Input types:type-”reset” Displays a button that resets the form when clicked type=“submit” Displays a button that submits the form when clicked type=“text” Displays an input box that displays text entered by the user

15. XP 15 Setting the Size of an Input Box By default, an input box displays at 20 characters of text By default, an input box displays at 20 characters of text To change the width of an input box, use the size attribute which is displayed as follows: To change the width of an input box, use the size attribute which is displayed as follows: Where value is the size of the input box in characters. Maximum length - limit number of characters - reduce chance of errors in input Maximum length - limit number of characters - reduce chance of errors in input Default value for field - save time and increase accuracy Default value for field - save time and increase accuracy

16. XP 16 Setting the Size of an Input Box

17. XP 17 Creating a Password Field A password field is an input box where characters typed by the user are displayed as bullets or asterisks to protect private or sensitive information on a Web site A password field is an input box where characters typed by the user are displayed as bullets or asterisks to protect private or sensitive information on a Web site The syntax for creating a Password field is as follows: The syntax for creating a Password field is as follows:

18. XP 18 Working with Form Labels You can also expressly link a label with an associated text element for scripting purposes 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: The syntax for creating a form label is as follows: label text label text Where id is the value of the id attribute for a field on the form, and label text is the text of the label.

19. XP 19 Creating a Selection List A selection list is a list box from which a user selects a particular value or set of values A selection list is a list box from which a user selects a particular value or set of values Selection lists are useful when there are a fixed set of possible responses from the user Selection lists are useful when there are a fixed set of possible responses from the user You can create a selection list using the tag You can create a selection list using the tag You can specify each individual selection item using the tag You can specify each individual selection item using the tag

20. XP 20 Modifying the Appearance of a Selection List You can change the number of options displayed in the selection list by modifying the size attribute. The syntax is as follows: You can change the number of options displayed in the selection list by modifying the size attribute. The syntax is as follows: … … Where value is the number of items that the selection list displays in the form.

21. XP 21 Modifying the Appearance of a Selection List

22. XP 22 Making Multiple Selections Add the multiple attribute to the select element to create multiple selections Add the multiple attribute to the select element to create multiple selections … … Working with option values Working with option values Selected or highlighted item when initially displayed Selected or highlighted item when initially displayed

23. XP 23 Working with Option Groups Use option groups to organize selection lists into distinct groups. Use option groups to organize selection lists into distinct groups. itema1 itema1 itema2 itema2 … itema1 itema1 itema2 itema2 …</optgroup>…</select>

24. XP 24 Creating Option buttons Option buttons, or radio buttons allow users to make selections. 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. Unlike selection lists, option buttons only allow the user to select one option at a time. All option buttons belonging to the same field share a common name Labels are matched to the id values of the option buttons

25. XP 25 Creating a Field Set HTML and XHML allow you to organize option buttons into a group of fields called field sets HTML and XHML allow you to organize option buttons into a group of fields called field sets Most browsers place a group box around a field set to indicate that the fields belong to a common group Most browsers place a group box around a field set to indicate that the fields belong to a common group<fieldset>fields</fieldset> Where fields are the individual fields within a set.

26. XP 26 Creating a Field Set To create a field set, enclose the fields in the following tags: To create a field set, enclose the fields in the following tags: fields fields</fieldset> Where fields are the form fields in the field set. Field sets are usually displayed in a group box

27. XP 27 Creating a Field Set To add a caption to a field set, add the following tag after the opening tag: To add a caption to a field set, add the following tag after the opening tag: text text Where text is the text of the field set caption.

28. XP 28 Creating Check Boxes To create a check box, use: To create a check box, use: 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: To specify that a check box be selected by default, use the checked attribute as follows: or or

29. XP 29 Creating a Text Area Box Text area boxes allow users to enter comments about the products they’ve purchased Text area boxes allow users to enter comments about the products they’ve purchased An input box would be too small to accommodate the length of text for this use An input box would be too small to accommodate the length of text for this use

30. XP 30 Creating a Text Area Box To create a text area box, use the textarea element: To create a text area box, use the textarea element: default text </textarea> 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

31. XP 31 Creating a Text Area Box

32. XP 32 Wrap values Wrap=“off” - displayed on single line Wrap=“off” - displayed on single line Wrap=“soft” - wraps automatically to next row - CGI sent as single line Wrap=“soft” - wraps automatically to next row - CGI sent as single line Wrap=“hard” - wraps automatically to next row - CGI sent with line-wrapping information Wrap=“hard” - wraps automatically to next row - CGI sent with line-wrapping information

33. XP 33 Working with Form Buttons Buttons are a type of control element that performs an action Buttons are a type of control element that performs an action Types of buttons: Types of buttons: Command button Command button Submit button Submit button Reset button Reset button File button File button

34. XP 34 Creating a Command button Command buttons are created using the tag: Command buttons are created using the tag: Submit buttons submit forms to the server for processing when clicked. Syntax is as follows: Submit buttons submit forms to the server for processing when clicked. Syntax is as follows: Reset buttons reset forms to their original (default) values. Syntax is as follows: Reset buttons reset forms to their original (default) values. Syntax is as follows: Creating submit and reset buttons Creating submit and reset buttons Submit - submits form to server for processing Submit - submits form to server for processing Reset - reset a form to original (default) values Reset - reset a form to original (default) values

35. XP 35 Completed Registration Form

36. XP 36 Designing a Command button Use the button element for greater artistic control over the appearance of a button Use the button element for greater artistic control over the appearance of a button content</button> 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 button’s id, the type attribute specifies the button type, and the content is page content displayed within the button.

37. XP 37 Creating a File button File buttons are used to select files so that their contents can be submitted for processing to a program. File buttons are used to select files so that their contents can be submitted for processing to a program. The Web page then only displays the file’s location, not the file’s contents. The Web page then only displays the file’s location, not the file’s contents.

38. XP 38 Working with Image & Hidden Fields Image fields are used to submit a form when clicked on - coordinates where user clicked Image fields are used to submit a form when clicked on - coordinates where user clicked Hidden fields are added to a form, but not displayed in the Web page. The syntax is as follows: Hidden fields are added to a form, but not displayed in the Web page. The syntax is as follows: <input type=“hidden” name=“name” id=“id” value=“value” />

39. XP 39 Working with Form Attributes After adding the elements to your form, you’ll need to specify where to send the form data and how to send it. Use the following attributes: After adding the elements to your form, you’ll need to specify where to send the form data and how to send it. Use the following attributes: … … 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 form’s field.

40. XP 40 Working with Form Attributes The method attribute can have one of two values: The method attribute can have one of two values: Post Post Get Get The get method is the default; get appends the form data to the end of the URL specified in the action attribute 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” The post method sends form data in a separate data stream, allowing the Web server to receive the data through “standard input”

41. XP 41 Using the mailto Action The mailto action accesses the user’s own e- mail program and uses it to mail form information to a specified e-mail address The mailto action accesses the user’s 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 By-passes the need for server-based programs The syntax is as follows: The syntax is as follows: <form action-mailto:e-mail_address method=“post” mailto:e-mail_addressmailto:e-mail_address enctype=“text/plain”> … enctype=“text/plain”> … Where e-mail_address is the e-mail address of the recipient in the form

42. XP 42 Specifying the Tab Order Users typically navigate through a form with the tab key 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 You can specify an alternate tab order by adding the tabindex attribute to any control element in your form The syntax is as follows: The syntax is as follows: This syntax assigns the tab index number “1” to the fname field from the registration form

43. XP 43 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 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 Create an access key by adding the accesskey attribute to any control element Example of creating an access key for the lname field: Example of creating an access key for the lname field:

44. XP 44 Tips for Creating Effective Forms Label all control elements clearly and concisely Label all control elements clearly and concisely Use horizontal lines, tables, and line breaks to separate topical groups from one another 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 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 Use the tab order to ensure that users will move correctly from one field to another

45. XP 45 Tips for Creating Effective Forms Use option buttons, check boxes, and selection lists whenever possible to limit a user’s 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 option buttons, check boxes, and selection lists whenever possible to limit a user’s 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. 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.

46. XP 46 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 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) 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 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

47. XP 47 Assign # 7 Case Problem#1, pg. 337-339 - print HTML code - subscrib.htm; Case Problem #2, pg. 340-343, print HTML code - order.htm (due 2/27)