How to code HTML for a drop-down list of links, avoid being framed on someone else’s site, and make a colorful HTML Form?

Export to PDF | Export to DOC

Drop-Down Links

How do I set up a series of links to other Web pages using a drop-down list?
There are two ways to do this: one that uses a Go! button and one that does not. Here’s how you would do it using a Go! button:

<form name=”linkform”>
PC Magazine Sections:&nbsp;
<select name=”linklist”>
<option value=”http://www.pcmag.com”>
Home Page
</option>
<option value=”http://www.firstlooks.com”>
First Looks
</option>
<option value=”http://www.pcmag.com/solutions”>
Solutions
</option>
</select>
<input type=”button” value=”Go!”
onClick=”location.href=document.
linkform.linklist.options[document
.linkform.linklist.selectedIndex]
.value;”>
</form>

We start by naming the form containing the drop-down list (name=”linkform”on the form statement), and the array containing the list of options (name=”linklist”on the select statement). This lets us refer to them in JavaScript as document.linkform and document.linkform.linklist, respectively.

The select tag contains a series of option tags specifying the URL for each selection. The input tag creates a button with the label “Go!” and describes what will happen when the user clicks on it.

The onClick statement sets the current location of the browser (location.href) to the value of the selected option. The JavaScript array document .linkform .linklist.options contains an object for each option in the select element. Each object has a field named value that contains the URL, and a field named selectedIndex that contains the object’s index in the array. The fully specified index is document .linkform .linklist .selected Index.

You don’t have to use a Go! button. You can create a drop-down list in which the browser goes to the selected page as soon as the user chooses a menu option. The downside is that your drop-down list must include a dummy value as the first item. This is necessary because the first item can’t be selected unless another item is selected first.

<form name=”linkform”>
PC Magazine Sections:&nbsp;
<select name=”linklist”
onChange=”if (document.linkform
.linklist.selectedIndex>0)
location.href=document.linkform
.linklist.options[document.linkform
.linklist.selectedIndex].value;”>
<option>Choose:</option>
<option value=”http://www.pcmag.com”>
Home Page
</option>
<option value=”http://www.first looks.com”>
First Looks
</option>
<option value=”http://www.pcmag.com/solutions”>
Solutions
</option> </select>
</form>

Notice that the input tag has been replaced with an onChange event handler in the select tag. When the user makes a selection, the JavaScript code in the onChange handler is executed.

You can write an equivalent version of the select statement that is simpler, more readable, and more generic:

<select name=”linklist”
onChange=”if (this.selectedIndex>0)
location.href=this.options
[this.selectedIndex].value;”>

Notice that this is a shortcut in JavaScript and many other object-oriented languages that refers to the current instance of an object. In this case, this refers to the current instance of the select object. The options array and selectedIndex value are determined relative to that object, and the statement is much more compact.

Note: You must be careful about capitalization in the elements here, and generally in JavaScript. For example, a common mistake is to type selectedindex. This is incorrect because the I must be capitalized.

Avoid Frame-Ups

The technique described here lets you prevent other Web sites from displaying your content in a frame.

Many sites engage in the frowned-upon practice of displaying off-site content within a frame, giving the appearance that the “framing” site authored the other site’s content. To prevent others from putting a site in a frame follow below:

if (self != top) {
top.location.href = location.href;}

This code checks whether your window is the “top” window, the outermost frameset in which the script runs. If it isn’t, then you’re being framed: Your content is being displayed in a frame inside a frameset. To break out of the frame, the script sets the location of the outermost frameset to that of the current one, thus “promoting” it.

You could open the page in a separate window with this code:

if (self != top) {
window.open(location.href);}

But this would leave the page inside the original frameset, and you wouldn’t want to leave two copies of the same page open.

Drop-Down Links

How to set up a series of links to other Web pages using a drop-down list:

There are two ways to do this: one that uses a Go! button and one that does not. Here’s how you would do it using a Go! button:

<form name=”linkform”>
PC Magazine Sections:&nbsp;
<select name=”linklist”>
<option value=”http://www.pcmag.com”>
Home Page
</option>
<option value=”http://www.firstlooks.com”>
First Looks
</option>
<option value=”http://www.pcmag.com/solutions”>
Solutions
</option>
</select>
<input type=”button” value=”Go!”
onClick=”location.href=document.
linkform.linklist.options[document
.linkform.linklist.selectedIndex]
.value;”>
</form>

We start by naming the form containing the drop-down list (name=”linkform”on the form statement), and the array containing the list of options (name=”linklist”on the select statement). This lets us refer to them in JavaScript as document.linkform and document.linkform.linklist, respectively.

The select tag contains a series of option tags specifying the URL for each selection. The input tag creates a button with the label “Go!” and describes what will happen when the user clicks on it.

The onClick statement sets the current location of the browser (location.href) to the value of the selected option. The JavaScript array document .linkform .linklist.options contains an object for each option in the select element. Each object has a field named value that contains the URL, and a field named selectedIndex that contains the object’s index in the array. The fully specified index is document .linkform .linklist .selected Index.

You don’t have to use a Go! button. You can create a drop-down list in which the browser goes to the selected page as soon as the user chooses a menu option. The downside is that your drop-down list must include a dummy value as the first item. This is necessary because the first item can’t be selected unless another item is selected first.

<form name=”linkform”>
PC Magazine Sections:&nbsp;
<select name=”linklist”
onChange=”if (document.linkform
.linklist.selectedIndex>0)
location.href=document.linkform
.linklist.options[document.linkform
.linklist.selectedIndex].value;”>
<option>Choose:</option>
<option value=”http://www.pcmag.com”>
Home Page
</option>
<option value=”http://www.first looks.com”>
First Looks
</option>
<option value=”http://www.pcmag.com/solutions”>
Solutions
</option> </select>
</form>

Notice that the input tag has been replaced with an onChange event handler in the select tag. When the user makes a selection, the JavaScript code in the onChange handler is executed.

You can write an equivalent version of the select statement that is simpler, more readable, and more generic:

<select name=”linklist”
onChange=”if (this.selectedIndex>0)
location.href=this.options
[this.selectedIndex].value;”>

Notice that this is a shortcut in JavaScript and many other object-oriented languages that refers to the current instance of an object. In this case, this refers to the current instance of the select object. The options array and selectedIndex value are determined relative to that object, and the statement is much more compact.

Note: You must be careful about capitalization in the elements here, and generally in JavaScript. For example, a common mistake is to type selectedindex. This is incorrect because the I must be capitalized.

Colorful Forms

Is there a way to make the forms as colorful as the rest of the site?

Cascading Style sheets (CSS) make it simple to fill your text boxes with color, add borders, and even add background images.

You can apply almost all the style sheet attributes to forms, changing the font style, size, color, and so on.

Here is some of the code used in the example shown on this page:

<form> <input type=”text” name=”name”
style=”background-color: #E7E8FF”>
<textarea rows=”5″ cols=”26″
style=”background-image: URL(‘
background.gif’)” style=”
font-family:comic sans ms”
style=”color:#FFFFB9″ style=”border
style:solid”
wrap=”virtual”></textarea><input
type=”submit” style=”background-
color: #FFFFB9″
value=”Submit Button”></form>

The style sheets technique works with Microsoft Internet Explorer 4.0 or later and Netscape Navigator 6. If your visitors have older browsers, the form will still be usable, but the special colors will not be displayed.

If you use tables with your forms, don’t forget to use the bgcolor and font at tribute tags to liven things up. These work even in older browsers.

Leave a Reply

Your email address will not be published. Required fields are marked *