XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 2 Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format an input box for simple text data Add a form label and link it to a control element

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 3 Objectives Set up a selection list for a predefined list of data values Create option buttons for a list of possible field values Organize fields into field sets Insert a text area box for multiple lines of text data

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 4 Objectives Generate form buttons to submit or reset a form Describe how data is sent from a Web form to a server Understand how to create image fields, hidden fields, and file buttons Apply tab indices and access keys to control elements

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 5 Introducing Web Forms Web forms collect information from customers 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 6 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 7 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: –AppleScript- PHP –ASP- TCL –ColdFusion- the Unix shell –C/C++- Visual Basic

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 8 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.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 9 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 10 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.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 11 Creating Input Boxes 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.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 12 Creating Input Boxes 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 13 Creating Input Boxes 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 14 Creating Input Boxes 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 15 Setting the Size of an Input Box 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: Where value is the size of the input box in characters.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 16 Setting the Size of an Input Box

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 The syntax for creating a Password field is as follows:

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 18 Creating an input box 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.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 19 Working with Form 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: 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.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 20 Creating a Selection List 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 You can create a selection list using the tag You can specify each individual selection item using the tag

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 21 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: … Where value is the number of items that the selection list displays in the form.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 22 Modifying the Appearance of a Selection List

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 23 Making Multiple Selections Add the multiple attribute to the select element to create multiple selections …

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 24 Working with Option Groups Use option groups to organize selection lists into distinct groups. itema1 itema2 … itema1 itema2 … …

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 25 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. All option buttons belonging to the same field share a common name Labels are matched to the id values of the option buttons

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 26 Creating a Field Set 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 fields Where fields are the individual fields within a set.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 27 Creating a Field Set To create a field set, enclose the fields in the following tags: fields Where fields are the form fields in the field set. Field sets are usually displayed in a group box

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 28 Creating a Field Set To add a caption to a field set, add the following tag after the opening tag: text Where text is the text of the field set caption.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 29 Creating Check Boxes 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: or

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 30 Creating a Text Area Box 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 31 Creating a Text Area Box To create a text area box, use the textarea element: default text 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 32 Creating a Text Area Box

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 33 Wrap values Wrap=“off” Wrap=“soft” Wrap=“hard”

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 34 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 35 Creating a Command button Command buttons are created using the tag: 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:

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 36 Completed Registration Form

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 37 Designing a Command button Use the button element for greater artistic control over the appearance of a button content 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.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 38 Creating a File button 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.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 39 Working with Hidden Fields 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” />

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 40 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: … 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.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 41 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”

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 42 Using the mailto Action The mailto action accesses the user’s own program and uses it to mail form information to a specified address –By-passes the need for server-based programs The syntax is as follows: <form action-mailto: _address method=“post”mailto: _address enctype=“text/plain”> … Where _address is the address of the recipient in the form

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 43 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: This syntax assigns the tab index number “1” to the fname field from the registration form

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 44 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:

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 45 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

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 46 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 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.

XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 47 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