Выравнивание полей формы с помощью CSS

[jeje]

Поаплодировал бы. Уже на втором шаге становится понятно как все просто то.Спасибо

[Stalker_RED]

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

чтобы прижать поля к заголовкам…
Добавим в CSS обтекание

это круто!

[webbolt]

C текущими ограничениями задачи решение справляется на 5.
Но чем не угодили таблицы?

[jeje]

Некоторые framework'и, например Zend. Сами отрисовывают форму но не использую таблицы. Проще грамотно написать CSS, чем переопределять.

[lasthand]

Спасибо за отличный ответ. Сохранил в шкатулке аргументов для использования.
Хоть Zend и не использую, но таблицы в сложных динамически изменяющихся формах весьма напрягают, а вот пояснять это на словах с примерами обычно лень, поэтому не хватало как раз такого простого и ясного аргумента. :)

[Kinday]

А как же встречный вопрос «С каких пор форма — это табличные данные?»*
_______
^{* Хотя, к сожалению, это обычно попахивает холиваром.}

[labria]

Ну попахивает… а что сделать если нормальные доводы часто пахнут либо минусами, либо холиваром =)

[Grundiss]

ну тат как раз таки можно трактовать форму как таблицу: имя поля — значение поля

[Kinday]

Я сначала об этом подумал, но потом решил, что такое определение притянуто за уши.

Однако, когда я нахожу независимое повторение своих мыслей, я задумываюсь пуще прежнего… (=

Итак, W3C какбэ говорит нам:

The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.^{источник}

Официально признаю: я был неправ.

[Kinday]

Ещё немножко из стандартов. HTML Techniques for Web Content Accessibility Guidelines 1.0 гласит:

5.3 Не используйте таблицы для создания макета (каркаса), если таблица, будучи приведённой к линейному виду, не имеет смысла. («линейный вид» — это содержимое ячеек таблицы в виде строки, порядок содержимого определяется порядком появления ячеек в вёрстке — прим. перев.)
5.4 Если таблица используется для создания макета (каркаса), то не используйте структурную разметку с целью визуального форматирования.
К примеру, содержимое элемент <th> (table header) обычно отображается отцентрованным и полужирным начертанием. Если же ячейка не является заголовком, то следует использовать CSS или атрибуты элемента (а не ставить элемент <th> вместо <td> — прим. перев.)

Соотнеся предыдущую цитату и эту, можно сделать вывод, что мы имеем право без зазрения совести сверстать форму используя таблицы, однако никто не запрещает сделать то же самое с помощью блоков и CSS.

С приветом, ваш холивароненавистник. (:

[Snowcore]

В Zend_Form используется связка тегов dl, dt,dd

[piumosso]

Ну не любят некоторые таблицы, и все)
Если серьезно, тыблицами получается больше тегов.

[DnV]

Если закрывающие теги не использовать, то меньше.
А вообще, ИМХО слишком очевидная вещь, чтобы на неё тратить 6 скринов и столько текста ) Хотя всё-равно спасибо автору за труд.
Ещё наверно можно решить проблему разделив метки и поля по двум блокам.

[piumosso]

Закрывать или нет — это все равно, т.к. речь идет о элементах, а не их текстовом представлении

[DnV]

У вас в записи 17 тегов. Таблицей будет 14. Объясните, пожалуйста, подробнее о чём вы говорите.

[piumosso]

А давайте посчитаем открывающие теги. Ведь даже если нет закрывающих, то они подразумеваются и на количество DOM элементов не влияют. Если вы хотите применять лейблы, то в данном решении будет меньше на 2 тега на каждое поле.

[sfghelios]

спецам, может, и очевидное… а начинающим — даст понимание, как сделать именно так и что такое float и clear. Доступно, наглядно, просто.

[Stalker_RED]

есть хорошая статья на эту тему

[yoyurec]

