Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P38 potx

Workshop


Workshop
In this lesson, you learned about cascading style sheets, the wonderful supplement to HTML that makes
formatting your pages less painful. Throughout the rest of this book, I'll be using cascading style sheets
where appropriate, so please review this workshop material before continuing.
Q&A
Q My CSS isn't working like I'd expect. What should I do?
A
CSS probably doesn't seem that clear in the first place, and things can only get
messier when you actually start applying styles to your pages. You should be sure to
test your pages in every browser you can find, and don't be afraid to experiment. Just
because something seems like it should work doesn't mean it will. The W3C also
provides a CSS Validator (
that you can use to
make sure that your CSS syntax is correct. You should probably use it all the time, but
even if you don't, it can still help out if you get stuck.
Q Are there naming rules for classes and IDs?
A
Yes, there are. A name must start with a letter, and can contain only letters, numbers,
or dashes (-). Some browsers may not enforce these rules, but to be safe, you should
adhere to them.
Q What are the relevant CSS standards?
A
There are two CSS recommendations from the W3C: CSS1 and CSS2. Most modern
browsers support a large part of CSS1 and some of CSS2, specifically the sections on
positioning elements that I discussed today. You can find out more at
http://www.w3.
org/Style/CSS/. If you're curious about how well your browser supports CSS or the
effect that properties have in real browsers, you can check out the CSS test suites at

/>Quiz
1.
Why can't absolute units be used reliably in CSS?
file:///G|/1/0672328860/ch09lev1sec11.html (1 von 3) [19.12.2006 13:49:14]
Workshop
2.
True or False: Including style sheets on your page requires features provided by a web
server.
3.
How do the absolute and relative positioning schemes differ?
4.
Is the margin or padding of an element inside the border?
5.
How do you lay out your page so that elements positioned statically appear above
elements that are positioned absolutely?
Quiz Answers
1.
Absolute units have problems in CSS because there's no way to know exactly what
sort of display medium the user has. An inch on one monitor may be completely
different than an inch on another.
2.
The answer is false; you can use the
<link> tag to load external style sheets without
involving the web server in any way.
3.
The relative positioning scheme places elements relative to the previous element on
the page, whereas the absolute positioning scheme places the element exactly where
you tell it to on the page.
4.
The padding of an element is inside the border of an element, and the margin is

outside.
5.
This is a trick question. You cannot put statically positioned elements above absolutely
positioned elements. However, if you change the statically positioned elements so that
they use the relative positioning scheme, you can alter their stacking layer using the
z-
index
property.
Exercises
file:///G|/1/0672328860/ch09lev1sec11.html (2 von 3) [19.12.2006 13:49:14]
Workshop
1.
If you've already created some web pages, go back and try to figure out how you
could apply CSS to them.
2.
Take a look at some of your favorite websites and think about how the webmasters
could achieve the effects on their sites using CSS.
3.
Adapt today's sample page so that it has three columns of content instead of two.


file:///G|/1/0672328860/ch09lev1sec11.html (3 von 3) [19.12.2006 13:49:14]
Lesson 10. Designing Forms


Lesson 10. Designing Forms
Up to this point, you've learned almost everything you need to know to create functional, attractive, and
somewhat interactive web pages. If you think about it, however, the pages you've created thus far have
a one-way information flow. Your HTML documents, images, sounds, and video have been traveling to
web browsers with no return ticket.

Today's lesson is about creating HTML forms to collect information from people visiting your website.
Forms enable you to gather just about any kind of information for immediate processing by a server-
side script or for later analysis using other applications. If you've spent much time browsing the Web,
you've undoubtedly run across forms of various flavors. Many forms exist: simple forms that perform
searches, forms that log you in to websites, forms that enable you to order products online, online polls,
and so on. They all share one thing in common: accepting input from a web page visitor.
If you're one to worry about compatibility, you can set your mind at ease. HTML forms have been
around since the beginning of the HTML language and are supported by every web browser in common
use. I'll make sure to point out any possible compatibility problems along the way.
In this Lesson
Don't be intimidated by forms! Although they might look complex, they're actually very easy to code.
The hardest part is formatting them. Today's lesson covers the following topics, which enable you to
create any type of form possible with HTML:
● Discovering how HTML forms interact with server-side scripts to provide interactivity
● Creating simple forms to get the hang of it
● Learning all the types of form controls you can use to create radio buttons, check boxes, and
more
● Using more advanced form controls to amaze your friends and co-workers
● Planning forms so that your data matches any server-side scripts you use


file:///G|/1/0672328860/ch10.html [19.12.2006 13:49:14]
Understanding Form and Function


Understanding Form and Function
Right off the bat, you need to understand a few things about forms. First, a form is part of a web page
that you create using HTML elements. Each form contains a
form element that has special controls, such
as buttons, text fields, check boxes, Submit buttons, and menus. These controls make up the user

interface for the form (that is, the pieces of the form users see on the web page). When people fill out
forms, they're interacting with the controls of the forms. In addition, you can use many other HTML
elements within forms to create labels, provide additional information, add structure, and so on. These
elements aren't part of the form itself, but they can enhance your form's look and improve its usability.
When someone fills out an HTML form, he enters information or makes choices using the form controls.
When the user submits the form, the browser collects all the data from the form and sends it to the URL
specified as the form's action. It's up to the program residing at that URL to process the form input and
create a response for the user.
It's very important that you understand the implications of this final step. The data is what you want,
after all! This is the reason you've chosen to create a form in the first place. After a user clicks the
Submit button, the process ceases to be one of pure HTML and becomes reliant on applications that
reside on the web server. In other words, for your form to work, you must already have a program on
the server that will store or manipulate the data in some manner.
There are some cases in which forms aren't necessarily submitted to programs. Using JavaScript and
dynamic HTML, you can take action based on form input. For example, you can open a new window
when a user clicks on a form button. You can also submit forms via email, which is okay for testing, but
isn't reliable enough for real applications.
Task: Exercise 10.1. Creating a Simple Form That Accepts a Name and a
Password
Okay, let's get right to it and create a simple form that illustrates the concepts just
presented. It's a web page that prompts the user to enter a name and a password to
continue.
Start by opening your favorite HTML editor and creating a web page template. Enter the
standard HTML header information, include the
body element, and then close the body and
html elements to form a template from which to work. If you already have a template
similar to this, just load it into your HTML editor:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html>
<head>

<title>Page Title</title>
</head>
<body>
</body>
</html>

file:///G|/1/0672328860/ch10lev1sec1.html (1 von 6) [19.12.2006 13:49:15]
Understanding Form and Function
Note
I tend to use Transitional HTML and note it in the <!doctype> declaration. This
gives me the flexibility of adding deprecated HTML elements if I choose,
without worrying about validation errors.

Next, add your title so that people will understand the purpose of the web page:
<title>Please Log In</title>

Within the body of the web page, add a form element. I've added both the opening and
closing tags, with an empty line between them, so that I don't forget to close the
form
when I'm finished:
<form action=" method="post">
</form>

Before continuing, you need to know more about the form element and the attributes you
see within the opening tag. Obviously,
form begins the element and indicates that you're
creating an HTML form. The
action attribute specifies the URL to the server-side script
(including the filename) that will process the form when it's submitted. It's very important
that the script with the name you've entered is present on your web server at the location

the URL specifies. In this example, I use the full URL for the script, but you can just as
easily use a relative URL if it makes more sense.
Note
Prior to going live with forms, you should contact your web hosting provider
and ask whether you can use the ISP's scripts or add your own. You must also
determine the URL that points to the directory on the server that contains the
scripts. Some ISPs rigidly control scripts for security purposes and won't allow
you to create or add scripts to the server. If that's the case, and you really
need to implement forms on your web pages, you should consider searching
for a new ISP.

The next attribute is method, which can accept one of two possible values: post or get.
These values define how form data is submitted to your web server. The
post method
includes the form data in the body of the form and sends it to the web server. The
get
method appends the data to the URL specified in the
action attribute and most often is
used in searches. I chose the
post method here because I don't want to send the user's
password back in plain sight as part of the URL. Now add some form controls and
information to make it easy for a visitor to understand how to fill out the form. Within the
form element, begin by adding a helpful description of the data to be entered by the user,
and then add a
text form control. This prompts the user to enter her name in a text-entry
field. Don't worry about positioning just yet because you'll put all the form controls into a
file:///G|/1/0672328860/ch10lev1sec1.html (2 von 6) [19.12.2006 13:49:15]
Understanding Form and Function
table later:
<form action=" method=post>

Username: <input type="text" name="username" />
</form>

Next, add another bit of helpful text and a password control:
<form action=" method="post">
Username: <input type="text" name="username" />
Password: <input type="password" name="password" />
</form>

Notice that both these form controls are created using the input element. The type
attribute defines which type of control will be created. In this case, you have a text control
and a password control. Each type of control has a distinct appearance, accepts a different
type of user input, and is suitable for different purposes. Each control is also assigned a
name that distinguishes it and its data from the other form controls. Finally, add a Submit
button so that the user can send the information she entered into the form. Here's the
form so far:
Input
<form action=" method="post">
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="password" /><br />
<input type="submit" value="Log In" />
</form>

The Submit button is another type of input field. The value attribute is used as the label for
the Submit button. If you leave it out, the default label will be displayed by the browser.
Tip
When you're naming form controls and labeling buttons, you should strive for
clarity and meaning. If a form is frustrating or hard to figure out, visitors will
leave your site for greener pastures!

Figure 10.1 contains a screenshot of the form with all the form elements in place.
Output
Figure 10.1. The form with all the input elements in place.
file:///G|/1/0672328860/ch10lev1sec1.html (3 von 6) [19.12.2006 13:49:15]
Understanding Form and Function

At this point, you've created the form and it's ready to rumble. However, if you load it into
your web browser, you'll see that it doesn't look all that appealing. Placing the form
controls in the table should clean things up a bit. You can put the
<table> tags inside your
form. The table should be two columns wide, with the labels in the left column and the
input fields in the right column. The Submit button will be in the left column on the third
row. Here's the code:
form action=" method="post">
<table border="0">
<tr>
<td align="right">Username:</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Log In" style="margin-top: 20px"/>
</td>
<td><br /></td>
</tr>
</table>

</form>

Notice that we added 20 pixels of white space above the Submit button using the margin-
top
property in the style attribute of the <input> tag. We also aligned the two labels to the
right and the button to the center, just to spiff things up a bit more.
A few final notes are warranted: First, we used the
margin property to center the table.
Second, we included an
<h1> element on the page to give the user some idea what to do.
Here's the full code for the page:
Input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" />file:///G|/1/0672328860/ch10lev1sec1.html (4 von 6) [19.12.2006 13:49:15]
Understanding Form and Function
<html xmlns=" /><head>
<title>Please Log In</title>
</head>
<body>
<h1 style="text-align: center">Please Log In</h1>
<form action=" method="get">
<table border="0" style="margin: auto">
<tr>
<td align="right">Username:</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input type="password" name="password" /></td>
</tr>

<tr>
<td align="center">
<input type="submi" value="Log In" style="margin-top: 20px" />
</td>
<td><br /></td>
</tr>
</table>
</form>
</body>
</html>

That took a little work, but I think the final page shown in Figure 10.2 looks good.
Output
Figure 10.2. A simple form.

file:///G|/1/0672328860/ch10lev1sec1.html (5 von 6) [19.12.2006 13:49:15]
Understanding Form and Function
To complete the exercise, let's test the form to see whether the form produces the data we
expect. Here's what the data that's sent to the server looks like:
username=someone&password=somepassword

It's pretty measly, but you can see that the names assigned to each field are tied to the
values entered in those fields. You can then use a program to use this data to process the
user's request.


file:///G|/1/0672328860/ch10lev1sec1.html (6 von 6) [19.12.2006 13:49:15]