September 23, 2002-- Newsletter #199
Goodies to Go (tm)
September 23, 2002--Newsletter #199
This newsletter is part of the internet.com network.
Just in case you missed it before, the new Beyond HTML Goodies book has just been released!
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!
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:
<TITLE>Radio Button Example</TITLE>
<FORM METHOD="POST" ACTION="ouraction.cgi">
<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>
<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>
<input type=submit VALUE="Submit">
<input type=reset VALUE="Reset">
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 http://www.htmlgoodies.com/beyond/cgi.html and for more about forms, see http://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 http://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:
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?
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
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>.
Yahoo! Takes Chance On Pay-to-Play
[September 23, 2002] Will users pay to rent gaming titles over their broadband connections? Yahoo! hopes so.
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.
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.
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!