I have taken over the development of an application which is basically like a huge questionnaire. Some of the design choices have a led to some invalid HTML, which I am trying to fix up. The major one is where a dropdown is associated with a radio button. This dropdown (select input) has been nested inside the same
<label> as the radio input. While trying to fix this, I was wondering if there might be a better way to display this? Here is an example from the current ui:
Choose one of the following options:
- Radio 1 - dropdown with lots of values
- Radio 2
- Radio 3
- Radio 4
Here is an example with a slider:
How long have you had health issues:
- No health issues
- Between 0 & 200 months - Slider input
- Over 200 months
- Not relevant
Radio-1 could have 20 or more values. Only one of the options can be selected, so it is a radio button style question. I can't just put options 2-4 inside the dropdown as they are irrelevant and would get lost in there. They need to be visible to the user as alternative options, rather than alternative choices for Radio-1. Hope this makes sense!
Are there some design patterns or resources you could point me to for these kind of situations?
Any help would be most appreciated!