Вы когда-нибудь сталкивались с необходимость создания действительно сложных форм. А без таблиц? Я вот столкнулся. Долго мучался, под каждый случай дописывал кучу классов и хаков. А потом сел и подумал.
Подумал о замечательном теге 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‘ю за советы и моральную поддержку.
ну, поддержка скорее аморальная, в виде нытья:
“ну уберии эти широкие серые поляя…”
а что SELECT’ы фиксированные — молодец :)
кхм… будем пользовать :)
почему то в моей читалке твои метки не отображаются
а что SELECT’ы фиксированные — молодец :)
Не фиксированные, а резиновые ;)
почему то в моей читалке твои метки не отображаются
У меня тоже. Так и задумано.
зачем?.. :/
А зачем они там?
Увы, случай, когда описание поля располагается над ним—несложный. А вот если описание слева, то таблицы выигрывают с хорошим счетом, хоть и неохота. :(
Michael, я как раз над ним работаю. Как появится минутка свободного времени—доведу до ума и обязательно поделюсь с остальными.
Крута =)
Респект, таблицы умирают
Sarry, спасибо, будет еще много вкусного :)
А чего метки по назначению не работают?
Sarry, банальная лень :(
фигня, на xhtml.ru это лучше описано.
Рад за вас.
Кстати, инпуты можно хранить в т.ч. и внутри лэйблов:
http://webmascon.com/temp/max/input-inside/
(валидатор позволяет)
Я просмотрел твои примеры, но что-то не заметил там такой реализации. В принципе, иногда бывает полезно.
Макс, а это идея. Гораздо легче удастся позиционировать лейблы и инпуты. Супер, обязательно попробую имплементировать.
Присоединяйся к обсуждению:
http://www.webmascon.com/forum/viewtopic.php?p=12458#12458
Кстати, сам пример я тоже обновил (подозреваю, что ты видел старую версию)
P.S. Вставка ссылок в Opera 8.53 глючит.
http://webmascon.com/temp/max/input-inside/
Уже присоединился :)
Видел. :)
Вечером куплю кефира, батон — и ещё что-нибудь со своей формочкой сделаю.
“Бутылка кефира, полбатона..” ©
Ага. Ты правильно меня понял. В моём случае работает вся строка песни (т.е. и «… а я сегодня дома-а-а…»)
”…Увы, случай, когда описание поля располагается над ним—несложный. А вот если описание слева, то таблицы выигрывают с хорошим счетом, хоть и неохота. :(…”
Достаточно описать отдельный блок на пару “комментарий”+”поле (input например)” с position:relative, а уже внутри блока “разрулить” “комментарий” и “поле” при помощи абсолютного позиционирования “left” и “right” соответственно.
В ие7 окошко браузера потягай.. скачут поля…
А так риспект ;)
andtim, это из-за кривого пересчета процентов в IE. Фиксится элементарно.
Делал подобное http://gansik.tagv.com/2006/11/css.html
У меня можно и “если описание слева”, и названия классов вида “three-columns”, “two-columns”, “one-empty-left” etc. я не использую. С такими названиями классов задача сильно упрощается IMHO.