Про элементы форм (fieldset)

Как-то поутихли среди верстальщиков холивары по поводу наносемантики кода, табличной/дивной вёрстки: во-первых, те, кто вжился в красивый html, осознал все выгоды от правильного кода, так чего и о чём спорить? Пусть лузеры продолжают делать каркасы и размечать модульные сетки таблицами, за грамотную вёрстку всё равно больше платят. А во-вторых уже, смешно сказать, подрастает поколение дизайнеров/верстальщиков, которые пришли в отрасль одновременно с css2 и уже высказанным мнением авторитетов по поводу таких холиваров, и эти ребята знают дивную вёрстку и по-другому и не верстали никогда. И уже даже не смешно, когда анализируя чью-то вёрстку, наблюдаем какую-нибудь одноячеечную таблицу в качестве главного контейнера для контента. Пусть их. У нас ещё поле непаханное для построения неправильных интерфейсов, и даже не суть важно, какие теги мы для этого используем.

Есть такой замечательный контейнер – groupbox fieldset, очень полезный контейнер, когда нужно показать, что несколько объектов (елементов форм) чем-то объединены. Глубокоуважаемый w3c нам сообщает, что:

The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.
Form controls can be grouped by enclosing them with the fieldset element. All controls within a given fieldset are then related.

В дефолтном оформлении такая группа объектов отделяется от остального мира бордером и имеет метку (legend). И тем забавнее регулярно встречать в веб-интерфейсах филдсеты, в которых живёт один объект :) Такая группа объектов из одного объекта, да. Т.е. это уже не столько к вопросу о семантике, сколько к вопросу о логике и здравом смысле.
Очередной пример с группами из одного объекта был обнаружен на уважаемом mixmarket.biz в отчётах РС Яндекса (т.е. ошибка вообще-то распространённая, но вот прямо сегодня подвернулся именно этот сайт в качестве примера).

mixmarket
mixmarket1

Здесь филдсеты содержат “группу объектов” из одной кнопки (а если заглянуть в код, то можно улыбнуться ещё шире: филдсеты на самом деле содержать списки из одного элемента списка, в котором — кнопка). Правда, к верстальщикам этот вопрос только отчасти, и то только в том случае, если они же и занимаются проектированием интерфейса для сайта MixMarket`а.


No related posts

RSS feed | Trackback URI

6 Comments »

Comment by Anton Naumov
2009-07-07 15:48:01

как говориться, ползуясь случаем хочу… а скажи мне Таня, как профессионал, как с минимальным гемороем сверстать отакое от

лейба поле
лейба поле
….. далее везде ….
кнопка ОК кнопка Канцел

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

Comment by nundesign
2009-07-07 15:55:28

сделай лейблу блочным объектом и width:(сколько надо); float:left;
и поля тоже.

 
 
Comment by Zigzag
2009-07-07 18:50:24

У меня вошло в практику любую форму оборачивать филдсетом. Даже если это поиск, состоящий из поля и кнопки.

 
2009-07-07 19:33:07

Есть еще такой момент: когда есть несколько блоков с похожей структурой, то проще повторить уже готовый и определенный в CSS код, чем расписывать CSS заново для данного элемента. Именно поэтому, скажем, внутри нижних филдсетов сидят одноэлементные списки (в списках уже прописаны границы, флоаты и прочее).

Касательно филдсетов — там ведь еще есть легенда, которая очень удобна для размещения примечаний. Семантика — да, может быть, страдает. Зато растет наглядность.

А одинокая «волшебная кнопка» в филдсете — это вообще шутка, унаследованная из прототипа интерфейса.

 
Comment by Boris
2009-08-04 11:12:01

И кто же все-таки победил – табличники или сторонники div-ового дизайна?

Comment by nundesign
2009-08-04 15:06:19

Да никто и не побеждал, верстают все как кому удобнее, наша команда верстает таблицами только табличные данные, в приходящих дизайнах (на редизайн или на интеграцию) тоже всё чаще встречаю дивные разметки, хоть и не всегда логически грамотные. Просто споры поутихли, потому что глупо спорить, и не модно.

 
 
Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.