Попытка добавить радиовходы (+ метки) в примерную форму

Вы назвали их так же, как текстовый ввод - замените name = "textfield" на name = "my_radio"

У вас также нет ввода для адреса электронной почты, поэтому ваши ярлыки не синхронизированы с вводом.

Ваш стиль #basic input дает всем вашим полям ввода в форме ширину 200 пикселей, включая ваши переключатели, создает новый стиль, например #basic input.radio, и дает переключателям индивидуальную ширину, например 20 пикселей (убедитесь, что вы поместили это после стиля ввода #basic) вам также нужно будет указать меньшую ширину для меток, которые связаны с переключателями, добавить к ним класс и уменьшить их ширину примерно до 40 пикселей.

Затем переключатели и связанные с ними метки должны выровняться друг с другом.

В соответствии со спецификацией разрешено помещать элементы ввода формы внутри меток, которые на них ссылаются, например,

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

Посмотрим, облегчит ли это укладку. (Должно.)

У вас есть входы формы, имеющие одинаковую ширину (200 пикселей) и плавающие влево, это также относится к переключателям.

Что-то вроде этого должно направить вас в правильном направлении

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

(в тегах стиля) добавьте эти новые правила стиля:

#basic input.radio
{
    width:20px;

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

в вашем html:

добавьте новый класс к каждой метке, например:

<!-- 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: добавлена ​​высота строки к стилю метки :)

Чтобы исправить проблему с макетом, добавьте следующий CSS:

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

Это исправит огромную ширину радиокнопок - они получали свою ширину из

#basic input { width:200px;}

делал ВСЕ входы шириной 200 пикселей.

В целом, ваше приложение идентификаторов и классов на самом деле не способствует повторному использованию, но это уже другая проблема.