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>

Hope that helps...



--- <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

Reply via email to