Tutorial 9
Creating Forms
INTRODUCTORY
Objectives
•
•
•
•
XP
Create an HTML form
Create fields for text
Create text boxes
Organize form controls
New Perspectives on Blended HTML, XHTML, and CSS
2
Objectives
XP
• Create radio buttons, check boxes, and list boxes
• Create menus in a group
• Create methods for sending data and clearing
form fields
• Create command buttons
New Perspectives on Blended HTML, XHTML, and CSS
3
How Data is Collected
and Processed
XP
• An HTML form is a collection of HTML elements
used to gather data that a user enters online
• The form handler runs on a Web server and
processes the form when the user clicks the
Submit button
• The form handler runs a script
– Written in a scripting language
• Data might be stored in a database
New Perspectives on Blended HTML, XHTML, and CSS
4
Creating the Form
XP
• To create a form, enter the following code:
<form id="idvalue"
method="methodtype"
action="script_url"></form>
where idvalue is the name of the form,
methodtype is either get or post, and
script_url 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
5
Creating the Form
XP
• 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
6
Determining the Type of Input
XP
• The user enters data into each field in the form
based on prompting text
• The label element is used to display prompting
text on the screen
– for attribute
– Label text
• The input element is used to determine the type
of data your control will collect
– type attribute
New Perspectives on Blended HTML, XHTML, and CSS
7
Creating Text Boxes
XP
• To create a text box, use the following code:
<input type="texttype" id=“id"
value="initialvalue"
size="sizevalue" maxlength="maxvalue"
/>
where texttype is either text or password,
initialvalue is the default data that appears in the
field, sizevalue is the width of the box in
characters, and maxvalue is the maximum
number of characters that a user can type in the
field
New Perspectives on Blended HTML, XHTML, and CSS
8
Organizing Form Controls
XP
• The fieldset element groups a series of related form
elements
– legend element
• To organize form elements using the fieldset and legend
tags, enter the following code:
<fieldset
id="description"><legend>legendtext</legend>
form_elements
</fieldset>
where description is a description of the fieldset content,
legendtext is the text for the legend, and form_elements are
the controls you want to group together
New Perspectives on Blended HTML, XHTML, and CSS
9
Creating Radio Buttons
XP
• To create radio buttons, enter the following code for each
one:
<input type="radio" name="name" id="id"
value="field_data" />
where radio is the value of the type attribute, name
identifies the corresponding field in the database, id
associates the field with the “for” attribute in the label
element, and field_data is the data that will be sent to the
appropriate field in the database if the button is selected
• To specify that a radio button is checked by default, add the
attribute and value of checked="checked" to the input
tag code
New Perspectives on Blended HTML, XHTML, and CSS
10
Creating Radio Buttons
New Perspectives on Blended HTML, XHTML, and CSS
XP
11
Creating Check Boxes
XP
• To create check boxes, enter the following code:
<input type="checkbox" name=“name”
id=“id” value="data" />
where checkbox is the value for the type attribute,
name identifies the check box field with a field in the
database, id associates the field with the “for” attribute
in the label element, and data is the data that will be
sent to the database if the check box is selected
• To specify that a check box is checked by default, add
the attribute and value of checked="checked" to
the input tag code
New Perspectives on Blended HTML, XHTML, and CSS
12
Creating Check Boxes
New Perspectives on Blended HTML, XHTML, and CSS
XP
13
Creating Check Boxes
New Perspectives on Blended HTML, XHTML, and CSS
XP
14
Creating a Selection List
XP
• To create a selection list, enter the following code:
<select name="name" id="name">
<option value="value1">optiontext</option>
<option value="value2">optiontext2</option>
</select>
where name identifies a field in the database, id
identifies the value for the “for” attribute in the
label element, and value1 and value2 are choices in
the option list
New Perspectives on Blended HTML, XHTML, and CSS
15
Creating a Selection List
XP
• To allow more than one item in the list to appear in
the browser, use size="number“, where number
is the number of items you want to display in the
selection list. The default size value of 1 creates a
drop-down list in which only one choice is visible
• To allow the user to select more than one choice,
use multiple="multiple" in the select tag
code.
• To make an option the default choice, use
selected="selected" in the option tag code.
New Perspectives on Blended HTML, XHTML, and CSS
16
Creating a Selection List
XP
• 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
Creating a Selection List
New Perspectives on Blended HTML, XHTML, and CSS
XP
18
Creating a Selection List
New Perspectives on Blended HTML, XHTML, and CSS
XP
19
Creating a Selection List
New Perspectives on Blended HTML, XHTML, and CSS
XP
20
Creating a Text Area
XP
• To create a text area, enter the following code:
<textarea name="name" id="id“
rows="height_value”
cols="width_value"></textarea>
where name identifies the field in the database
associated with the text area, id associates this
field with the “for” attribute value in the label
element, height_value is the number of rows,
and width_value is the character width of the
text area expressed as a number
New Perspectives on Blended HTML, XHTML, and CSS
21
Creating a Text Area
New Perspectives on Blended HTML, XHTML, and CSS
XP
22
Submitting Data
XP
• 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 appears on the button
• Optionally, you can include an image with alternate
text, assign a value to the vertical-align property, and
assign values to the width and height properties
• If you are using an image with text, you can make 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
23
Submitting Data
New Perspectives on Blended HTML, XHTML, and CSS
XP
24