Создание больших встроенных форм

Question

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

В настоящее время я использую formee (стиль и сетка 960), которые я попытался превратить в встроенную форму, а не в строку (по умолчанию). К сожалению, он становится очень грязным и выглядит ужасно.

Чтобы дать визуальное представление о том, что я хочу архивировать, я создал макет.

Как я могу решить проблему?

Answer 1

Вот такой пример: http://jsfiddle.net/PhilippeVay/gaegv/2/

HTML:

<fieldset class="group"> 
    <legend>First logical group of items</legend> 
    <div class="col"> 
     <p class="text"> 
      <label for="label1">Field label 1</label> 
      <input type="text" id="label1" /> 
     </p> 
     <p class="text"> 
      <label for="label2">Field label 2</label> 
      <input type="text" id="label2" /> 
     </p> 
     <p class="text"> 
      <label for="label3">Field label 3</label> 
      <input type="text" id="label3" /> 
     </p> 
    </div> 
    <div class="col"> 
     <p class="text"> 
      <label for="label4">Field label 4</label> 
      <input type="text" id="label4" /> 
     </p> 
     <p class="text"> 
      <label for="label5">Field label 5</label> 
      <input type="text" id="label5" /> 
     </p> 
     <p class="text"> 
      <label for="label6">Field label 6</label> 
      <input type="text" id="label6" /> 
     </p> 
    </div> 
</fieldset> 

<div class="group fieldset-like"> 
    <p class="textarea"> 
     <label for="label7">Field label 7</label> 
     <textarea id="label7">some text (test font-size)</textarea> 
    </p> 
</div> 

<div class="group"> 
    <fieldset class="col"> 
     <legend>Third legend</legend> 
     <p class="text"> 
      <label for="label8">Field label 8</label> 
      <input type="text" id="label8" /> 
     </p> 
     <p class="text"> 
      <label for="label9">Field label 9</label> 
      <input type="text" id="label9" /> 
     </p> 
     <p class="text"> 
      <label for="label10">Field label 10</label> 
      <input type="text" id="label10" /> 
     </p> 
    </fieldset> 

    <fieldset class="col"> 
     <legend>Fourth legend</legend> 
     <p class="text"> 
      <label for="label11">Field label 11</label> 
      <input type="text" id="label11" /> 
     </p> 
     <p class="text"> 
      <label for="label12">Field label 12</label> 
      <input type="text" id="label12" /> 
     </p> 
     <p class="text"> 
      <label for="label13">Field label 13</label> 
      <input type="text" id="label13" /> 
     </p> 
    </fieldset> 
</div> 

CSS:

.col { 
    float: left; 
    width: 36%; 
    padding: 2%; 
    background: #EEE; 
} 
.col + .col { 
    margin-left: 10%; 
} 
.col:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

fieldset, 
.fieldset-like { 
    margin: 0; 
    padding: 0; 
    border: 1px solid darkgreen; 
} 

.group { 
    margin: 20px 10px; /* must come after .fieldset-like rule */ 
} 

label { 
    font-weight: bold; 
    cursor: pointer; 
} 

.text { /* because .radio and .checkbox are SO different! */ 
    clear: both; 
} 
.text label, 
.textarea label { 
    display: inline-block; 
    width: 39%; 
    margin-right: 1%; 
    text-align: right; 
    background-color: lightgreen; 
} 
.text input, 
.textarea textarea { 
    display: inline-block; 
    width: 55%; 
    border: 1px solid darkgreen; 
    padding: 4px; 
} 

.textarea { 
    width: auto; 
    padding: 2% 4% 2% 4%; 
} 
/* label and textarea: also see above */ 
.textarea label { 
    width: 14.04%; /* 39% of 36% Yeah I know... */ 
    margin-right: 0.36%; /* 1% of 36% */ 
    background-color: lightgreen; 
    vertical-align: top; /* otherwise label is at the the bottom of a very high neighbor */ 
} 
.textarea textarea { 
    width: 74%; 
} 

• класс по абзацу позволяет стилизовать ярлык в соответствии с характером элемента формы (вы не можете стилизовать предшествующего брата или родителя - в соответствии с элементом, который появляется после него в DOM, в 2012 году и в CSS3 по крайней мере;)).

• вы можете использовать атрибуты селектора с современными браузерами: input[type="text"], но писать в скрипте нужно больше, а затем вы должны учитывать текст, пароль и элемент выбора в HTML 4.01, а в HTML5 добавить адрес электронной почты, номер, tel и т. Д. ll умножьте длину ваших селекторов. Или вы можете использовать класс для родителя, чтобы различать и группировать элементы формы. Бывшему необходимо, если вы пишете общую таблицу стилей сброса для тысяч коллег, последняя более эффективна, если вы тоже пишете код HTML.

• .group содержит 2 .col, это не имеет значения, если это столбцы в полевом поле или поля в div.

• расчет ширины элемента, имеющего ширину, означает умножение. Нарисуйте его на листе бумаги и запишите каждую ширину. Это позволит вам не забывать об одном;)

• Прокладка в процентах, похоже, не работает для ввода. Не уверен в этом.

• ширина на select проще и кросс-браузер, если добавить box-sizing:

  select { 
  -moz-box-sizing: content-box; /* Firefox, meet padding ... */ 
      box-sizing: content-box; /* IE8+ */ 
      padding: 4px 6px; /* example */ 
  } 
  

Answer 2

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

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