INTRODUCTORY Tutorial 8 Creating Forms. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create an HTML form Create fields for text Create

INTRODUCTORY

Tutorial 8

Creating Forms

XP

New Perspectives on Blended HTML, XHTML, and CSS 2

Objectives• Create an HTML form• Create fields for text• Create text boxes• Choose an appropriate form control• Create radio buttons, check boxes, and list boxes

XPObjectives• Create menus in a group• Create methods for sending data and clearing

forms• Create command buttons• Organize Windows controls


XPCreating an HTML Form• Similar to a paper-based form, an HTML form is

used to gather data from a user• To create a form, enter the following code:<form method="methodtype" action="scripturl"</form>

where methodtype is either get or post, and scripturl is the location on the file server where the script will be run when the form is submitted


XPUsing Windows Controls• An HTML form contains a number of Windows

controls—text areas, radio buttons, check boxes, drop-down list items, and command buttons

• The action attribute and its value identify the location on the server and the name of the script that will run when the user clicks the Submit button in the form

• The method attribute and its value follow the action attribute and its value


XPCreating Input Fields


XPCreating Input Fields


XPCreating Text Boxes• To create a text box, use the following code:<input type="text_type" id="label" value="initialvalue"

size="sizewidth" maxlength="maxwidth" />

where text_type is either text or password, label is the text that identifies the input data, initialvalue is the default data that will be shown in the field, sizewidth is the width of the box in pixels, and maxwidth is the maximum number of characters that can be typed in the field


XPCreating Text Boxes


XPCreating Text Boxes


XPCreating Radio Buttons• To create radio buttons, enter the following code:<input type="radio" name="button_name"

value="data" />display_text

where radio is the value for the type attribute, button_name identifies the button selected, data is the data that will be sent to the server if the button is selected, and display_text is the text that will appear to the right of the radio button.

• Optionally, the attribute and value of checked="checked" may be used to identify a single default choice


XPCreating Radio Buttons


XPCreating Check Boxes• To create check boxes, enter the following code:<input type="checkbox" id="box_name"

value="data" />display_text

where checkbox is the value for the type attribute, box_name identifies the box being selected, data is the data that will be sent to the server if the check box is selected, and display_text is the text that will appear to the right of the check box.

• Optionally, the attribute and value of checked="checked" may be used to identify a default choice


XPCreating Check Boxes


XPCreating Drop-Down List Boxes• To create a drop-down list box, enter the following code:<select id="label" size="number"><optionA>...

</optionZ></select>

where label identifies the data that will be sent to the server, number is the number of items to display (a value of 1 creates a drop-down list box), optionA is the first option in the list, and optionZ is the last option in the list

• Optionally, use multiple="multiple" to allow more than one item in the list to be chosen

• Optionally, use selected="selected" to make an item the default choice


XPCreating Drop-Down List Boxes


XPCreating Option Groups• To create an option group, enter the following

code:<optgroup label="heading"> options . . . </optgroup>

where heading is the name of the heading for the option group, and options are the options in the option list


XPCreating Option Groups


XPCreating Option Groups


XPCreating a Text Area• To create text areas, enter the following code:<textarea id="label" rows="height" cols="width"></textarea>

where label is the text that identifies the input data to the server, height is the number of rows expressed as a number, and width is the character width of the text area expressed as a number


XPCreating a Text Area


XPCreating a Button• To create a button, enter the following code:<button type="buttontype">buttontext</button>

where buttontype is either submit or reset, and buttontext is the text that will be displayed on the button

• Optionally, you may include an image with alternate text, the vertical-align property, and the width and height properties

• If you are using an image with text, you may have the image appear to the left or the right of the button text

• You can also use a background image for the button


XPCreating a Button


XPSetting the Style for the Button Element


XPOrganizing Form Elements• To organize form elements using the fieldset and

legend tags, enter the following code:<fieldset><legend>legendtext</legend>form_elements

</fieldset>

where legendtext is the text for the legend and form_elements are the controls you want in the fieldset


XPOrganizing Form Elements


XPThe label Tags


XPForm Elements


XPForm Attributes


Documents

INTRODUCTORY Tutorial 8 Creating Forms. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create an HTML form Create fields for text Create