XHTML Introductory1 Forms Chapter 7

XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element

XHTML Introductory3 Objectives Create selection lists Create multiline text fields Learn how to submit form data via Create labels, access keys, and field sets

XHTML Introductory4 Many Web sites use forms to collect information from users and transmit it to a server for processing Typical forms you may encounter on the Web include order forms, surveys, and applications Figure 7-1 shows a form that people can use to register a new mailing address with the United States Postal Service Forms are usually set up so that the data collected is transmitted to either a server-side scripting language program on a Web server or to an address Forms

XHTML Introductory5 Forms A server-side scripting language program processes data that is transmitted from a form to a server Some of the more popular server-side scripting languages include Common Gateway Interface (CGI), Active Server Pages (ASP), and Java Server Pages (JSP) The programs you create with server-side scripting languages are called scripts

XHTML Introductory6 Forms

XHTML Introductory7 You use the following primary elements to create forms in XHTML: – Form Elements

XHTML Introductory8 The Element The element designates a form within a Web page and contains all the text and elements that make up a form The enctype attribute is important because a server-side scripting program will use its value to determine how to process the form data

XHTML Introductory9 The Element

XHTML Introductory10 Form Controls There are four primary elements used within the element to create form controls:,,, and The and elements are used to create input fields that users interact with The element displays choices in a drop- down menu or scrolling list known as a selection list

XHTML Introductory11 Form Controls The element is used to create a text field in which users can enter multiple lines of information Any form element into which a user can enter data, such as a text box, or that a user can select or change, such as a radio button, is called a field You are not required to include a value attribute or enter a value into a field before the form data is submitted

XHTML Introductory12 Input Fields The empty element is used to create input fields that create different types of interface elements to gather information

XHTML Introductory13 Text Boxes An element with a type of text ( ) creates a simple text box that accepts a single line of text You can include the name, value, maxlength, and size attributes with the element

XHTML Introductory14 Password Boxes An element with a type of password ( ) creates a password box that is used for entering passwords or other types of sensitive data Each character that a user types in a password box appears as an asterisk or bullet, depending on the operating system and Web browser, in order to hide it from anyone who may be looking over the user’s shoulder

XHTML Introductory15 Radio Buttons An element with a type of radio ( ) is used to create a group of radio buttons, or option buttons, from which you can select only one value To create a group of radio buttons, all radio buttons in the group must have the same name attribute Each radio button requires a value attribute

XHTML Introductory16 Radio Buttons

XHTML Introductory17 Check Boxes You use check boxes when you want users to select whether or not to include a certain item or to allow users to select multiple values from a list of items Include the Boolean checked attribute in a checkbox element to set the initial value of the check box to yes You can also include the name and value attributes with the checkbox element

XHTML Introductory18 Check Boxes Like radio buttons, you can group check boxes by giving each check box the same name value, although each check box can have a different value Unlike radio buttons, users can select as many check boxes in a group as they like

XHTML Introductory19 Check Boxes

XHTML Introductory20 Reset Buttons An element with a type of reset ( ) creates a reset button that clears all form entries and resets each form element to the initial value specified by its value attribute Although you can include the name attribute for a reset button, it is not required because reset buttons do not have values that are submitted to a Web server as part of the form data The text you assign to the reset button’s value attribute will appear as the button label

XHTML Introductory21 Push Buttons An element with a type of button ( ) creates a push button that is similar to the OK and Cancel buttons you see in dialog boxes Push buttons are also similar to submit and reset buttons However, push buttons do not submit form data to a Web server as submit buttons do, nor do they clear the data entered into form fields as reset buttons do

XHTML Introductory22 Push Buttons Push buttons execute JavaScript code that performs some type of function, such as a calculation You can use the name and value attributes with a push button element

XHTML Introductory23 Push Buttons

XHTML Introductory24 Submit Buttons An element with a type of submit ( ) creates a submit button that transmits a form’s data to a Web server The action attribute of the element that creates the form determines to what URL the form is submitted You can include the name and value attributes with the submit element, the same as with a push button element

XHTML Introductory25 Image Submit Buttons An element with a type of image ( ) creates an image submit button that displays a graphical image and transmits a form’s data to a Web server The image element performs the same function as the submit element You include the src attribute to specify the image to display on the button

XHTML Introductory26 Image Submit Buttons You can also include the name and value attributes with the image element, with the alt attribute to define alternate text for user agents that do not display images

