<rmcreative>

RSS

reForm: CSS-форма для любой разметки

5 марта 2008

Проблема

Хороший дизайн формы - головная боль дизайнера. Элементы должны быть достаточно большими, чтобы пользователю было удобно, но в то же время помещаться в супер-дизайн. Размеры обычной HTML-форму обынчо статичны.

Плавающая разметка может привести к тому, что элементы формы будут собраны слева в то время, как справа будет много пустого места. Таким образом из-за скопления элментов форму в левой части потеряется хорошо проработанный дизайн.

Верстальщики обычно справляются с этой неприятностью используя таблицы. Это приводит к сбиванию порядка табуляции и ухудшает доступность и удобство.

Возможное решение

Техника reForms - решение на CSS и Javascript, над которым работает автор. Несмотря на то, что оно не совсем готово, приведённый ниже код может быть полезен для разработчиков.

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

Пример

Посмотреть пример можно на этой странице. Заметьте, как ведут себя элементы при изменении размера окна браузера. Все скриншоты сделаны с одинми и теми же разметкой и CSS.

Большой контейнер

http://css.dzone.com/sites/all/files/images/large.img_assist_custom.png

Контейнер поменьше

http://css.dzone.com/sites/all/files/images/small.img_assist_custom.PNG

Совсем мелкий

http://css.dzone.com/sites/all/files/images/smallest.img_assist_custom.PNG

Планы на будущее

В данный момент 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

  1. №20
    KBA-KBA
    KBA-KBA 05.03.2008, 16:49:06

    отличный решение!

    правда JS там нет (и это хорошо)

  2. №21
    FX Poster
    FX Poster 05.03.2008, 17:01:13

    Сам давно хотел написать такое, но всё времени, да и HTML-код у меня попроще будет. :)

  3. №22
    Владимир
    Владимир 05.03.2008, 17:14:02

    Очень интересное решение!

    Хотелось бы еще увидеть поддержку fieldset. Что бы можно было сгруппировать поля. Например, поле Phone разместить ниже Age.

  4. №23
    ACID Jesus
    ACID Jesus 05.03.2008, 18:23:00

    Пока это работает не идеально - смысла в этом нет 8-)

  5. №24
    Sam
    Sam 05.03.2008, 20:03:48

    Можно развить подход.

  6. №1135
    Артем
    Артем 21.01.2009, 16:32:24

    "...используя таблицы. Это приводит к сбиванию порядка табуляции и ухудшает доступность и удобство."

    Поясните, чем же таблицы сбивают порядок табуляции?

  7. №1136
    Sam
    Sam 21.01.2009, 16:35:39

    Артем

    Иногда действительно сбивается, если не выставить tabindex.

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.