Boagworld Forum
Boagworld is not just a web design podcast, it is also a thriving online community. Whether you build, design or run websites there are always people here to help. Whatever your question there is sure to be somebody with the answer.
-
In paper forms, you will often see something like this:
What is your favorite colour?
- o - red
- o - blue
- o - other ....
In which the o's are radiobuttons and the ... is a free text field.
My question: how would you mark up such a form section in HTML? As far as I know you can't nest form inputs. And I'm not aware of a text input/radio button combi field. So you'd end up with first a radiobutton section and then after that anoter separate field for when the last radiobutton is checked. But how do you make clear what the connection is between the two fields (also for accessibility)?
-
Would I be wrong I thinking that a fieldset would do the job just nicely?
http://www.w3schools.com/tags/tag_fieldset.asp -
Not sure if that solves the issue. A fieldset will generally go around a couple of inputs. But the issue I have is what to do with nested inputs. So you have the radio choices radio1, radio2, radio3. But in case radio3 is checked, a user fills in the text input after radio3. So in some way the text input is inside the third option of the radio input. Not sure how to explain it any better. In paper forms, you will see this very often. But in online forms I've not seen it yet as far as I know.
-
You can nest the fieldset tag, so personally I would put a main fieldset for all of the options, then nest one around the third radio and the text box. After that it should be easier to group them together visually on the screen, semantically it should hold up and using javascript to hide and show it when the radio is selected also would help.
-
Ok I'll try that and see how it works, if it validates and do some more research to see what the consequences are accessibility wise. Thanks for your feedback.
-
I don't think you'll do this in a way that validates. Nor do I think it needs to. This is one of those, "HTML doesn't offer a solution so roll your own" moments.This is the solution I ended up finding as best:<form action="#"><p><input type="radio" name="color" value="red" id="red"/><label for="red">Red</label></p><p><input type="radio" name="color" value="orange" id="orange"/><label for="orange">Orange</label></p><p><input type="radio" name="color" value="yellow" id="yellow"/><label for="yellow">Yellow</label></p><p><input type="radio" name="color" value="green" id="green"/><label for="green">Green</label></p><p><input type="radio" name="color" value="blue" id="blue"/><label for="blue">Blue</label></p><p><input type="radio" name="color" value="violet" id="violet"/><label for="violet">Violet</label></p><p><input type="radio" name="color" value="custom" id="custom"/><input type="text" value="enter your own…" name="color" for="custom"/></p></form>(If it looks really bad I blame Paul for not implementing a text editor with code functionality.)Basically, if you look at the last line, instead of a label it's a text input with the invalid for attribute. The purpose of this is so that if you click on the text field it selects the appropriate radio button.An alternative is to put the text input field inside a label:<p><input type="radio" name="color" value="custom" id="custom"/><label for="custom"><input type="text" value="enter your own…" name="color"/></label></p>The issue with this is it's invalid because the for on the label doesn't correspond to the input but instead the radio. This is invalid. You could also have the id of custom on the input but that is also invalid.If you nest both the radio button and the text input in the label (which does the same as having an ID on the radio and a FOR on the label) it's invalid as a label can only contain one form input element at once!So, basically, you have to choices: Roll your own invalid markup or get as close as you can to what you want with valid markup and then use JS to fill in the gaps. Depending on how much you care about validation you can choose one or the other. In this instance I say validation isn't helpful.
-
Thanks for your reply Doug. Seems like getting valid markup is going to be problematic. Not that important, but if possible I do want to make the markup as accessible as possible, at least.
There's one problem with the proposed solutions though, and that is that the text input with name="color" prevents any of the previous radio buttons with the same name="color" from being submitted (they never arrive in php). So maybe I can use the markup examples you gave, but still have to use a different name for the text input. Like:
<p><input type="radio" name="color" value="custom" id="custom"/><input type="text" name="color2" value="" /></p> -
custom-color or something. I always try to keep names contextual. Makes it easier in the long run.But yeah, the trick is to make sure it works in use and for screen readers. If you can do that who cares about validation? CSS3 properties still don't validate...
