Transcript Tutorial 6: Creating a Web form

TUTORIAL 6:
CREATING A WEB
FORM
Session 6.1.
OBJECTIVES
Explore how Web forms interact with
Web servers
 Create a Web form
 Create a field set
 Create input boxes and field labels
 Defining default values and placeholders
 Applying a style sheet to a Web form

INTRODUCING WEB FORMS

Web forms collect information from Web site visitors.
 Can
you identify the following HTML
form controls?
FORMS and SERVER-BASED
PROGRAMS
FORMS AND SERVER-BASED
PROGRAMS
Server-based programs are written in many languages
 The earliest and most commonly used are Common
Gateway Interface (CGI) scripts that are written in Perl.
 Other popular languages?

-
CREATING A WEB FORM
Forms are created using the form
element, structured as follows:
<form id=“id” name=“name”
action=“url”
method=“methodtype”
enctype=“type”>… </form>

PRACTICE: CREATING A WEB FORM
1.
2.
Download pizza.zip from my Web site and use the files
in the zipped file to complete the following:
Go to order.htm and directly below the paragraph in
the section element, insert a form element with:
1. name: pizza
2. id: pizza
3. action: http://www.redballpizza.com/cgibin/buildpizza
4. method: post
CREATING A FIELD SET

HTML and XHTML allow you to organize
a form into a group of fields called field
sets.
<fieldset id=“id”>
controls
</fieldset>
where id identifies the field set and
controls are the control elements
associated with fields within the field set
CREATING A FIELD SET

To add a legend to a field set, add the
following tag after the opening <fieldset>
tag:
<legend>text</legend>
Where text is the text of the field set
caption.
PRACTICE: CREATING A FIELD
SET
1.
Create two field sets with the ids
custInfo and buildPizza, and with the
legend text Customer Information
and Build Your Own Pizza
respectively.
CREATING INPUT BOXES

The general syntax of input elements is as
follows:
<input type=“type” name=“name” id=“id” />
Where type specifies the type of input
control, and the name and id attributes
provide the control’s name and id.
CREATING INPUT BOXES
ADDING FIELD LABELS
You can also expressly link text with a
control element.
 The syntax for creating a form label is as
follows:

<label for=“id”>label
text</label>
Where id is the value of the id attribute
for a field’s control element, and label text
is the text of the label.
PRACTICE: INPUT BOXES AND
FIELD LABELS
1.
Within the custInfo field set, create a
label with the text Name* along with a
text input box for the custname field.
DEFINING DEFAULT VALUES AND
PLACEHOLDERS
To define the default value of a field, add the
attribute
value=”value”
to the control element, where value is the
default value assumed by a browser unless a
user enters a different value
 Starting with HTML5, you can also populate
your input boxes with placeholders. A
placeholder is a text string that appears
within the control element and provides
users with information about the kind of
information accepted by the field

DEFINING DEFAULT VALUES AND
PLACEHOLDERS
PRACTICE: DEFAULT VALUES
AND PLACEHOLDERS
1.
Add the placeholder text First and
Last Name for the custname text
input box.
APPLYING A STYLE SHEET TO A
WEB FORM

You can apply a style sheet to a Web
Form to format the Web Form.
PRACTICE: STYLE SHEET AND
WEB FORM
1.
Go to the pizza.css file and create the
following styles: display all field sets with
a background color value of (255, 246,
205) and with a solid 1-pixel border
with the color value (233, 69, 0). Float
the field sets on the left with a 1%
margin. Set the width of the custInfo
field set to 35%, the width of the
buildPizza field set to 60%.