>Ещё наверно можно решить проблему разделив метки и поля по двум блокам.
просто убило!!! ((( верстаем дивами, а мыслим таблицами?

[DnV]

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

[aubt]

сто раз уже поднималась эта тема, ну ё-моё.

вот Вы все сделали таблицами, на сайте куча форм.
заказчик: надо сделать label сверху, а input шириной 100%.

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

автору топика надо в css файле 1 строчку заменить.

[dimaniko]

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

[BisnoyZakat]

не будьте так уверены.

[dimaniko]

А альтернативы нет. Все эти забавы с тремя одинаковыми инпутами не стоят электричества, которыми они написаны. Как только появляются задачи из реальной жизни — здравствуй таблица.

[piumosso]

А это — вполне пример из жизни)

[dimaniko]

Не из моей. ;]

[aubt]

бросьте Вы чепуху говорить.

[dimaniko]

Чепуху?

А давайте представим, что второй инпут будет шириной в два символа, потому что это как будто возраст и нефиг ему таким длинным быть. Ваш ход? Или, вернее — ваш код?

[aubt]

Хочу заметить, Вы заставляете меня решать задачу в контексте чужого кода, который, кстати, меня не совсем устраивает.

Вот ответ:

.field input[type=text] {
width: 14em;
}
.field input.age {
width: 4em;
margin-right: 10em;
}

Если он Вас устраивает, пожалуйста, верните карму — без тегов писать очень неудобно.

[dimaniko]

Вы знаете — совершенно не устраивает. Это IE7:



Я знаю в чем проблема и фикс в состоянии придумать, но не в этом дело. Все это игры в песочнице. Я прошу прощения за такой элементарный пример — не хотел никого оскорблять, поторопился. Надо было промолчать, как обычно.

Для описания реальной проблемы мне нужно потратить час, как минимум. Написать ТЗ, практически. Я не готов сейчас этим заниматься. И уж точно, никто из читателей не станет тратить свои часы даже на ознакомление с документацией.

Карму вернул — я хотел лишь выразить отношение, но не ограничивать функционал.

[aubt]

Я знаю, что предложенное мной решение не кроссбраузерное из-за [type=text], но, как Вы правильно сказали, это легко исправляется (как я полагал тут была важнее принципиальная, а не техническая реализация).

Однако, не соглашусь с Вами, это не игры в песочнице. Я очень много делал форм, в т.ч. очень сложных и никогда не прибегал к таблицам.

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

[dimaniko]

1. Не из-за [type=text].

2. Бестабличные решения «любой ценой» — не окупаются.

Я могу предположить откуда непонимание. Вы, вероятно, делали много форм для разных проектов в одну-две итерации. Моя проблема — в постоянной поддержке и дополнениях для многолетних проектов. У меня нет возможности «за месячишко» проапдейтить весь CSS и оттестировать так, чтобы все работало.

[aubt]

1. Не из-за [type=text]

Хорошо, перефразирую: как минимум из-за [type=text]. Это не важно в текущем контексте.

«за месячишко» проапдейтить весь CSS

Это расхожее заблуждение, каюсь, раньше рассуждал так же!
При постоянной плотной работе с «бестабличной» версткой решения в общем случае уже известны и оттестированы. И при правильном построении архитектуры css-файлов «весь CSS» апдейтить не придется, т.к. отвечающий за расположение элементов формы код локализован.

Что касается «поддержки и дополнений многолетних проектов», тут соглашусь, если Вы делаете формы руками, то, конечно уже абсолютно не важно, используете ли вы таблицы или нет, потому что проблема скрыта гораздо глубже.

Я убежден, что любая форма — это проекция некоторой сущности в программе на ее интерфейс и, соответственно, ни одна форма не должна строится «руками». Изменять программно строящиеся формы проще всего средствами CSS, в случае бестабличной верстки. Если в проекте таблицы, придется либо, в лучшем случае, менять xslt-шаблоны генерации форм, в самом же печальном случае, менять код программы, что вообще недопустимо.

[avorobiev]

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

[aubt]

С элементами формы ситуация вообще сложная, т.к. они по-разному отрисовываются в разных браузерах почти всегда.
Поэтому, я предпочитаю работать с оберткой элементов в div или dl dt dd (потому и сказал выше, что код меня не совсем устраивает).

Соответственно, думаю, проблема с выпадающим списком решается установкой ему значения width: 100%, а нужную ширину и отступ надо задать его контейнеру. Также через обертки намного проще добиться кросс-браузерности.

[ipod]

Uni-From (http://sprawsm.com/uni-form/)
Все примеры из реальной жизни решал или с помощью Uni-From с небольшими допиливаниями или с помощью своих CSS без таблиц.

[aubt]

я собственно о том же и намекнул.
за свою жизнь сверстал туеву хучу форм «из реальной жизни» и ни разу даже в голову не пришло сказать «здравствуй таблица».
бред какой-то.

[dimaniko]

Ваш пример не дотягивает по сложности даже до того, что в постинге. Фиксированная колонка — проблем с ресайзом нет, потому что нет ресайза. При попытке «зарезинить» колонка с лейблами плюет на контент и занимает половину экрана по-любому.

[ipod]

Почему же, я кое-где, например, использую ширину в 35% для лейблов, то есть всё тянется и занимает не половину экрана, а 35% от родительского элемента.
Опять же по этим 35% удобно выравнивать другие элементы (кнопки, подсказки и т.д.).

P.S. В примере sprawsm.com/uni-form/ label шириной 45%.

[dimaniko]

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

[ipod]

С таблицами будет не так?
Вообще говоря это дело верстальщика, не нужно делать форму на 100% от экрана.
В приведенных вами случаях нет никаких преимуществ таблиц над дивами.

[SowingSadness]

У меня разрешение экрана 2560×1600 — 26 дюймовый монитор.
Представляете какая маленькая у вас таблица регистрации для меня?: р

имхо — не люблю строго заданные размеры на сайтах… они больно мелкие для меня -((

p.s.
zoom спасает

[ipod]

Представляю )
Но делать сайты на 100% от ширины экрана надо уметь, иначе можно получить плохо читаемый и понимаемый контент.
Не вижу ничего плохого ни в фиксированных, ни в резиновых сайтах. Просто и то и другое надо делать с умом.
Предпочитаю делать плавающую ширину с ограничениями по максимальной и минимальной ширине, если нет других условий по дизайну.

[piumosso]

Как вы правильно говорите) Мне попадалиь люди, требовавшин, например, чтобы сайт был резиновым при том, что ни макет этого не подразумевал, ни объективных причин этого не было)

[BisnoyZakat]

это ваш выбор, не нужно его навязывать другим. Верстаете подобное таблицами, верстайте с большим удовольствием. Я вообще не понимаю как можно разводить холивар из-за таблиц и не таблиц… нравятся таблицы, верстаете ими, а кому-то ими не нравится, кто-то хочет семантическую вёрстку и не просто потому что это для кого-то модно, а потому что нужно. И на будущее не думайте, что у вас товарищ опыта больше чем у других.

[dimaniko]

Причем тут холивар? Я хочу не победить (Митьки никого не хотят победить), а найти решение. Просто меня разочаровал (опять) шум вокруг хорошего, но очень элементарного решения.

И не считать себя опытнее других на фоне этих комментов очень сложно.

[BisnoyZakat]

Извините конечно, но вы разницу не чувствуете где у вас есть опыт и где его нет. Я понимаю таблицами вы верстать умеет большой молодец. Но если вы не понимаете в чём смысл отказа от таблиц и в чём преимущество максимального использования css, то лучше воздержаться вообще в чужой теме свои мысли продвигать. Когда будет топик как сверстать форму таблицами вы будете блестать своим опытом, а в данной теме вы ничего не понимаете. к сожалению.

[dimaniko]

Опыт? Да больше половины комментирующих не знают, что такое hasLayout или верстка одной формы для разных языков.

С чего вы взяли, что я не вижу смысла в отказе от таблиц? Откуда вы взяли, что я не использую CSS «максимально»? Почему я не должен воспринимать эти фразы как хамство с вашей стороны?

Я не хочу верстать таблицами. Мне неудобно. Но супер-семантика вне ваакума статей на хабре еще не работает.

[BisnoyZakat]

К сожалению работает. Месье.

[dimaniko]

Дада. Не забудьте покормить единорогов и вымыть радугу.

[webbolt]

Семантика в таких вещах — это философия в программировании. Безусловно
А на практике, главное это результат.

Примерная аналогия — можно прийти в загс в костюме, а можно в джинсах и футболке. Результат будет одним — ты станешь женатым человеком (если за этим правда приходил туда :)). Вопросы соответствия нормам абстрактны так же как и сами нормы (пример — течения панков, готов и эмо в музыке).

