Labels for radio buttons inside a row

**cuintheicu** · 05-29-2009, 09:42 PM

Hi,

I have a very interesting question.

Now, I started out with creating a simple radio button form which worked just fine. After that, for better UI, I added labels to the radio buttons, so that even clicking on the text would select the radio button. This worked too.

Now, after this I created a table. Each row of this table had one option of the radio form I just created. My table has borders.

Now, I want that when a user clicks on the row (not necessarily on the text), the radio button gets highlighted.

I have been trying to do this for quite some time, but miserably failing.

Here's a bit of the code to give you a small idea of where I am
<br><br><h2><form name="input" action="helper.php" method="post" onsubmit="return valbutton()">'
.'<tr><th class="spec"><input type="radio" name="xyz" value="0" id="0" onclick="set();"/><label for="0">   Option 1</label></th></tr>'
.'<tr><th class="specnext"><input type="radio" name="xyz" value="1" id="1" onclick="set();"/><label for="1">   Option 2</label></th></tr>'
.'<tr><th class="spec"><input type="radio" name="xyz" value="2" id="2" onclick="set();"/><label for="2">   Option 3</th></tr></label>'

Thanks a million !!!

**coothead** · 05-30-2009, 04:58 AM

Hi there cuintheicu,

and a warm welcome to these forums.

Here is an example, with which you may like to experiment...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
table {
    margin:auto;
 }
table, td {
    border-width:1px;
    border-style:solid;
    border-color:#b2b2b2 #000 #000 #b2b2b2;
 }
td {
    padding:0;
    border-color:#000 #b2b2b2 #b2b2b2 #000; 
 }
label {
    display:block;
    width:300px;
    padding:20px 0;
    cursor:pointer;
    text-align:center;
    background-color:#eef;
 }
input {
    margin-right:60px;
    cursor:pointer;
 }
</style>

</head>
<body>

<form name="input" action="helper.php" method="post" onsubmit="return valbutton()">

<table><tr>

<td>
 <label for="one">
  <input type="radio" name="xyz" value="0" id="one">
  Option 1
 </label>
</td>

</tr><tr>

<td>
 <label for="two">
  <input type="radio" name="xyz" value="1" id="two">
  Option 2
 </label>
</td>

</tr><tr>

<td>
 <label for="three">
  <input type="radio" name="xyz" value="2" id="three">
  Option 3
 </label>
</td>

</tr></table>

</form>

</body>
</html>

**cuintheicu** · 05-30-2009, 01:59 PM

Hi Coothead!

That was awesome... I grinned in pleasure when I saw the code you gave working like a charm

I just have the obvious little question for you. Which part does the magic? I'm inclined to believe its somewhere in the following code...

label {
display:block;
width:300px;
padding:20px 0;
cursor

ointer;
text-align:center;
background-color:#eef;
}
input {
margin-right:60px;
cursor

ointer;
}

But what exactly is it?

And thanks for your warm welcome. It was kind of you to notice. It's because of guys like you that the concept of forums survives.

**coothead** · 05-30-2009, 02:16 PM

it gives me great pleasure to know that I made someone smile today.

Which part does the magic?

Setting the label element to display:block allows it to completely fill the td element.
In effect this makes the td element completely clickable.

**cuintheicu** · 05-30-2009, 02:50 PM

Hi again,

So after my post where I asked you about the magic... I thought I should try finding it out on my own. But I am at a complete loss. Let me give you bigger snippets of code, that would hopefully give a better perspective.

It's essentially all HTML, but within a PHP environ. Hope that doesn't make this post wrong.

PHP Code:


<?



    $header1 .= '<link rel="stylesheet" type="text/css" media="screen" href="http://www.xxxxxx/MY_DIR/style_radio.css"/>'

        .'<table width ="100%">'

        .'<br><br><h2><form name="input" action="helper.php" method="post" onsubmit="return valbutton()">'    

        .'<tr><th class="spec"><label for="0"><input type="radio" name="xyz" value="0" id="0" onclick="set();"/>&nbsp;&nbsp;&nbsp;Option 1</label></th></tr>'

        .'<tr><th class="specnext"><label for="1"><input type="radio" name="xyz" value="1" id="1" onclick="set();"/>&nbsp;&nbsp;&nbsp;Option 2</label></th></tr>'

        .'<tr><th class="spec"><label for="2"><input type="radio" name="xyz" value="2" id="2" onclick="set();"/>&nbsp;&nbsp;&nbsp;Option 3</th></tr></label>'

        .'<tr><th class="specnext"><label for="3"><input type="radio" name="xyz" value="3" id="3" onclick="set();"/>&nbsp;&nbsp;&nbsp;Option 4</label></th></tr>'

        .'<tr><th class="spec"><label for="4"><input type="radio" name="xyz" value="4" id="4" onclick="set();"/>&nbsp;&nbsp;&nbsp;Option 5</label></th></tr>'

        .'<tr><th class="specnext"><label for="5"><input type="radio" name="xyz" value="5" id="5" onclick="set();"/>&nbsp;&nbsp;&nbsp;Option 6</label></th></tr>'

        .'<tr><th class="nobg"><br><br><br>'

        .'<center><input type="submit" value="I\'m smirking right now...." /></center></th></tr>'

        .'</form></h2></table>';



    echo $header1;

