Создавая форму с плавающей точкой, каков общий дизайн, когда вам нужно 2 столбца, p и label?

Question

Я хочу оформить форму.

Форма имеет 3 раздела: информация о пользователе, доставка и выставление счетов.

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

Какую технику мне использовать?

Как это выглядит?

<div id="forms">
 <div id=contact>
      <div class=left>
               <p><label>Firstname<label><input type=text /></p>
      </div>
      <div class=right></div>
 </div>
 <div id=shipping></div>
<div id=billing></div>
</div>

Любые трюки с CSS, о которых я должен знать?

Answer 1

Я бы использовал наборы полей с легендами для отдельных блоков. Вы можете перемещать метки, оставленные без дополнительной информации, например

<form>
<fieldset>
<legend>block 1</legend>
<p>
<label>blah1</label><input type="text" name="blah1" value="" />
</p>
<p>
<label>blah2</label><input type="text" name="blah2" value="" />
</p>
</fieldset>
<fieldset>
<legend>block 2</legend>
<p>
<label>blah3</label><input type="text" name="blah3" value="" />
</p>
<p>
<label>blah4</label><input type="text" name="blah4" value="" />
</p>
</fieldset>
<p><button type="submit">submit</button></p>
</form>