[webbolt]

P.S. Безусловно желательно соблюдать семантику в применении тегов address, dl, dt, но пользователь этого не видит, а поисковик по любому проиндексирует.

[ernt]

У вообще никакой семантики нет, если что. Так что в данном случае правильнее всего .

[ernt]

У div вообще никакой семантики нет, если что. Так что в данном случае правильнее всего dl.

[Stalker_RED]

можно (а скорее даже нужно) сделать dt captcha и, если она не вписывается в дизайн, сделать ее скрытой.
<dt class="hide">captcha</dt>

за одно accessability можно повысить, если не скрывать ее в соответствующей css-ке
(media=«aural, braille»)

[remal]

С чего бы это? Описание значения — значение.

[remal]

Красивое решение. Одно замечание: атрибут for у тега <label> должен совпадать с id элемента формы, а не с его атрибутом name.

[piumosso]

Спасибо, пропустил, поправлю)

[piumosso]

Удачи)))

[zhukov]

Как добрались :-)?

[Dalero]

А мне понравилось! Музыка спокойная и главное — помогает отвлечься )

[vitalikk]

Поработаю немного за КО, пока он занят в другом топике, и предложу Вам написать что-то интересное в Песочницу =) С удовольствие схожу к Вам на премьеру ;)

[milax]

