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

Question

Как расположить сложную форму с несколькими полями в строке на экране?

Answer 1

Почему люди так склонны избегать столов?

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

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

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

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

Answer 2

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

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

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

Answer 3

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

и теги меня немного беспокоили. Вот небольшая модификация, которая может понравиться некоторым. Кроме того, вы найдете какой-то стиль «обертки» или «fieldset», очень необходимый для того, чтобы 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>

Answer 4

Есть много разных способов сделать это. Это все вопрос предпочтений. Обычно я делаю упаковщик 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>

Надеюсь, это поможет.

Answer 5

Pace KyleFarris, но я просто должен был дать Ben S голос за то, что у него хватило смелости упомянуть таблицы. Просто посмотрите на разнообразие CSS-решений на этой странице и в Интернете, чтобы найти смехотворно простую проблему. CSS может однажды стать хорошим решением, но на данный момент репликация простой сетки строк и столбцов, которую обеспечивает табличный тег, чрезвычайно сложна. Я провел бесчисленные бесполезные часы с этим предубеждением против таблиц для таких вещей, как форма. Почему мы делаем это для себя?

Answer 6

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

HTML:

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

CSS:

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

Я опустил пару строк CSS с помощью хаков Safari. Вы можете проверить живую версию этого кода.

Answer 7

Я предлагаю вам план CSS фреймворка . Взгляните на демонстрационную страницу .

Answer 8

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

Answer 9

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

Answer 10

Я предпочитаю использовать fieldset для группировки всех элементов и p для каждого поля формы.

<html>
<head>
<style type="text/css">
    fieldset {
        width: 500px;
        background-color: lightblue;
    }

    fieldset legend {
        font-weight: bold;
    }

    fieldset p {
        clear:both;
        padding: 5px;
    }

    fieldset label {
        text-align: left;
        width: 100px;
        float: left;
        font-weight: bold;
    }

    fieldset .Validator {
        color: red !important;
        font-weight: bold;
    } 

</style>
<head>
<body>
    <form>
        <fieldset>
            <legend>Data</legend>
            <p>
                <label for="firstName">First Name:</label>
                <input name="firstName" id="firstName" class="required" type="text" />
                <span class="Validator" style="display: none;">*</span>
            </p>
            <p>
                <label for="lastName">Last Name:</label>
                <input name="lastName" id="lastName" class="required" type="text" />
                <span class="Validator">*</span>
            </p>
        </fieldset>
    </form>
</body>
</html>