Forms best practices question.

[mrwebslinger]

We have a feedback form on our website that is pretty standard. One of the questions ask people how they heard about us and it has multiple options. My boss wants the choices to be broken down in categories Internet, Print, Referral and Signage with several choices under each category. Right now I am using an OPTGROUP to provide each category a header.My question is, what is the best way to gather information like that without making the form too cumbersome. Do I have 2 pull downs, 1st one with the category, 2nd with the choices (changing depending on what category is picked)? Do I leave it as is with a OPTGROUP? or another option, do I let them fill in how they heard about us? Another question, is there a way to use a menu system to populate a form field. Example would be have a pull down that displayed the categories, a sub menu would appear beside each category as you rolled over then with the category specific options. Is this possible. Is one of the options listed just as good or better of an option? Any insight or advise is appreciated as I learn best web practices as it related to UI.

[justsomeguy]

I like the optgroup, I like how those work. It probably depends on the number of choices. If you use optgroup and you pull down the menu and have 50 choices, you might want to split it up into 2 lists and have Javascript update the second based on the choice on the first. But if the menu would be small enough to quickly scan through it and find what you're looking for, I say use optgroup, since it doesn't require any Javascript. You could do something like a menu dropdown, but that would rely totally on Javascript. For that, you would need to have a hidden form field that you would use Javascript to set the value of based on whatever they clicked in the menu.

[mrwebslinger]

I like the optgroup, I like how those work. It probably depends on the number of choices. If you use optgroup and you pull down the menu and have 50 choices, you might want to split it up into 2 lists and have Javascript update the second based on the choice on the first. But if the menu would be small enough to quickly scan through it and find what you're looking for, I say use optgroup, since it doesn't require any Javascript. You could do something like a menu dropdown, but that would rely totally on Javascript. For that, you would need to have a hidden form field that you would use Javascript to set the value of based on whatever they clicked in the menu.

I like the OPTGROUP as well by my boss doesn't like the fact that you have to scroll to see the last couple of options. I think for now I will try and convince him that this is the best way.

[jlhaslip]

OptionGroups is definitely the correct Method.

[boen_robot]

Well, he is the boss. If he was a one client rather then a boss, I would say that you make him/her pay some extra to get two menus.Anyhow, you could do it. However, keep in mind there are users with JS off or unsupported. If you want to take them into considertaion, you should use optgroup or show them they need a JS enabled browser while hiding the dropdown. Ideally(and I'm not saying that's easy to do), you can have a single dropdown with optgroup for JS disabled users and two menus for JS enabled ones.