Формы с несколькими столбцами, никакими таблицами

Есть много разных способов сделать это. Это все вопрос предпочтений. Обычно я делаю упаковщик div, который содержит все строки, а затем блок div на строку, который содержит метку, ввод и валидатор. Вы можете использовать свойство CSS line-height, чтобы помочь вам с вертикальным выравниванием. Пример:

<div class="formWrapper">
<form>
   <div class="formItem">
      <label for="firstName">First Name:</label>
      <input name="firstName" id="firstName" class="required" type="text" />
      <span class="validator" style="display: none;">*</>
   </div>
   ... <!-- Rinse repeat -->
</form>
</div>

<style type="text/css">
   .formWrapper { width: 400px }
   .formWrapper .formItem { line-height: 35px; height: 35px; }
   .formWrapper label { width: 50px; }
   .formWrapper input { width: 100px; border: 1px solid #000; }
   .formWrapper .validator { padding-left: 10px; color: #FF0000; }
</style>

Надежда, которая помогает.

Почему люди так одержимы избеганием таблиц?

Таблицы не устаревают и должны использоваться при отображении контента, который логически принадлежит таблице.

Если ваша форма логически сгруппируйте таким образом, чтобы таблица была интуитивно понятной, пожалуйста, используйте таблицу.

Всегда думайте: «Какой самый чистый, простой и наиболее удобный способ достижения этого результата».

Если вам нужна текучая форма с переменным числом столбцы, то игнорируйте это.

Это можно было бы сделать с помощью CSS, установив для свойства «display» значение «inline» (поскольку элементы формы по умолчанию являются элементами уровня блока).

Выполнить поиск «макеты без таблиц». Многие сайты описывают форматирование с помощью CSS. Вот простое введение: http://www.htmlgoodies.com/beyond/css/article.php/3642151

Я предлагаю вам blueprint CSS framework ]. Взгляните на демонстрационную страницу .

This is what I usually use when I need to design pretty complex forms.

HTML:

<fieldset>
    <legend>Consent group</legend>
    <form>
        <fieldset class="nolegend">
            <p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p>
            <p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p>
            <p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p>
     </fieldset>
        <fieldset class="nolegend">
            <p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p>
        </fieldset>
        <input type="submit" value="Submit" />
    </form>
</fieldset>

CSS:

body, input, textarea, select {
    font: 1em Arial, Helvetica, sans-serif;
}
input, textarea, select { font-size: .8em }
fieldset,
fieldset legend {
    background-color: #EEE;
}
fieldset {
    border: none;
    margin: 0;
    padding: 0 0 .5em .01em;
    top: 1.25em;
    position: relative;
    margin-bottom: 2em;
}
fieldset fieldset {
    margin: 0 0 1em 0;
}
fieldset legend {
    padding: .25em .5em 0 .5em;
    border-bottom: none;
    font-weight: bold;
    margin-top: -1.25em;
    position: relative;
    *left: -.5em;
    color: #666;
}fieldset form,
fieldset .fieldset {
    margin: 0;
    padding: 1em .5em 0 .5em;
    overflow: hidden;
}
fieldset.nolegend {
    position: static;
    margin-bottom: 1em;
    background-color: transparent;
    padding: 0;
    overflow: hidden;
}
fieldset.nolegend p,
fieldset.nolegend div {
    float: left;
    margin: 0 1em 0 0;
}
fieldset.nolegend p:last-child,
fieldset.nolegend div:last-child {
    margin-right: 0;
}
fieldset.nolegend label>span {
    display: block;
}
fieldset.nolegend label span {
    _display: block;
}

I omitted couple lines of CSS with Safari hacks. You can check out live version of this code.

поля ввода по умолчанию являются встроенными. Таким образом, вы можете просто использовать их без
. Другой вариант, если вы хотите, чтобы они правильно выстроились, выглядит следующим образом:

<div id="col1" style="float: left;>
    <input type="text" name="field1" />
    <br />
    <input type="text" name="field3" />
</div>

<div id="col2" style="float: left;>
    <input type="text" name="field2" />
    <br />
    <input type="text" name="field4" />
</div>

Я предпочитаю немного более семантический способ, используя список определений :

<dl class="form">
    <dt><label for="input1">One:</label></dt>
    <dd><input type="text" name="input1" id="input1"></dd>
    <dt><label for="input2">Two:</label></dt>
    <dd><input type="text" name="input2" id="input2"></dd>
</dl>

Затем ваш CSS:

dl.form {
    width:100%;
    float:left;
    clear:both;
}
dl.form dt {
    width:50%;
    float:left;
    clear:left;
    text-align:right;
}
dl.form dd {
    width:50%;
    float:left;
    clear:right;
    text-align:left;
}

Это должно создать форму с центром на странице , с метками в левом столбце и входами в правом

Посмотрев на множество различных решений, я нашел примеры на этой странице (в частности, из «Fatal»?) Одними из самых полезных. Но меня немного беспокоили обширные

и теги. Итак, вот небольшая модификация, которая может понравиться некоторым. Кроме того, вы обнаружите, что какой-то стиль «обертки» или «набора полей» очень необходим, чтобы не допустить воздействия float на другой HTML. См. Примеры выше.

<style>
.formcol{
float: left;
padding: 2px;
} 
.formcol label {
font-weight: bold;
display:block;} 
</style>

<div class="formcol">
    <label for="org">organization</label>
    <input type="text" id="org" size="24" name="org" />
  </div>
 <div class="formcol">
    <label for="fax">fax</label>
    <input type="text" id="fax" name="fax" size="2" />
  </div>
  <div class="formcol">
    <label for="3">three</label>
    <input type="text" id="3" name="3" />
    <label for="4">four</label>
    <input type="text" id="4" name="4" />

    <label for="5">five</label>
    <input type="text" id="5" name="5" />
  </div>
 <div class="formcol">
    <label for="6">six</label>
    <input type="text" id="6" name="6" />
  </div>