Goodies to Go ™
September 23, 2002–Newsletter #199
This newsletter is part of the internet.com network.
http://www.internet.com
Goodies Announcement
Just in case you missed it before, the new Beyond HTML Goodies book has just been released!
Go beyond the basics and learn how the pros add and use dynamic HTML features
and advanced JavaScript techniques. Beyond HTML Goodies demonstrates dozens of
new and different features readers can add to their existing Web pages using
HTML and JavaScript. The book starts with simple text and image tips, such as
adding a clock to a Web page or causing text to appear when the mouse moves over
an image. It gradually builds to more complex tricks, including manipulating
forms or working with cookies behind the scenes. Throughout the book, readers
enjoy Joe’s snappy style and "to the point" discussion of each "goody" in the
book.
http://books.internet.com/books/0789727803
Goodies Thoughts – Radio For Help!
It’s your choice: red, yellow or green. You must choose one, but you must choose
only one. If this is a choice that you are offering your customer on your web
site, what’s the best way to code it onto a web page? How do you validate
that a choice is made and how do you ensure that only one choice is made?
To find out, read on!
There are several ways to code this type of choice
offering. You could provide a text box in which your visitor types their choice.
That’s a bit tough to validate, though. You could provide a drop down (aka
pop-up) list box. The options in the selection list would begin with "Choose
One" and continue with the three required choices. You would then write a little
JavaScript to verify that a selection has been made and that the first option
("Choose One") is not the selected option. In this particular case, this would
be a good method. Alternatively, you could provide some checkboxes. Then you
would write some JavaScript to ensure that one, and only one, of the checkboxes
has been checked. These are all reasonable options but there’s another one which
may be the simplest and most elegant of all.
It’s the radio button.
Radio buttons are groups of buttons that allow for the
exclusive selection of one of a set of options. (Say what? <g>) In other words
(thank you!) there is a group of buttons such that when you click on any one,
all the others in the group are automatically unclicked. This means that one and
only one of the buttons can be clicked. If you set one of the options as the
default, or pre-selected, option, then you wouldn’t need any further validation
on the selections. Your site visitor would automatically select one and only one
of your options.
Would you like to see some sample code? Ok – here goes:
<HTML>
<HEAD>
<TITLE>Radio Button Example</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="ouraction.cgi">
<p>
<input type="radio" name="color" value="red" checked>Red
<input type="radio" name="color" value="yellow">Yellow
<input type="radio" name="color" value="green">Green</p>
<p>
<input type="radio" name="number" value="one" checked>One
<input type="radio" name="number" value="two">Two
<input type="radio" name="number" value="three">Three</p>
<p>
<input type=submit VALUE="Submit">
<input type=reset VALUE="Reset">
</p>
</FORM>
</BODY>
</HTML>
This example is a complete page that will accept the users input and send it to
a CGI script called "ouraction.cgi". (For more about CGI see
https://www.htmlgoodies.com/perl/cgi-tutorials/ and for more about forms,
see
https://www.htmlgoodies.com/tutors/fm.html )
Now let’s take a look at those radio buttons.
There are two groups shown here, which will help to
illustrate how one group is differentiated from another. The first group looks
like the choice I was talking about earlier. There are three buttons defined by
— input type="radio" — as radio buttons. They are collected into a group by
the fact that they all have the same name. In our example, they all appear on
the same line on the form. This is for our convenience only. It doesn’t matter
where on the form the members of the group are placed, only that they all have
the same name. When passed to the cgi script, there will be a data item named
"color" having a value of "red", "yellow" or "green". In this example, the first
option for color has been marked as "checked". This means that this option will
be filled in on the form when the form is presented to the browser, and makes
this the default. Thus "color" has been given a default value of "red".
The second group is similar to the first, except that it is
called "number", has options for "one", "two" or "three" and has a default value
of "one".
One other point about radio buttons — why are they called
"radio" buttons? Beats me! They don’t look like the buttons on any radio I’ve
ever had! OK, so they work a bit like the channel selectors buttons on a car
radio, but is that really the best name anybody could come up with?
Thanks for reading!
Q & A Goodies
Questions are taken from
submissions to our Community Mentors. You can ask a Mentor a question by going
to
https://www.htmlgoodies.com/mentors/.
Q. Can the toolbar and menubar be controled directly from within an
index.html (or any other htm) page? I have only seen these bar control scripts
for popup windows. How can I automatically close a "_parent" window without
invoking the close verification message and without a manual user click function
?
A. Perhaps someone else knows a way, but I don’t believe it’s possible to
change the parent window. In any case, why would you? As a user, do you really
want someone taking away your scrollbars, menus, etc? Closing a window is easy.
Call a function that includes the line "window.parent.close();". Again however,
I would caution you against this. If a user intended to use their back button,
they really won’t appreciate you closing their window. It’s your site, but their
PC. Annoying your users isn’t the way to build traffic.
(** I couldn’t agree more! – Ed. **)
Q. I need to change the indent length on a nested unordered list. Any
ideas?
A. There are multiple ways, so I refer you to these tutorials:
http://htmlgoodies.earthweb.com/tutors/lists.html
http://htmlgoodies.earthweb.com/beyond/css_lists.html
Q. My question is so basic that I can’t find an answer in any of
the FAQs or books I’ve read. What’s the difference between .htm and .html, and
it’s other variants. Can you do more with one than the other? What about old
file handling routines that still enforce the 8.3 file naming convention?
A.
There is really no
difference in the file names. The only issue that might cause a problem is if
the server the site is on is set up to default to is .html extensions and you
name yours .htm it could cause a problem. I think most hosting servers are set
up to default on either. They usually tell you their default extensions
somewhere in the help files for setting up a web page.
Q. I want to change the bg color for each word in the body. Is there a
way to change bgcolor several times in one body? (sample non-working code was
provided)
A. You are using the <FONT> tag in your example. That will only change
the color of the text. Try using Cascading Style Sheets. One thing CSS can do
that the <FONT> tag cannot, is CSS can change the background color behind the
text. Keep in mind that not all browsers support CSS and it may not work in them
all. I did try it in Netscape 4.7 (which I think is the worst NN version there
is) so you should be fairly safe. Adjust the following code to yours and it may
be what you need.
<span style="background-color: #9933ff;">This </span>
<span style="background-color: #ccffcc;">is </span>
<span style="background-color: #9933ff;">the </span>
<span style="background-color: #ccffcc;">way </span>
<span style="background-color: #9933ff">to </span>
<span style="background-color: #ccffcc">change </span>
<span style="background-color: #9933ff">the </span>
<span style="background-color: #ccffcc">background </span>
<span style="background-color: #9933ff">color </span>
<span style="background-color: #ccffcc">for </span>
<span style="background-color: #9933ff">each </span>
<span style="background-color: #ccffcc">word</span>.
News Goodies
Yahoo! Takes Chance On Pay-to-Play
[September 23, 2002] Will users pay to rent gaming titles over their broadband
connections? Yahoo! hopes so.
Click here to read the article
Symantec is on a "Manhunt"
[September 23, 2002] The Norton anti-virus maker’s new intrusion detection
lineup is sweetened by multi-gigabit network and prevention capabilities.
Click here to read the article
Second Chance for GarageBand.com
[September 23, 2002] Popular web-based record label and contest site relaunches
to the sound of its own music, a new CEO, and some cash to burn.
Click here to read the article
And Remember This . . .
On this day in…
1846 Eighth planet discovered
German astronomer Johann Gottfried
Galle discovered the planet Neptune at the Berlin Observatory on this day in
1846. The blue giant, which has a diameter four times that of Earth, was named
for the Roman god of the sea. In 1989 the spacecraft Voyager 2 visited the
planet, returning spectacular photos to Earth, and greatly expanding our
knowlege of this planet.
Thanks for reading Goodies to Go!