XHTML Introductory27 File Boxes An element with a type of file ( ) creates a file box, which is a text box control along with a push button labeled with “Browse…” that you can use to upload a file to a Web server You can type either the drive, folder, or filename you want to upload directly into the textbox or search for the file on your computer by clicking the Browse button

XHTML Introductory28 Hidden Form Fields A special type of form element, called a hidden form field, allows you to hide information from users You create hidden form fields with the element A Web browser does not display hidden form fields

XHTML Introductory29 Hidden Form Fields Hidden form fields temporarily store data that needs to be sent to a server along with the rest of a form, but that a user does not need to see Examples of data stored in hidden fields include the result of a calculation or some other type of information that a program on the Web server might need

XHTML Introductory30 The Element You can use the element to create push buttons, submit buttons, and reset buttons

XHTML Introductory31 The Element You specify the type of button to create by assigning the appropriate value to the type attribute The buttons you create with the element are virtually identical to the buttons you create with the element The big difference, however, is that you create the element using an opening and closing tag pair, which allows more flexibility in the labels you can create for a button

XHTML Introductory32 Selection Lists The element creates a selection list that presents users with fixed lists of items from which to choose The items displayed in a selection list are created with elements Like other form controls, the element includes a name attribute that is submitted to a Web server However, the value portion of a element’s name=value pair will be the value assigned to an item that is created with the element

XHTML Introductory33 Menu Options You use elements to specify the items that appear in a selection list The content of an element appears as a menu item in a selection list You place elements as the contents of a element to specify the selection list’s menu options

XHTML Introductory34 Option Groups You use the element to create option groups that organize groups of option elements that appear in a selection list Option groups are not widely supported in older browsers, so be sure to use them only for Web pages that you are sure will only be opened in a current browser or higher The element includes two attributes: disabled and label

XHTML Introductory35 Selection List Organized by Option Groups

XHTML Introductory36 Multiline Text Fields The element is used to create a field in which users can enter multiple lines of information

XHTML Introductory37 Multiline Text Fields Fields created with elements are known as multiline text fields or text areas You can create the element either as an empty element or using the … tag pair The only items you include within a … tag pair are default text and characters you want to display in the text area when the form loads

XHTML Introductory38 ing Form Data To form data, you replace the Web server script’s URL in the element’s action attribute with mailto: _address You add the mailto protocol and any optional mailto properties to the URL, the same as when you added it to an anchor element

XHTML Introductory39 Labels, Access Keys, and Field Sets You learn how to make the controls on your form more accessible by using labels and access keys You also learn how to visually organize your controls with field sets

XHTML Introductory40 Labels In XHTML, you use the element to associate a label with a form control You can associate a particular element with only one form control The content of the element appears as the label for a control

XHTML Introductory41 Labels You can include other elements, such as the and elements, within the element to modify the appearance of the label You can use two attributes with the element: accesskey and for

XHTML Introductory42 Access Keys All of the form control elements, with the exception of the element, can include the accesskey attribute, which designates a key that visitors to your Web site can press to jump to a control, or select and deselect a control such as a check box You can assign to the accesskey attribute the keyboard character that you want to use as a control’s access key

XHTML Introductory43 Access Keys How you execute an access key depends on the platform on which the Web browser is running On Windows systems, you select an access key by holding down the Alt key and simultaneously pressing the access key On Macintosh systems, you select an access key by holding down the Control key and simultaneously pressing the access key

XHTML Introductory44 Field Sets You can use a field set to visually group related controls on a form A field set draws a box around a group of controls You create a field set by nesting a group of related controls within the element The first element in a must be a element, which provides a caption or description for the group of controls

XHTML Introductory45 Summary Forms are used to collect information from users and transmit that information to a server for processing The element designates a form within a Web page and contains all text and elements that make up a form The empty element is used to create different types of input fields that gather information

XHTML Introductory46 Summary An element with a type of text, password, radio, checkbox, reset, button, submit, image, file, or hidden creates a special type of form element based on the type You can use the element to create push buttons, submit buttons, and reset buttons The element creates a selection list that presents users with fixed lists of values from which to choose

XHTML Introductory47 Summary The element is used to create a multiline text field, or text area, in which users can enter multiple lines of information You use the element to associate a label with a form control The accesskey attribute designates a key that Web site visitors can press to jump to a control or to select and deselect a control such as a check box