Какое-то древнее дерьмо

Живёт тупо потому, что за хостинг уплачено на годы вперед

Создаём сложные формы без таблиц

8 февраля 2006 · Комментариев: 25 · HTML/CSS, Рецептарий

Вы когда-нибудь сталкивались с необходимость создания действительно сложных форм. А без таблиц? Я вот столкнулся. Долго мучался, под каждый случай дописывал кучу классов и хаков. А потом сел и подумал.

Подумал о замечательном теге fieldset.

В конце концов практически любую форму можно представить в качестве рядов с некоторым количеством ячеек. А что мешает управлять количеством и расположением оных, если они не скованы ограничениями таблицы? Посредством объединяющего элементы “ячейки” дива, например.

Для начала зададим общие установки:

form {
    width:95%;
    background:#F2F2F2;
    padding:20px;
    font-size:.8em
    }
form label {font-weight:bold}
form fieldset {
    width:100%;
    overflow:hidden;
    padding-bottom:20px;
    border:0 solid transparent
    }
.undecor {border:none}

Допустим, в нашей “таблице” встречаются “ряды” с одним, двумя, тремя и четырьмя элементами. Обратимся к важдому случаю через fieldset:

form fieldset div {float:left;display:inline}
form .two-columns div {width:50%}
form .three-columns div {width:33%}
form .four-columns div {width:25%}

Ширина формы может быть как фиксированной, так и гибкой. Пойдем по второму пути:

.two-columns input {width:90%}
form select {width:70%}
form textarea {width:100%}
form .two-columns textarea {width:90%}

А для пущего удовольствия добавим, так скажем, “пустые ячейки”:

form .four-columns .one-empty-left {margin-left:25%}
form .four-columns .one-empty-right {margin-right:25%}
form .four-columns .two-empty-left {margin-left:50%}
form .two-columns .one-empty-left {margin-left:50%}

Посмотрим, что теперь мы сможем с этим сделать? А вот и пример использования подоспел.

Разумеется, сделать можно много большее. Уж поверьте, я тем и спасаюсь :) Дописать стили для необходимых ситуаций не составляет труда. Никаких хаков, минимум экстра-разметки. Проверено в IE 5+, Opera 7+, Firefox 1.5, Mozilla 1.7.8, Netscape 7.1+. Пользуйтесь на здоровье.

Спасибо pepelsbey‘ю за советы и моральную поддержку.

Теги: ·

Комментариев: 25 ↓

Оставить комментарий