/introduction/newsletter_archive/goodiestogo/article.php/3476331/September-23-2002---Newsletter-199.htm September 23, 2002-- Newsletter #199

September 23, 2002-- Newsletter #199

By Vince Barnes

Goodies to Go (tm)
September 23, 2002--Newsletter #199

This newsletter is part of the internet.com network.

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.





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:

<TITLE>Radio Button Example</TITLE>
<FORM METHOD="POST" ACTION="ouraction.cgi">

<input type="radio" name="color" value="red" checked>Red&nbsp;
<input type="radio" name="color" value="yellow">Yellow&nbsp;
<input type="radio" name="color" value="green">Green</p>

<input type="radio" name="number" value="one" checked>One&nbsp;
<input type="radio" name="number" value="two">Two&nbsp;&nbsp;
<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 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!


Archive Home Page.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date