reForm: CSS-форма для любой разметки
5 марта 2008
Проблема
Хороший дизайн формы - головная боль дизайнера. Элементы должны быть достаточно большими, чтобы пользователю было удобно, но в то же время помещаться в супер-дизайн. Размеры обычной HTML-форму обынчо статичны.
Плавающая разметка может привести к тому, что элементы формы будут собраны слева в то время, как справа будет много пустого места. Таким образом из-за скопления элментов форму в левой части потеряется хорошо проработанный дизайн.
Верстальщики обычно справляются с этой неприятностью используя таблицы. Это приводит к сбиванию порядка табуляции и ухудшает доступность и удобство.
Возможное решение
Техника reForms - решение на CSS и Javascript, над которым работает автор. Несмотря на то, что оно не совсем готово, приведённый ниже код может быть полезен для разработчиков.
Эта заметка описывает разметку для элементов форму, которая будет занимать всё доступное ей пространство. Это позволяет дизайнеру создать двух или четырёхколоночную разметку для формы без всяких последствий для общего дизайна. Также пользователь может менять размеры окна и шрифта. Форма будет вполне пригодной для использования.
Пример
Посмотреть пример можно на этой странице. Заметьте, как ведут себя элементы при изменении размера окна браузера. Все скриншоты сделаны с одинми и теми же разметкой и CSS.
Большой контейнер
Контейнер поменьше
Совсем мелкий
Планы на будущее
В данный момент reForm измется динамически в зависимости от свободного места, но пока не все элементы ведут себя так, как надо (чекбоксы, радиокнопки и textarea). Также ведутся работы над JavaScript-фреймворком, который позволит генерировать необходимую разметку.
Код
.fieldForm div .fieldItemValue { padding-left:10px; } .fieldForm .fieldItemLabel { width:5em; float:left; } .fieldForm .fieldItemLabel label { font-weight:bolder; white-space:nowrap; } .fieldForm .field100Pct, .fieldForm .field50Pct { min-width: 200px; } .fieldForm .field100Pct .fieldItemValue, .fieldForm .field50Pct .fieldItemValue { display:inline; } .fieldForm .field100Pct .fieldItemValue input { width:80%; min-width:200px; } .fieldForm .field50Pct .fieldItemValue input { width:60%;min-width:100px; } .fieldForm .field50Pct { float:left; width:49.9%; } .fieldForm div div input { margin-bottom:10px; margin-right:15px; } .clear {clear:both;}
<div class="fieldForm" id="fieldForm" > <div class="field50Pct"> <div class="fieldItemLabel"> <label for="field1">First Name:</label> </div> <div class="fieldItemValue"> <input type="text" id="field1" name="field1" value="form field 1 value" /> </div> </div> <div class="field50Pct"> <div class="fieldItemLabel"> <label for='field2'>Last Name:</label> </div> <div class="fieldItemValue"> <input type="text" id="field2" name="field2" value="form field 2 value" /> </div> </div> <div class="clear"></div>
Данный подход не совершенен. Пока не учитываются элементы select и другие поля input, но возможно это решение будет для вас хорошим началом для разработки своей универсальной разметки.
Данная заметка является переводом. Оригинал
Комментарии RSS по email OK
отличный решение!
правда JS там нет (и это хорошо)
Сам давно хотел написать такое, но всё времени, да и HTML-код у меня попроще будет. :)
Очень интересное решение!
Хотелось бы еще увидеть поддержку fieldset. Что бы можно было сгруппировать поля. Например, поле Phone разместить ниже Age.
Пока это работает не идеально - смысла в этом нет 8-)
Можно развить подход.
"...используя таблицы. Это приводит к сбиванию порядка табуляции и ухудшает доступность и удобство."
Поясните, чем же таблицы сбивают порядок табуляции?
Артем
Иногда действительно сбивается, если не выставить tabindex.