HTML — это не язык программирования :)

[milax]

верстают

[milax]

наверное, просто у Вас такая карма

[micle]

Вероятно, потому что они по верстке?

[micle]

«Вы прекрасная публика! Спасибо, спасибо.»

[iAndrey]

Зачем вы так? Некоторые в подобной ситуации скрипя зубами используют таблицы.
Кто не знал — узнал, остальные прошли мимо.

[piumosso]

Уважаемый diggy. Если Вы считаете, что пост не актуален для Вас, зачем вы пишете комментарии?

[piumosso]

Пасиб)

[vitalikk]

Сказал же, что голоден. Не кормите.

[chetzof]

Негоже так с троллями цацкаться.

[timonstr]

Сходите перекусите.
Я «пользовался таблицами стилей» и до сих пор пользуюсь. Верстаю уже не первый год.
Тут простое и элегантное решение, освежающее память. Да, это не изобретение велосипеда и не прорыв в верстке. Но зато автор напомнил, что можно быть проще. Порой бывает, что так навалом работы, что сам себе все усложняешь.

[timonstr]

нет, я знаю еще тэги.

[timonstr]

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

[gloomkolomna]

Спасибо!
Взял на заметку

[despoth]

Очень изящное решение. Спасибо, буду использовать. И не только на формах — вы навели на кое-какие мысли расставлять элементы и в других областях с помощью схожего метода.

[SatOkh]

Выравнивание полей формы помощью CSS — не хватает предлога «с»

[piumosso]

Спасибо

[ItHamster]

а мне понравилось, простенько и со вкусом

[remal]

Кстати, в этом способе нельзя делать перенос строки в описании поля. Иначе большой line-height сделает не самую приятную картинку. Поэтому таблицы все равно универсальнее…

ЗЫ: vertical-align работает для inline элементов, коеми являются <input>

[piumosso]

Да, все верно. Кстати, line-height — это не единственный вариант. Можно и padding и margin и т.д.)

[remal]

padding и margin

которые с огромной вероятностью будут выглядеть по-разному в разных браузерах…

[Kirk]

Это вероятность равна 0.1 % в данном случае.

[aubt]

хорошее решение, но хорошо бы причесать:

body {font-size:14px;}
.field {clear:both; text-align:right; line-height:25px;}

избавиться от зависимости можно задав line-height в ex.

[grossu]

непонятно, почему из-за float сбилось вертикальное выравнивание.

[piumosso]

Мне тоже…
Даже не столько непонятно, сколько жалко))

[chikuyonok]

