On 4 June 2010 12:29, nedlud <ned...@gmail.com> wrote: > I have a web form I'm building and there is a simple yes/no question in it. > I got to wondering what the best semantic mark up for this is? Does anyone > have any good UI/UX suggestions? > > My three ideas were... > > Two radio buttons for "yes" and "no"... > <p>Do you...?</p> > <label for="ans-yes">Yes</label><input type="radio" name="ans" > id="ans-yes"> > <label for="ans-no">No</label><input type="radio" name="ans" id="ans-no"> >
I go back to the fact radio buttons show mutually-exclusive options, which makes a very clear yes/no. If your question needs the user to actively specify a yes or no, it's a good solution. Checkboxes mean one response is given by omission, which is a less definitive interaction. Since radio buttons are one element short on their own, you need to wrap them in a fieldset and legend to essentially act like a label for the set of radio buttons. I also think the button should be on the left and the text on the right (in left-to-right languages), since a) that just seems the most common thing, and b) if you were to add a couple of divs to create rows, the buttons would line up neatly above each other. Which gives us... <fieldset><legend>Do you...?</legend> <input type="radio" name="ans" id="ans-yes"><label for="ans-yes">Yes</label> <input type="radio" name="ans" id="ans-no"><label for="ans-no">No</label> </fieldset> Hope that helps... cheers, Ben -- --- <http://weblog.200ok.com.au/> --- The future has arrived; it's just not --- evenly distributed. - William Gibson ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
