Trying to Add Radio Inputs (+Labels) To An Example Form

Question

<style type="text/css">
body{
    font-family:Helvetica, sans-serif; 
    font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
    margin:0 auto;
    width:400px;
    padding:14px;
}
    /* ----------- basic ----------- */
    #basic{
     border:solid 2px #DEDEDE;
    }
    #basic h1 {
     font-size:14px;
     font-weight:bold;
     margin-bottom:8px;
    }
    #basic p{
     font-size:11px;
     color:#666666;
     margin-bottom:20px;
     border-bottom:solid 1px #dedede;
     padding-bottom:10px;
    }
    #basic label{
     display:block;
     font-weight:bold;
     text-align:right;
     width:140px;
     float:left;
    }
    #basic .small{
     color:#666666;
     display:block;
     font-size:11px;
     font-weight:normal;
     text-align:right;
     width:140px;
    }
    #basic input{
     float:left;
     width:200px;
     margin:2px 0 30px 10px;
    }
    #basic button{ 
     clear:both;
     margin-left:150px;
     background:#888888;
     color:#FFFFFF;
     border:solid 1px #666666;
     font-size:11px;
     font-weight:bold;
     padding:4px 6px;
    }
</style>

<div id="basic" class="myform">
  <form id="form1" name="form1" method="post" action="">
    <h1>Sign-up form</h1>
    <p>This is the basic look of my form without table</p>
    <label>Name
        <span class="small">Add your name</span>
    </label>
    <input type="text" name="textfield" id="textfield" />

    <label>Email
    <span class="small">Add a valid address</span>
    </label>
    <input type="text" name="textfield" id="textfield" />

    <label>Email
    <span class="small">Add a valid address</span>
    </label>
    <!-- Problem --->
    <input type="radio" name="something" id="r1" class="radio" value="1" /><label for="r1">One</label>
    <input type="radio" name="something" id="r2" class="radio" value="2" /><label for="r2">Two</label>
    <!-- Problem --->
    <button  type="submit">Sign-up</button>
    <div class="spacer"></div>


  </form>
</div>

I was given this example form, however I cannot add radio buttons without them being messed up.

Answer 1

You have them named the same as a text input - change name="textfield" to name="my_radio"

You also have no input for the email address, so your labels are out of sync with the inputs

Answer 2

@RoBorg: the problem I am referring to is the layout of the elements.

Answer 3

Your style #basic input is giving all your input fields within the form a width of 200px, including your radio buttons, create a new style like #basic input.radio and give the radio buttons an individual width like 20px (make sure you put this after the #basic input style), you will then also have to specify a smaller width for the labels that link with the radio buttons, add a class to them and reduce their width to something like 40px.

Then the radio buttons and their associated labels should line up with each other.

Answer 4

It is permitted, according to the spec, to put the form input elements inside the labels that refer to them, e.g.,

<label for="input">Label: <input type="radio" id="input" name="input" /></label>

See if that makes styling it all easier. (It should.)

Answer 5

@wayneaustin Thanks for your suggestion, could you please provide example source code?

Answer 6

You've got the form inputs all styled the same width (200px) and floating left, this applies to the radio buttons as well.

Something like this should get you heading in the right direction

<style type="text/css">
body{
    font-family:Helvetica, sans-serif; 
    font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
    margin:0 auto;
    width:400px;
    padding:14px;
}
    /* ----------- basic ----------- */
    #basic{
        border:solid 2px #DEDEDE;
    }
    #basic h1 {
        font-size:14px;
        font-weight:bold;
        margin-bottom:8px;
    }
    #basic p{
        font-size:11px;
        color:#666666;
        margin-bottom:20px;
        border-bottom:solid 1px #dedede;
        padding-bottom:10px;
    }
    #basic label{
        font-weight:bold;
        text-align:right;
        width:140px;
        float:left;
    }
    #basic .small{
        color:#666666;
        display:block;
        font-size:11px;
        font-weight:normal;
        text-align:right;
        width:140px;
    }
    #basic input{
        float:left;
        width:200px;
        margin:2px 0 30px 10px;
    }
    #basic button{ 
        clear:both;
        margin-left:150px;
        background:#888888;
        color:#FFFFFF;
        border:solid 1px #666666;
        font-size:11px;
        font-weight:bold;
        padding:4px 6px;
    }
    #basic input.radio{
        width:50px;
        margin:2px 0 30px 10px;
    }
    #basic label.radio {
    width:40px;
    text-align:left;
    }
</style>

<div id="basic" class="myform">
  <form id="form1" name="form1" method="post" action="">
    <h1>Sign-up form</h1>
    <p>This is the basic look of my form without table</p>
    <label>Name
        <span class="small">Add your name</span>
    </label>
    <input type="text" name="textfield" id="textfield" />

    <label>Email
    <span class="small">Add a valid address</span>
    </label>
    <input type="text" name="textfield" id="textfield" />

    <label>Email
    <span class="small">Add a valid address</span>
    </label>
    <!-- Problem --->
    <input type="radio" name="r1" id="r1" class="radio" value="1" /><label class="radio" for="r1">One</label>
    <input type="radio" name="r2" id="r2" class="radio" value="2" /><label class="radio" for="r2">Two</label>
    <!-- Problem --->
    <button  type="submit">Sign-up</button>
    <div class="spacer"></div>


  </form>
</div>

Answer 7

(within the style tags) add these new style rules:

#basic input.radio
{
    width:20px;

}
#basic label.radiolabel
{
    width:40px;
    text-align:left;
    line-height:24px;
}

in your html:

add a new class to each label, like so:

<!-- Problem --->    
<input type="radio" name="textfield" id="r1" class="radio" value="1" />
<label for="r1" class="radiolabel">One</label>    
<input type="radio" name="textfield" id="r2" class="radio" value="2" />
<label for="r2" class="radiolabel">Two</label>    
<!-- Problem --->

edit:added line-height to the label's styling :)

Answer 8

To fix your layout issue add the following CSS:

#basic input.radio { width:20px; }

This would fix the radio buttons' massive width - they were getting their width from the

#basic input { width:200px;}

was making ALL inputs 200px wide.

Overall, your application of IDs and classes is not really promoting reuse, but that's another issue.