Results 1 to 12 of 12
Related
-
Radio Buttons Return Nothing Forum: HTML Forum
Replies: 7 -
Changing radio buttons to drop-down menu and maintain cookies Forum: Javascript Forum
Replies: 1 -
Labels not displayed Forum: CSS Forum
Replies: 0 -
Use combo radio buttons to forward to specific URLs Forum: Javascript Forum
Replies: 4 -
radio buttons Forum: HTML Forum
Replies: 2
-
05-29-2009, 09:42 PM #1
Labels for radio buttons inside a row
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 !!!
-
05-30-2009, 04:58 AM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 733
Re: Labels for radio buttons inside a row
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>
-
05-30-2009, 01:59 PM #3
Re: Labels for radio buttons inside a row
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;
cursorointer;
text-align:center;
background-color:#eef;
}
input {
margin-right:60px;
cursorointer;
}
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.Last edited by HTML; 10-01-2009 at 09:19 AM.
-
05-30-2009, 02:16 PM #4bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 733
Re: Labels for radio buttons inside a row
it gives me great pleasure to know that I made someone smile today.
Which part does the magic?
In effect this makes the td element completely clickable.Last edited by HTML; 10-01-2009 at 09:39 AM.
-
05-30-2009, 02:50 PM #5
Re: Labels for radio buttons inside a row
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();"/> Option 1</label></th></tr>'
.'<tr><th class="specnext"><label for="1"><input type="radio" name="xyz" value="1" id="1" onclick="set();"/> Option 2</label></th></tr>'
.'<tr><th class="spec"><label for="2"><input type="radio" name="xyz" value="2" id="2" onclick="set();"/> Option 3</th></tr></label>'
.'<tr><th class="specnext"><label for="3"><input type="radio" name="xyz" value="3" id="3" onclick="set();"/> Option 4</label></th></tr>'
.'<tr><th class="spec"><label for="4"><input type="radio" name="xyz" value="4" id="4" onclick="set();"/> Option 5</label></th></tr>'
.'<tr><th class="specnext"><label for="5"><input type="radio" name="xyz" value="5" id="5" onclick="set();"/> 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;
?>
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; }
Is it because I'm trying to make a facebook app ? I dont think that that would be the case though.Last edited by HTML; 10-01-2009 at 09:20 AM.
-
05-30-2009, 04:12 PM #6bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 733
Re: Labels for radio buttons inside a row
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>
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; }
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.Last edited by HTML; 10-01-2009 at 09:20 AM.
-
05-30-2009, 07:47 PM #7
Re: Labels for radio buttons inside a row
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 saviourLOL !
-
05-30-2009, 10:17 PM #8bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 733
Re: Labels for radio buttons inside a row
"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.Last edited by HTML; 10-01-2009 at 09:20 AM.
-
06-02-2009, 12:31 AM #9
Re: Labels for radio buttons inside a row
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 enoughAnd right in the middle, in the very heart of the program, I have those tables you helped me out with
-
06-02-2009, 12:38 AM #10
Re: Labels for radio buttons inside a row
And may I know what you mean by "Child elements"? Is that equivalent to nested elements ?
-
06-02-2009, 02:23 AM #11bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 733
Re: Labels for radio buttons inside a row
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.
-
06-02-2009, 09:46 AM #12
Re: Labels for radio buttons inside a row
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
[Hostripples India] - Best Canada Linux SSD VPS Server!
02-15-2019, 12:46 AM in Web Hosting Forum