?>

The CSS file that I'm importing is as follows ...

Code:

input {
	cursor:pointer;
}

label {
	display:block;
	cursor:pointer;
	background-color:#000
}

th.specnext {
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #fff url(images/bullet2.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #797268;
}

th {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
	width: 200px;
	border-top: 1px solid #C1DAD7;
	border-left: 1px solid #C1DAD7;
	border-right: 1px solid #C1DAD7;
	background: none;
}

I copied the input and label styles from you. This thing still does not work for me.

Is it because I'm trying to make a facebook app ? I dont think that that would be the case though.

**coothead** · 05-30-2009, 04:12 PM

the code that you are supplying is not valid.

This is the corrected code...

Code:


<form name="input" action="helper.php" method="post" onsubmit="return valbutton()"><table>
<tr><th class="spec"><label for="zero"><input type="radio" name="xyz" value="0" id="zero" onclick="set();">Option 1</label></th></tr>
<tr><th class="specnext"><label for="one"><input type="radio" name="xyz" value="1" id="one" onclick="set();">Option 2</label></th></tr>
<tr><th class="spec"><label for="two"><input type="radio" name="xyz" value="2" id="two" onclick="set();">Option 3</label></th></tr>
<tr><th class="specnext"><label for="three"><input type="radio" name="xyz" value="3" id="three" onclick="set();">Option 4</label></th></tr>
<tr><th class="spec"><label for="four"><input type="radio" name="xyz" value="4" id="four" onclick="set();">Option 5</label></th></tr>
<tr><th class="specnext"><label for="five"><input type="radio" name="xyz" value="5" id="five" onclick="set();">Option 6</label></th></tr>
<tr>
<th class="nobg"><input type="submit" value="I\'m smirking right now...." ></th></tr>
</table></form>

...and this is the CSS..

Code:


table {
        margin:auto;
 }
input {
        margin-right:20px;
	cursor:pointer;
 }

label {
	display:block;
        padding: 6px 6px 6px 12px;
	cursor:pointer;
	background-color:#000
 }

th.specnext {
	border-left: 1px solid #c1dad7;
	border-top: 0;
	background: #fff url(images/bullet2.gif) no-repeat;
	font: bold 10px "trebuchet ms",verdana,arial,helvetica,sans-serif;
	color: #797268;
}

th {
	font: bold 11px "trebuchet ms",verdana,arial,helvetica,sans-serif;
	color: #4f6b72;
	border-right: 1px solid #c1dad7;
	border-bottom: 1px solid #c1dad7;
	border-top: 1px solid #c1dad7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	background: #cae8EA url(images/bg_header.jpg) no-repeat;
  }

th.nobg {
	width: 200px;
        padding-top:48px;
	border-top: 1px solid #c1dad7;
	border-left: 1px solid #c1dad7;
	border-right: 1px solid #c1dad7;
	background:none;
        text-align:center;
 }
th.nobg input {
        margin:0;
 }

Note:-

If you set a background-color to the label elements then the background-images
that you have set to the th elements will be hidden.

**cuintheicu** · 05-30-2009, 07:47 PM

You hit the nail on the head CootHead..

My graphics ARE actually not showing up, but that was the least bit of my problems as the final result was looking pretty decent

But you have impressed me to the limit!! So do the label backgrounds take precedence over the th backgrounds? Or is it more a matter of which element is nested inside which?

I'll try this code and get back to you! You're officially my saviour

LOL !

**coothead** · 05-30-2009, 10:17 PM

"child elements" will be stacked above the "parent element".
This will only become apparent when backgrounds are applied to these elements.
The majority of elements are, by default, transparent.
Form elements, though, have a default background colour and border.

**cuintheicu** · 06-02-2009, 12:31 AM

COOTHEAD !!! Everything worked just fine man

Thank you so much!

I have everything working just fine now... In case you're on facebook... check out http://apps.facebook.com/cheapshots to see what I was working on.. the thing still has a few errors... but is working decent enough

And right in the middle, in the very heart of the program, I have those tables you helped me out with

**cuintheicu** · 06-02-2009, 12:38 AM

And may I know what you mean by "Child elements"? Is that equivalent to nested elements ?

**coothead** · 06-02-2009, 02:23 AM

Hi there Tarun,

Yes that is basically true.

I would speak of "nested tables" but would call a p element nested within a div element the "child" of that element.

**cuintheicu** · 06-02-2009, 09:46 AM

Hey!

I ran into another problem... In the code that I supplied, if the length of the text (after the radio button) goes long enough to wrap onto the second line, then it starts right below the radio button. However, I want it to wrap from the place where the text starts in the first line.

How can that be achieved?

Thanks!
Tarun

Thread: Labels for radio buttons inside a row

Thread Tools

Related

Radio Buttons Return Nothing Forum: HTML Forum

Changing radio buttons to drop-down menu and maintain cookies Forum: Javascript Forum

Labels not displayed Forum: CSS Forum

Use combo radio buttons to forward to specific URLs Forum: Javascript Forum

radio buttons Forum: HTML Forum

Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Re: Labels for radio buttons inside a row

Tags for this Thread