Как правильно расположить название поля и само поле?

Question

код:

 #inputfield {
 width:300px;
 border: 2px solid #3f3f3f;
 height:30px;
 font-size:20px;
 padding-left:5px;
 color: #6f6f6f;
 }
 #inputname {
 margin-right:10px;
 font-size:20px;
 color: #3f3f3f;
 }


 <a id="inputname>Name:</a><input name="name" id="inputfield" type="text">
 <a id="inputname>Other Name:</a><input name="other" id="inputfield" type="text">
 <a id="inputname>Other Other Name:</a><input name="other_2" 
 id="inputfield" type="text">

Имена и поля выглядят неуместно. Я пытаюсь сделать форму организованной так, как она выглядит на этой странице:

  https://secure.hulu.com/signup

Answer 1

Что нужно изменить:

1. Не использовать id.Используйте class и .inputfield
2. Убедитесь, что для display установлено значение inline-block, чтобы браузер распознал width
3. Вы не хотите <a>теги.Вам нужны <label> теги.
4. Оберните каждую строку вашей формы в свой собственный <div> и используйте ее для установки высоты и интервала строки.