...

View Full Version : 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?



<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



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

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


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum