XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study...

XHTML Introductory 1

Forms

Chapter 7


Objectives

In this chapter, you will:

• Study <form> elements

• Learn about input fields

• Use the <button> element


Objectives

• Create selection lists

• Create multiline text fields

• Learn how to submit form data via e-mail

• Create labels, access keys, and field sets


• 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 e-mail address

Forms


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


Forms


• You use the following primary elements to create forms in XHTML:

– <form>

– <input>

– <button>

– <select>

– <textarea>

– <label>

Form Elements


The <form> Element

• The <form> 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


The <form> Element


Form Controls

• There are four primary elements used within the <form> element to create form controls: <input>, <button>, <select>, and <textarea>

• The <input> and <button> elements are used to create input fields that users interact with

• The <select> element displays choices in a drop-down menu or scrolling list known as a selection list


Form Controls

• The <textarea> 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


Input Fields

• The empty <input> element is used to create input fields that create different types of interface elements to gather information


Text Boxes

• An <input> element with a type of text (<input type=“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 <input type=“text”> element


Password Boxes

• An <input> element with a type of password (<input type=“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


Radio Buttons

• An <input> element with a type of radio (<input type=“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


Radio Buttons


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 <input> element to set the initial value of the check box to yes

• You can also include the name and value attributes with the checkbox <input> element


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


Check Boxes


Reset Buttons

• An <input> element with a type of reset (<input type=“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


Push Buttons

• An <input> element with a type of button (<input type=“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


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 <input> element


Push Buttons


Submit Buttons

• An <input> element with a type of submit (<input type=“submit”>) creates a submit button that transmits a form’s data to a Web server

• The action attribute of the <form> element that creates the form determines to what URL the form is submitted

• You can include the name and value attributes with the submit <input> element, the same as with a push button <input> element


Image Submit Buttons

• An <input> element with a type of image (<input type=“image”>) creates an image submit button that displays a graphical image and transmits a form’s data to a Web server

• The image <input> element performs the same function as the submit <input> element

• You include the src attribute to specify the image to display on the button


Image Submit Buttons

• You can also include the name and value attributes with the image <input> element, with the alt attribute to define alternate text for user agents that do not display images


File Boxes

• An <input> element with a type of file (<input type=“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


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 <input> element

• A Web browser does not display hidden form fields


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


The <button> Element

• You can use the <button> element to create push buttons, submit buttons, and reset buttons


The <button> Element

• You specify the type of button to create by assigning the appropriate value to the type attribute

• The buttons you create with the <button> element are virtually identical to the buttons you create with the <input> element

• The big difference, however, is that you create the <button> element using an opening and closing tag pair, which allows more flexibility in the labels you can create for a button


Selection Lists• The <select> 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 <option> elements

• Like other form controls, the <select> element includes a name attribute that is submitted to a Web server

• However, the value portion of a <select> element’s name=value pair will be the value assigned to an item that is created with the <option> element


Menu Options

• You use <option> elements to specify the items that appear in a selection list

• The content of an <option> element appears as a menu item in a selection list

• You place <option> elements as the contents of a <select> element to specify the selection list’s menu options


Option Groups

• You use the <optgroup> 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 <optgroup> element includes two attributes: disabled and label


Selection List Organized by Option Groups


Multiline Text Fields

• The <textarea> element is used to create a field in

which users can enter multiple lines of information


Multiline Text Fields

• Fields created with <textarea> elements are known as multiline text fields or text areas

• You can create the <textarea> element either as an empty element or using the <textarea>…</textarea> tag pair

• The only items you include within a <textarea>…</textarea> tag pair are default text and characters you want to display in the text area when the form loads


E-Mailing Form Data

• To e-mail form data, you replace the Web server

script’s URL in the <form> element’s action

attribute with mailto:email_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


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


Labels

• In XHTML, you use the <label> element to associate a label with a form control

• You can associate a particular <label> element with only one form control

• The content of the <label> element appears as the label for a control


Labels

• You can include other elements, such as the <strong> and <em> elements, within the <label> element to modify the appearance of the label

• You can use two attributes with the <label> element: accesskey and for


Access Keys

• All of the form control elements, with the exception of the <select> 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


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


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 <fieldset> element

• The first element in a <fieldset> must be a <legend> element, which provides a caption or description for the group of controls


Summary

• Forms are used to collect information from users and transmit that information to a server for processing

• The <form> element designates a form within a Web page and contains all text and elements that make up a form

• The empty <input> element is used to create different types of input fields that gather information


Summary

• An <input> 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 <button> element to create push buttons, submit buttons, and reset buttons

• The <select> element creates a selection list that presents users with fixed lists of values from which to choose


Summary

• The <textarea> element is used to create a multiline text field, or text area, in which users can enter multiple lines of information

• You use the <label> 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

XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study...

Documents

Transcript of XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study...