float превратил инлайн-элементы, которые по умолчанию выравниваются по базовой линии, в блочные, которые выравниваются по верхнему краю.

[grossu]

вот теперь понятно

[Kirk]

Уже что-то подобное использовал, но без дивов, одни лэйблы и инпуты, просто необходимо тогда задавать длину лэйбла.

[piumosso]

Смысл метода в том, что в этом способе отступ зависит от размера текста

[crazzyDemon]

я использую другой вариант

<style>
.form_line label
{
display:inline-block;
display:-moz-inline-block;
width:120px;
}
</style>
<div class="form_line">
<label></label>
<input />
</div>

результат тотже

[piumosso]

У Вас label фиксированной ширины

[G__Z]

label фиксированной ширины практичнее

[piumosso]

это другой вопрос. топик посвящен нефиксированному лейблу

[homm]

Лучше наоборот:

display:-moz-inline-block;
display:inline-block;

Тогда третий фаерфокс подхватит правильный стиль.

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

[Yeah]

А как сделать, чтобы input занимал все возможное место в блоке известной длины, если у него есть «сосед» неизвестной длины?
Схематично:
div width:500px
input
span float:right (width — неизвестен, динамически изменяющийся контент)
/div

То есть span должен прижиматься справа, а input занимать все оставшееся место.

[kutsy]

Классно! Спасибо!

[himmelherz]

Все круто, спасибо, только с точки зрения логики тут требуется не дивы, а DL-список.

[piumosso]

Да, вполне.
Дело вкуса)

[abarmot]

Сорри, что немного не по теме — давно хотел поделиться, но на отдельный пост не тянет.

Очень нравится для разметки парных данных (название — поле ввода, имя — значение и т.п.) использовать списки определений DL.

название1 поле ввода1
название2 поле ввода2
…

В коде выглядит очень логично и красиво.

[dinamyte]

Что за привычка вообще вкладывать элемент input в элемент label?

[piumosso]

Это хорошая привычка, т.к. не требует id в инпуте
В данном случае не подходит

[dimaniko]

А рубашку надо в трусы всегда заправлять — от клещей.

[wally]

Большинство браузеров при таком написании автоматически привязывают label ко вложенному в него input.
Т.е. при нажатии на label выделяется вложенный input.
IE 6 точно так не умеет. :(

[piumosso]

этот способ подразумевает лейбл отдельно от инпута

[abarmot]

Попытка №2

… использовать списки определений DL.

<DL>
<DT>название1 </DT> <DD>поле ввода1</DD>
<DT>название2 </DT> <DD>поле ввода2</DD>
…
</DL>

…

[Sway]

что-то тебя упорно игнорируют… хотя + ставят =)

Может и мне свое добро таким способом апгрейдить… Хотя я уже забыл когда в последний раз вручную верстал форму…

[Sway]

