Need small help in HTML code

[ghosh22]

Hi all,
I am trying to build a website on my own. But I am not so efficiet in HTML coding but I'm trying to learn. I need a small help here. I am trying to make a form for my website where I'm going to use a Radio button for Male and Female. But the problem is its not being formatted. I wanted to put Male and Female like this:

Your Gender:     Male
                 Female
But I am getting:  *Male
*Female
(Replace * with radio button)

My code is like this:

<td><b>Gender:</b></td>
<td><input id="Gender" name="Male" type="radio" > Male<br>
</tr><tr>
<td><input id="Gender" name="Female" type="radio" > Female<br>
</tr><tr>

Please help. What should I write to format it?

[Fernando_Gomez]

You don't need to use a table to achieve that behavior. Table are not meant to be used for positioning. Try the following HTML:

<div class="control-group">
    <label class="label" for="gender">
        Your Genger
    </label>
    <div class="controls">
        <input type="radio" name="gender">Male</input> <br/>
        <input type="radio" name="gender">Female</input>
    </div>
</div>

Include the following CSS styles in the page header (or whereever's best for you) inse a style tag:

body {
    font-family: Arial;
    font-size: 14px;
    line-height: 16px;
}

.control-group .label {
    display: block;
    float: left;
    width: 150px;
    margin-top: 2px;
}

.control-group .controls {
    display: block;
    margin-left: 160px;
    min-height: 16px;
}

.control-group .controls input[type="radio"] {
    margin: 2px 5px 5px 0;
}

If the label is too big, chage the width in the CSS to 80px or 60px, the change the margin-left of the .controls class to 90px or 70px.

[JorgeM]

Tables are not really the appropriate use for this but I understand why you are choosing it... Due to the ease in creating a grid type layout.

Anyway, keep in mind that tr create rows and td are for cells. So something like this should work...

 <table>
 <tr>
   <td style="vertical-align:top"><b>Gender</b></td>
   <td>
        <input name="Gender" value="Male" type="radio"/ > Male<br />
        <input name="Gender" value="Female" type="radio" /> Female
   </td>
   </tr>
 </table>

This sample code is just based upon what you supplied. The most efficient layout and styling would require some addition thought and planning.

[ghosh22]

Thanks JorgeM..ur code does exactly what I wanted..
Thanks to Fernando also..

[ghosh22]

I am sorry..a new bug has been discovered..both radio buttons can be selected for one question? Like If I ask

Gender:  Male
         Female..

both option can be chosen..but I wanted something where only one option can be chosen..please I need help again.
I want to add that I am using more than one radio buttons..like Marital status etc..

[JorgeM]

You need to set the name attribute to a value that is the same for both input elements. See my example above compared to your original post.

[S3xyAndIKnow1t]

Simply give both of the radio butttons the same name:
<input type="radio" name="gender" />

[ghosh22]

I am sorry..a new bug has been discovered..both radio buttons can be selected for one question? Like If I ask

Gender:  Male
         Female..

both option can be chosen..but I wanted something where only one option can be chosen..please I need help again.
I want to add that I am using more than one radio buttons..like Marital status etc..

[ghosh22]

Hello..I did that already..result is same..I am using more than one questions using radio options

[ghosh22]

Hi Sorry..I was commenting out them my mistake..my new code looks like this now:

<td><b>Gender:</b></td>
<td><input id="Male" name="Gender" type="radio" >Male<br/>
    <input id="Female" name="Gender" type="radio">Female</td>
</tr> <!--

Is it ok now? Should I put Male and Female in my input ID?