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?

Recommended Answers

All 9 Replies

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.

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.

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

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

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.

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

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

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

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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.