попробовал dl списки… разочарован =(

Получается, что элемент формы (без применения css) всегда будет занимать 2 строки: строку «название» и строку «поле». Допустим у нас есть форма из 15 элементов (хотя такие редко встречал). Для ее отображения нужно 30 строк по примерно 25px каждая. Итого 750px + у сайта есть header + у браузера есть toolbars всякие. В итоге чтобы гарантировано увидеть всю форму нужен монитор с разрешением 1600*1200 (ну если вы минималист, то 1280*1024 и то впритык). Перебор как по мне.

Если же ударяться в css, то тут уже нужно колдовать (не забываем также про проклятый IE6). И решение уже не блещет изящностью.

Блин… не суждено мне с таблиц в формах уйти :'( Как не смотри, а они для форм наиболее универсальны, хотя и избыточны…

[ferrari]

Жизнь сурова и иногда бывают селекты различной ширины, и в это трудно поверить, но и ногда даже чекбоксы и радиокнопки: www.picamatic.com/show/2009/07/15/04/44/4448332_bigthumb.PNG

наиболее универсальным решением будет:
label — фиксированная ширина
input — тоже float: left
field — убрать text-align и по уму будет заменить div.class на fieldset
После этого можно добавлять любые инпуты и смотреться оно будет стабильно ровно

[dimaniko]

Насчет селектов разной длины — верно. А за чекбокс и радиобаттон справа от лейбла — геена огненная. С гвоздями.

[piumosso]

Подразумевается, что размеры инпутов одинаковые
Обычно в макетах так и бывает
Если нужен малениький инпут, то это все равно решается

[ferrari]

www.picamatic.com/view/4448332_untitled/

[piumosso]

В конце концов, чекбокс и радио-батон можно взять в блок такой же ширины, как и инпут

[ferrari]

в конце концов — идеальным будет решение с минимальным количеством тегов и css для них.
Я просто сообщил, о том, что увидел прочитав пост по диагонали, это не в упрек было сделано, а с той целью, чтоб вы выняли урок и облегчили себе жисть в будущем. Можете также доработать пост и демо. Ведь именно в этом прелесть блогов и сообщества, чем больше пишешь — тем больше сам умнеешь. ну, всмысе пока дают писать и не заминусуют.

[piumosso]

Ой, да конечно. Упрека и не увидел.

[ferrari]

глупости, адекватное применение таблицы — там где табличнве данные и только. Завтра заказчик попросит сделать label над input. Автор уберет у label float:left и напишет dispalay:block, а вы полезете шаблоны по сайту править.

[ferrari]

вы сами нд этими словами думали? «область имеющая строки и столбцы» — это сейчас, когда нужен такой вид. Потом — не «ничего страшного», а переделывание на «так как нужно». У вас может и являются компромиссом, мой опыт мне говорит о полном отказе от таблиц в формах, как бы те смотрелись.

[ecl]

Страшное видно, нужно будет переделывать, и здесь не имеет смысла оправдывать решение.

[remal]

Адекватное применение таблицы — там где это оправдано. В реальном мире «где табличные данные и только» не выдерживает никакой критики, т.к. есть сроки.

Не нравится тег table? Используйте xml+xslt. Не знаете xslt? А о чем тогда вообще говорить?

О том, что поддерживать конструкцию из трех дивов и 20 строчек css на много сложнее, чем таблицу и 5 строчек css, я вообще молчу.

Сейчас семантика в html — понятие крайне абстрактное. Особенно когда «должно было быть готово еще вчера».

Да, верстка дивами каркас а сайта — прекрасно. Но мелкий компонент CMS внутри не стоит ни одной строчки css.

Ко всему надо подходить с умом и искать компромисс. Серебряной пули не существует.

[ecl]

клон TolTol?
>>Не нравится тег table? Используйте xml+xslt. Не знаете xslt? А о чем тогда вообще говорить?
а это из какой такой оперы, почему вдруг задето? Давай и в xslt эту тему помуссируем, нос утру — мне не тяжело.

[remal]

Не того на понт брать пытаешься. Утри.

[ecl]

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

[remal]

Читать внимательно учат в школе. У читать внимательно всю ветку обсуждения люди привыкают за неделю сидения на форумах.

Тратить время на троля никакого желания нет. Удачи.

[ecl]

таблице де факто не могут быть адекватным решением — они сковывают макет. и от применения css толку будет мало.

[remal]

Какая категоричность… Можно увидеть пример хоть одного сверстанного сайта и время потраченное на верстку?

[the_sky]

поправьте если не так, но всё же правильнее будет

.field label { описание }

дабы не «задевать» других лейблов на странице

кстати, добавив в стиль label { text-align:right; остальное из примера } может получится вполне интересное решение

[djecka]

спасибо за пост) недавно столкнулся как раз с такой проблемой… решение очень оригинальное.

[milax]

Все прекрасное — просто :)
У меня такой задачи не было, обычно ширина заголовков идет фиксированная. За способ спасибо — может в будущем пригодится ;)

[yopopt]

Проще использовать два блока, к примеру так:

   <div style="float:left;">
      <label for="n1">Имя</label>
      <label for="ln">Фамилия</label>
      <label for="a1">Место жительства</label>
   </div>
   <div style="float:left;">
      <input type="text" id="n1" />
      <input type="text" id="ln" />
      <input type="text" id="a1" />
   </div>

Хотя ваше решение очень легко поддерживать.

[piumosso]

Да, ваше решение хорошо, но, правда, поддерживать сложнее

