41 users online (0 members and 41 guests)  


  Results 1 to 12 of 12

Related

  1. Radio Buttons Return Nothing    Forum: HTML Forum
    Replies: 7
  2. Replies: 1
  3. Labels not displayed    Forum: CSS Forum
    Replies: 0
  4. Replies: 4
  5. radio buttons    Forum: HTML Forum
    Replies: 2
  1. #1
    cuintheicu's Avatar
    New User

    Status
    Offline
    Join Date
    May 2009
    Posts
    7

    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">&nbsp;&nbsp;&nbsp;Option 1</label></th></tr>'
    .'<tr><th class="specnext"><input type="radio" name="xyz" value="1" id="1" onclick="set();"/><label for="1">&nbsp;&nbsp;&nbsp;Option 2</label></th></tr>'
    .'<tr><th class="spec"><input type="radio" name="xyz" value="2" id="2" onclick="set();"/><label for="2">&nbsp;&nbsp;&nbsp;Option 3</th></tr></label>'

    Thanks a million !!!

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    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>
    
    

  3. #3
    cuintheicu's Avatar
    New User

    Status
    Offline
    Join Date
    May 2009
    Posts
    7

    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.

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    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?
    Setting the label element to display:block allows it to completely fill the td element.
    In effect this makes the td element completely clickable.
    Last edited by HTML; 10-01-2009 at 09:39 AM.

  5. #5
    cuintheicu's Avatar
    New User

    Status
    Offline
    Join Date
    May 2009
    Posts
    7

    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();"/>&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.
    Last edited by HTML; 10-01-2009 at 09:20 AM.

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    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>
    
    ...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.
    Last edited by HTML; 10-01-2009 at 09:20 AM.

  7. #7
    cuintheicu's Avatar
    New User

    Status
    Offline
    Join Date
    May 2009
    Posts
    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 saviour LOL !

  8. #8
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    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.

  9. #9
    cuintheicu's Avatar
    New User

    Status
    Offline
    Join Date
    May 2009
    Posts
    7

    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 enough And right in the middle, in the very heart of the program, I have those tables you helped me out with

  10. #10
    cuintheicu's Avatar
    New User

    Status
    Offline
    Join Date
    May 2009
    Posts
    7

    Re: Labels for radio buttons inside a row

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

  11. #11
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    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.

  12. #12
    cuintheicu's Avatar
    New User

    Status
    Offline
    Join Date
    May 2009
    Posts
    7

    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



Tags for this Thread