Upload
russell-black
View
221
Download
4
Embed Size (px)
Citation preview
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
New Perspectives on Blended HTML, XHTML, and CSS 3
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
New Perspectives on Blended HTML, XHTML, and CSS 4
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
New Perspectives on Blended HTML, XHTML, and CSS 5
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
New Perspectives on Blended HTML, XHTML, and CSS 8
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
New Perspectives on Blended HTML, XHTML, and CSS 11
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
New Perspectives on Blended HTML, XHTML, and CSS 13
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
New Perspectives on Blended HTML, XHTML, and CSS 15
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
New Perspectives on Blended HTML, XHTML, and CSS 17
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
New Perspectives on Blended HTML, XHTML, and CSS 20
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
New Perspectives on Blended HTML, XHTML, and CSS 22
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
New Perspectives on Blended HTML, XHTML, and CSS 25