Download Creating Web Forms - Computer Science@IUPUI

Creating Web Forms
CSCI N241: Fundamentals of Web Design
Copyright ©2006  Department of Computer & Information Science
Goals
By the end of this unit, you should
understand …
• … how forms communicate with servers.
• … how to build forms using several form
fields.
• … the differences between POST and
GET form methods.
• … how to add style to a form.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Introducing Forms
• Until now, our development focused on
static web pages which enabled only
one-way communication.
• Web forms expand our toolkit to enable
two-way communication between the
server (and, thus, the owner of a web
site) and the web user.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
How Forms Work
B
Web
Application
A
C
A – AThe
B
C
web
user
server
application
completes
sends (built
ana
XHTML
form
using
and
PHP,
page
clicks
Perl,
tothe
the
C or
SUBMIT
browser
some
button.
other
as
a response,
language)
This action
which
processes
packages
the
the form displays
browser
data andtosends
data.
the user.
it
to the server
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Common Form Components
•
•
•
•
•
•
•
The <form> Element
Textboxes
Text Areas
Radio Buttons
Checkboxes
Drop Down Menus
Multiple Select
Menus
•
•
•
•
•
•
•
Password Fields
Hidden Fields
Fieldset & Legends
Labels
Submit Button
Reset Button
Buttons
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The <form> Element
• We nest all other form elements inside
the <form> element. It has the
following attributes:
– The id attribute identifies the form as a unique
entity.
– The action attribute points the browser to a web
application for processing the form.
– The method attribute tells the browser how to
send the form data (GET or POST).
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Textbox
• We use the textbox for small amounts
of information, like a name, address,
etc.
• To build a textbox, we use the <input>
element using the following attributes:
– We set the type attribute to text.
– We give each textbox a unique identity using the
name attribute.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Submit Button
• A submit button tells the browser
to give a web application the form
data for processing.
• The browser sends the data as a
package to the web application
indicated by the <form> element's
action attribute.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Submit Button (cont.)
• To create a submit button, we use
the <input> element with the
following attributes:
– We set the value of the type attribute to
submit.
– We also can add a value attribute to
configure our button's text.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Reset Button
• We can also add a reset button to give
our user's a convenient way to clear the
form's fields quickly. To create a reset,
we use the <input> element with the
following attributes:
– We set the value of the type attribute to reset.
– We also can add a value attribute to configure
our button's text.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Download & extract the file
n241CreatingForms_Examples.zip.
• Open the file form.html in your editor.
• Add the code you see on the next slide
to the <form> element.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Add this code …
<p>
Ship to:<br />
Name: <input type = "text" name = "name" /><br />
Address: <input type = "text" name = "address" /><br />
City: <input type = "text" name = "city" /><br />
State: <input type = "text" name = "state" /><br />
Zip: <input type = "text" name = "zip" />
</p>
<p>
<input type = "submit" value = "Order Now" />
&nbsp; &nbsp; &nbsp; &nbsp;
<input type = "reset" value = "Clear Form" />
</p>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
GET vs. POST
• The form has two options to tell the
browser how to send form data to the
server (using the method attribute) –
GET or POST.
• The GET value submits form data as
part of a URL. We use the GET value
when user's might want to bookmark
the page that is the result of a web
form.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
GET vs. POST
• The POST value doesn't display form data in
the URL; we use POST for processing orders
or forms with other sensitive material.
• Finally, we use POST for forms that include a
<textarea> element, since GET requests
limit input data to 256 characters.
• We can specify GET or POST using the
<form> element's method attribute.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Update the <form> element's
method attribute to GET.
• What happened when you submit
the form?
• Change the value back to POST.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Creating a Drop Down List
• We can create a drop down list using
the select and option elements. The
select element creates a menu and the
option elements create menu choices.
• We use the name attribute to give the
select element a unique identifier.
<select name = "myMenu"> … </select>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Creating Menu Values
• We can create menu values using the
<option> element.
• It uses the value attribute to identify
the data that the form will send to the
server on its behalf:
<option value = "navyBlue">
Navy Blue
</option>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Build a drop down menu at the top of your form,
above the Ship To: paragraph:
<p>
Choose your beans:
<select name="beans">
<option value="House Blend">HouseBlend</option>
<option value="Bolivia">Shade Grown Bolivan
Supremo</option>
<option value="Guatemala">Organic
Guatemalan</option>
<option value="Kenya">Kenya</option>
</select>
</p>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Creating Radio Buttons
• We use radio buttons when we want the user
to select a single option from among a group
of options.
• Attributes:
– Set type equal to radio
– Assign the same value for the name attribute for each
member in the group.
– Differentiate the radio buttons in the same group using the
value attribute.
– For one of the members in the radio button group, we can set
the checked attribute to checked, which selects that value,
by default, when the page loads.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Build a group of radio buttons below the drop
down menu on your form & above the Ship To:
paragraph:
<p>
Type: <br />
<input type="radio" name="beantype"
value="whole" checked="checked" />
Whole Bean<br />
<input type="radio" name="beantype"
value="ground" />Ground
</p>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Labels
• Instead of using plain text to describe
form fields (like our radio buttons), we
can use the label element.
• The label element makes your form
more accessible to adaptive software
and improves the structure of your
page.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Labels
• To use the label element, we need to
first make sure that the form field for
which we want to use a label has an id
attribute:
<input type="radio" … id="ground" />
• Next, we use the for attribute of the
label to make the connection between
the two:
<label for="ground">Ground</label>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Update your radio buttons to use labels:
<p>
Type: <br />
<input ... id="whole" checked="checked" />
<label for="whole">Whole Bean</label>
<br />
<input ... id="ground" />
<label for="ground">Ground</label>
</p>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Grouping Fields Visually
• We can group fields visually together
using the <fieldset> and <legend>
elements.
• The <fieldset> defines a border
around a group of related form fields.
• The <legend> element, which we define
nested inside <fieldset>, gives that
group a label.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Group your radio buttons using the
<fieldset>:
<fieldset>
<legend>Type</legend>
<!-- Radio button code -->
</fieldset>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Checkboxes
• Like radio buttons, checkboxes in a
group share the same name, but
have different values.
• However, unlike radio buttons,
users can select more than one
checkbox in a group.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Checkbox Attributes
• Use the <input> element with the type
configured to checkbox.
• Give the name attribute the same name for
each member in a group.
• Give unique names to the value attribute of
each checkbox.
• If you want a checkbox to appear checked
when the form loads, configure the checked
attribute with a value of checked.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Copy the following code in a <p> above the Ship To
paragraph:
<fieldset>
<legend>Extras</legend>
<input type="checkbox" name="extras[]"
value="giftwrap" id="giftwrap" />
<label for="giftwrap">Gift Wrap</label>
<br />
<input type="checkbox" name="extras[]"
value="catalog" id="catalog"
checked="checked" />
<label for="catalog">
Include a catalog with order</label>
</fieldset>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Comment Fields
• When we want to give the user a large
area in which to add comments, we can
use the <textarea> element.
• The <textarea> element includes the
following attributes:
– We use the name attribute to uniquely identify the
<textarea> element.
– We use the rows attribute to specify the number
of visible rows of text.
– We use the cols attribute to specify the width of
the <textarea>.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Add the following <textarea> just
above the form's buttons:
<p>
Customer Comments:<br />
<textarea name="comments"
rows="10"
cols="48"></textarea>
</p>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Adding Style to Forms
• Although normally considered a bad idea
for page layout, most developers use a
borderless table for form layout.
• Why? Using CSS to position individual
form fields is a tremendous task.
Additionally, we can consider forms to
be tabular data (okay, so that might be
a stretch … ) .
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Form Style Examples
• Open the file styledform.html.
• Open the file
css/styledform.css.
• After viewing the HTML in your
browser, open both files in an
editor.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
References
• Freeman, Elisabeth and Eric
Freeman. Head First HTML with
CSS & XHTML. Sebastopol, CA:
2006.
• Neiderst-Robbins, Jennifer. Web
Design in a Nutshell, Third
Edition. Sebastopol, CA: 2006.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science