Solved

Fancy up a form dropdown...

Posted on 2004-09-25
6
339 Views
Last Modified: 2008-03-06
Is there a way on a form dropdown to put categories?

TYPE ONE
   abc
   xyz
TYPE TWO
   123
   456
0
Comment
Question by:pinkstonm
6 Comments
 

Expert Comment

by:awd2004
ID: 12150448
It Depends whether the data in the form is dynamic, otherwise you can just put

<select name="select">
  <option>Please Select</option>
  <option value="">-- Category 1 --</option>
  <option value="anything">Anything</option>
  <option value="anything2">Anything2</option>
  <option value="">--Category 2 --</option>
  <option value="Anything cat2">Anything cat2</option>
  <option value="Anythin2 Cat 2">Anythin2 Cat 2</option>
</select>
0
 

Expert Comment

by:awd2004
ID: 12150469
you can aslo fancy up the form  by sing fonts or css

<select name="menu"
style="background-color:blue;
font size:8pt; font-family:verdana;
color:white" size="1"
onchange="jump(this.form)">
<option value="http://www.google.com">Google</option>
<option value="http://www.extremestuff.net">ES.Net</option>
<option value="http://www.microsoft.com">Microsoft</option>
<option value="http://www.aol.com">AOL</option>
</select>
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 50 total points
ID: 12151245
>>Is there a way on a form dropdown to put categories?

Yes, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

select
{
      font:bold 11px verdana, sans-serif;
}

optgroup
{
      background-color:#ffcc66;
}

option
{
      background-color:#cccccc;
}

</style>
</head>
<body>
<form name="myForm">

<select name="mySelect">
      <option selected label="none" value="none">Please select an option...</option>
      <optgroup label="TYPE ONE">
            <option value="abc">abc</option>
            <option value="xyz">xyz</option>
      </optgroup>
      <optgroup label="TYPE TWO">
            <option value="123">123</option>
            <option value="456">456</option>
      </optgroup>
</select>

</form>
</body>
</html>

Sean
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:eeBlueShadow
ID: 12152896
It is interesting to note that the W3 standards specification allow nested <optgroup> tags, simlar to nested menus (e.g. View->Encoding->More in IE) but as far as I know, no browsers currently support this
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12154206
Yes - the nested version is still some time off - if ever. The basic optgroup rendering above is as far as it goes for now...

Sean
0
 
LVL 8

Expert Comment

by:klykken
ID: 12156317
Nice example sean
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
really easy css change help please 4 32
need help with share buttons 11 65
Popup write two lines 3 21
close pop up windows when logout or main window closes 17 38
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

680 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question