[Angelina_Joulie]

Не проще. Т.к. если потом прийдётся расположить описание сверху инпута — вам прийдётся перевёрстовать.

[yopopt]

Именно это я и имел ввиду. Поддерживать сложно.

[yopopt]

Никак или подгадывать высоту. Решение — бяка.

[kost]

Получется, что логически label слабо связан с input, находятся в разных блоках.

[piumosso]

Можно использовать то, что предложил Aivean habrahabr.ru/blogs/css/64530/#comment_1796474

[piumosso]

хорошо!

[dima_smol]

в мемориз

[atlete]

Спасибо за статью. Все четко и понятно расписано.
Взял на заметку.

[synthesis]

Если бы еще и submit можно было под инпуты выровнять, то вообще прекрасно было бы…
www.picamatic.com/show/2009/07/15/05/28/4448772_349x115.jpg

[Aivean]

Я бы использовал более семантичную разметку:

      <fieldset>
         <label><span>Поле:</span><input/></label>
         <label><span>Поле2:</span><input/></label>
      </fieldset>

Красиво и не нужно придумывать лишние id.

[piumosso]

Да, у Вас хорошее решение. Единственное, это не самая суть статьи.

[norfild]

Решение не плохое! Но как Вы решаете проблему с ІЕ6?

[homme]

что такое IE6?

[norfild]

Internet explorer 6

[norfild]

Как бы я хотел чтобы все так спрашивали

[Dr_Death]

вы думаете большинство сидящих на ie6 догадываются, что это Internet explorer 6? :D

[piumosso]

)))
В том и беда

[Bonch]

Для них это «Интернет».

[Aivean]

А что не так с ним? вот демо (решение как у автора статьи) awdg.com.ua/form.html
Проверьте сами.

[fatal]

Не только IE 6, но и IE 7.

[Aivean]

Да, про выключенный CSS я не подумал.

[the_sky]

убрав границы fieldset стилем?

[frujo]

Здорово получилось. Единственное, что для полноты картины можно заменить оберточный див на филдсет, как предложено выше. Но это не столь важно в контексте статьи.

[ipod]

Делаю почти также, только label с фиксированной шириной, позволяет выравнивать другие элементы в форме относительно полей ввода без особых хлопот.
Взгляните также на Uni-From (http://sprawsm.com/uni-form/) — гибкая и дивная.

[piumosso]

Статья именно о нефиксированных лейблах)

[KKS]

>>и назначим ему обновление потока.
что назначим?

[piumosso]

Ну то есть свойство clear, которое переводит поток на новую строку

[KKS]

спасибо, я так и думал)

[Rooc]

отлично, спасибо!

[Delka]

Популярность статьи, в картинках объясняющей что 2*2=4 пугает.

[porqz]

Угу, к сожалению, нас таких негодующих немного. Чудеса да и только.

[piumosso]

) Честно говоря, я и сам, конечно, не считаю этот пост «откровением», но, если он может кому-то пригодиться на практике, почем у бы и нет? ))

[porqz]

Пост как пост. Ничего против не имею. Просто такое количество плюсов за это… Вроде бы описываются вполне себе очевидные вещи, а популярность неслыханная.

[porqz]

(А вообще я просто вам завидую).

[piumosso]

))

[fiskus]

К счастью. Чем меньше негодующих, тем выше у них зарплаты

[habratchanka]

браво, решение на 5+

[egorinsk]

В реальности все же удобнее ширину левой части задавать явно, чтобы длинная подпись не могла растянуть форму.

Ну и еще, дело вкуса, конечно, но мне больше нравится форму делать списком, а не дивами, имхо удобнее :)

[piumosso]

может быть момент, связанный с резличным начертанием шрифтов.
что в винде ровно поместится на 216px (любое число), в убунте может вылезти.
Решение этого поста может быть удобным, если длина лейбла приблизительно ясна, но точно не известна

[egorinsk]

Дык текст в лейбле же просто переносится в нормальных условиях на новую строку :) Пусть переносится, в конце концов пользователь может поменять размер шрифта, или надпись длинная будет… не стоит ориентириоваться на длину в пикселях.

[piumosso]

