INTRODUCTORY Tutorial 8 Creating Forms

XP New Perspectives on Blended HTML, XHTML, and CSS2 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

XP Objectives Create menus in a group Create methods for sending data and clearing forms Create command buttons Organize Windows controls New Perspectives on Blended HTML, XHTML, and CSS3

XP Creating 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: 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 New Perspectives on Blended HTML, XHTML, and CSS4

XP Using 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 New Perspectives on Blended HTML, XHTML, and CSS5

XP Creating Input Fields New Perspectives on Blended HTML, XHTML, and CSS6

XP Creating Input Fields New Perspectives on Blended HTML, XHTML, and CSS7

XP Creating 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 New Perspectives on Blended HTML, XHTML, and CSS8

XP Creating Text Boxes New Perspectives on Blended HTML, XHTML, and CSS9

XP Creating Text Boxes New Perspectives on Blended HTML, XHTML, and CSS10

XP Creating 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 New Perspectives on Blended HTML, XHTML, and CSS11

XP Creating Radio Buttons New Perspectives on Blended HTML, XHTML, and CSS12

XP Creating 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 New Perspectives on Blended HTML, XHTML, and CSS13

XP Creating Check Boxes New Perspectives on Blended HTML, XHTML, and CSS14

XP Creating Drop-Down List Boxes To create a drop-down list box, enter the following code:... 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 New Perspectives on Blended HTML, XHTML, and CSS15

XP Creating Drop-Down List Boxes New Perspectives on Blended HTML, XHTML, and CSS16

XP Creating Option Groups To create an option group, enter the following code: options... where heading is the name of the heading for the option group, and options are the options in the option list New Perspectives on Blended HTML, XHTML, and CSS17

XP Creating Option Groups New Perspectives on Blended HTML, XHTML, and CSS18

XP Creating Option Groups New Perspectives on Blended HTML, XHTML, and CSS19

XP Creating a Text Area To create text areas, enter the following code: 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 New Perspectives on Blended HTML, XHTML, and CSS20

XP Creating a Text Area New Perspectives on Blended HTML, XHTML, and CSS21

XP Creating a Button To create a button, enter the following code: buttontext 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 New Perspectives on Blended HTML, XHTML, and CSS22

XP Creating a Button New Perspectives on Blended HTML, XHTML, and CSS23

XP Setting the Style for the Button Element New Perspectives on Blended HTML, XHTML, and CSS24

XP Organizing Form Elements To organize form elements using the fieldset and legend tags, enter the following code: legendtext form_elements where legendtext is the text for the legend and form_elements are the controls you want in the fieldset New Perspectives on Blended HTML, XHTML, and CSS25

XP Organizing Form Elements New Perspectives on Blended HTML, XHTML, and CSS26

XP The label Tags New Perspectives on Blended HTML, XHTML, and CSS27

XP Form Elements New Perspectives on Blended HTML, XHTML, and CSS28

XP Form Attributes New Perspectives on Blended HTML, XHTML, and CSS29