radio buttons display practices tips plz.

bazz · 12-19-2009, 03:14 AM

Hi,

I have a set 6 sets of 5 radio buttons. I would prefer to have each set in a row of 5 buttons but, can you tell me what best practice would be for spreading them out?

I don't want confusion to creep in where a button is equidistant between 1 and 2 for example. I have used   to make it layout more clearly but I am not sure that is the correct/best way.

Should I, instead, be adding padding to the right of the radio buttons?

Code:

          <fieldset>
            <legend>Welcome</legend>
            1 <input type='radio' name="Welcome" /> &nbsp;&nbsp;&nbsp;&nbsp;
            2 <input type='radio' name="Welcome" /> &nbsp;&nbsp;&nbsp;&nbsp;
            3 <input type='radio' name="Welcome" /> &nbsp;&nbsp;&nbsp;&nbsp;

            4 <input type='radio' name="Welcome" /> &nbsp;&nbsp;&nbsp;&nbsp;
            5 <input type='radio' name="Welcome" /> &nbsp;&nbsp;&nbsp;&nbsp;
          </fieldset>

bazz

vineet · 12-19-2009, 03:46 AM

padding may not work. but you can use right margin

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.radio{
margin-right:35px;
}
</style>
</head>
<body>
   <fieldset>
            <legend>Welcome</legend>
            1 <input type='radio' name="Welcome" class="radio" />
            2 <input type='radio' name="Welcome" class="radio"  /> 
            3 <input type='radio' name="Welcome" class="radio"  />
            4 <input type='radio' name="Welcome" class="radio"  />
            5 <input type='radio' name="Welcome" class="radio"  />
          </fieldset>
</body>
</html>

vineet

bazz · 12-19-2009, 06:44 AM

Thanks, I'll try that.

bazz

abduraooft · 12-19-2009, 09:26 AM

How about

Code:

fieldset label{
float:left;
width:5em;
text-align:right;
}

Code:

<fieldset>
	<legend>Set 1</legend>
	<label>1<input type='radio' name="Welcome" /></label> 
	<label>2<input type='radio' name="Welcome" /></label> 
	<label>3<input type='radio' name="Welcome" /></label> 
	<label>4<input type='radio' name="Welcome" /></label> 
	<label>5<input type='radio' name="Welcome" /></label> 
</fieldset>

?

bazz · 12-19-2009, 10:40 AM

Ah, thanks. I hadn't thought of using label for help with spacing.

bazz

abduraooft · 12-19-2009, 10:51 AM

Quote:

Originally Posted by bazz

Ah, thanks. I hadn't thought of using label for help with spacing.

bazz

That <label>s are not just for spacing. You could click on those labels to select the respective radio button, which enhances the usability.

bazz · 12-19-2009, 02:30 PM

Thanks. yeh I knew about the accessibility bit but hadn't thought of using css with it for spacing

server-side has kept me away from css and I am forgetting some of it.

bazz