Задача стояла иначе. Посмотрите самое начало поста))

[runcore]

вы бы сделали заготовку которая с другими типами полей тоже дружит..
а то если заменить <input type="text" /> на <textarea name="a" /></textarea> - то все ломается

[fatal]

Я использую похожий вариант, но у него есть два приемущества перед вашим:

• не надо прописывать атрибут for для label (ну, разве что, для IE 6 и 7)
• можно использовать длинные описания в несколько строк (в вашем варианте будет неправильное выравнивание)

body {font-size:14px;}
label span {float:left; padding-right:10px; text-align:left;}
.field {clear:both; text-align:right; line-height:25px;}
.main {float:left;}

<div class="main">
  <div class="field">
    <label><span>Имя</span>
    <input type="text" name="n" /></label>
  </div>
  <div class="field">
    <label><span>Фамилия</span>
    <input type="text" name="ln" /></label>
  </div>
  <div class="field">
    <label><span>Место жительства</span>
    <input type="text" name="a" /></label>
  </div>
</div>

[fatal]

Забыл написаль, что ни ваш, ни мой вариант не очень правильно работает в Опере 9 (9.5+ уже всё нормально).

[fatal]

Да, и как отметили уже выше, данный способ не подходит для полей формы разной длины. Но для простейших форм — мамое то, я думаю.

[aubt]

что у автора топика, что у Вас шрифт и line-height заданы в пикселях.
вы в самом деле прямо так и делаете на боевых проектах?

[fatal]

Нет, конечно — только проценты и EM. Это я просто быстро подправил представленный тут код. ;) Просто вспомнил, что сам проводил аналогичные эксперименты…

[piumosso]

Вообще говоря, что использовать — px или em/% — зависит от проекта. Здесь задано в пикселях для примера.

[piumosso]

Посмотрите, тут это уже обсуждалось, здесь не нужен, можно обойтись и лейблом.

[box]

Детский сад. Неужели это заслуживает целой статьи.

[piumosso]

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

[MrButek]

А это разве не очевидно?

[Troppus]

Не сочтите за дотошливость, но в Opera 9.00 Build 8505 (Win XP) и в Opera 8.54 Build 7730 (Win XP) это решение не работает.

[piumosso]

Да, я знаю. А Вы верстаете под эти браузеры? Я вот не верстаю под них)

[Troppus]

Я тоже, но ради интереса проверил и выложил результат. Умное решение, хотя не известно как оно будет вести внутри остальной разметки документа — чрезмерное употребление float чревато :-)

[piumosso]

Гланое предохраняться… правильными средствами)

[sanch3z]

Opera 9.25 Build 3721 (MacOS X) тоже не работает.

[piumosso]

да, опера до 9.5 не поддерживается
я не копал в этом направлении, так как не ставил задачу такой уж всеобъемлющей)

[mocksoul]

Решение в общем-то очевидное, ничего сверхестественного вы тут не написали — логически довольно просто дойти. Но вот использовать его можно далеко не всегда ибо в случае присутствия хитрого оформления с такой формой слишком тяжело жить. А гора float-ов для браузера кстати сложнее чем таблицы рисовать.

Правда, афигительный бонус — возможность достаточно просто изменять её на лету яваскриптом, чем таблицы похвастаться уже не могут.

[Enlightened]

Аплодирую стоя:) Сам несколько дней назад решал подобную задачу. Так красиво не получилось:)

[s1im]

не скажу ни слова об очевидности и актуальности решения задачи, однако же большой вам плюс за такую наглядную подачу материала. Обычно, просто кидают пример рабочего кода в несколько десятков строк, в котором бывает как-то лениво копаться. Но в вашем случае, даже самые ленивые разобрались еще не дочитав до конца :)

[Lilumi]

все хорошо, и в посте и в комментариях почитал много хороших решений, но вот автору статьи бы посоветовал заменить теги в «Шаг первый… Шаг пятый» с U на H3
ибо некоторые думают, что все что подчеркнуто есть ссылка ;)

[Melissa]

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

[fuksito]

А как теперь сделать так:

?

[Morfi]

Таблицей :)

[jDes]

класный метод. спасибо