Стандартные и лучшие практики работы с несколькими / сложными столбцами с формами

Question

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

вот пример формы, с которой я имею дело

Как правильно написать HTML-разметку для этого? Если бы я обернул каждый элемент формы «DIV» для каждого столбца, потребовалось бы много «DIV» и стилей; и ширина для каждого столбца, который не повторяется.

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

Если ты на моем месте,

Как бы вы справились со столбцами с неповторяющейся шириной?

Answer 1

Стандартов для сложных форм не существует, но есть много постов в блогах, в которых утверждается, что они нашли идеальный способ решения этой проблемы. Большинство из них хорошо продуманы, но в конечном итоге вам нужно выбрать тот, который вам удобнее всего. У меня есть несколько предложений:

• Ознакомьтесь с формой смены адреса почтовой службы США. Это удивительно хорошо сделано

• Если у вас есть лотов форм, использование сетки, например, 960.gs, blueprint.css или YUI-сеток (дрожание), является простым способом реализации формы. Однако сеточные системы определенно считаются раздутыми, если это единственное место, где вы будете их использовать.

  • Выполните поиск по "безбалансовым формам" в Google. Вы увидите много разных реализаций. Выберите тот, который вам нравится.

Answer 2

Я бы, вероятно, поместил каждый элемент формы в элемент списка в неупорядоченном списке (я думаю, семантически, это список элементов ввода, которые необходимо заполнить.)

Затем я бы добавил к ним классы для определения местоположения, ширины и т. Д. - столбцам нужно было бы присвоить ширину и поместить их влево ...

так:

<ul>
   <li class="iName"><label for="name">Full name:</label><input name="name"/></li>
   <li class="iEmail"><label for="email">Email:</label><input name="email"/></li>
   etc etc...
</ul>

Я считаю, что это будет семантически правильным и наиболее доступным способом сделать это.