Верстаем поля формы

Amigos · February 20, 2009

Цель: Получение возможности произвольной ширины поля label для сайтов поддерживающих множество языков. Названия полей на разных языках как правило имеют разную длинну.

Задача: Кроссбрр. сверствать поля форм таким образом, что бы при увеличении текста (label) в длинну, поле переносилось со строчки (на которой стоит вместе с текстом) на строчку ниже сохраняя при этом свой отступ, а текст при этом продолжался без переноса.

<html>
	<head>
		<title></title>

		<style>
form
{
padding: 0;
margin: 0;
}
.row
{
zoom: 1;
padding: 0 0 1.2em 3em;
margin: 0;
}
.row:after
{
content: '';
display: block;
clear: left;
height: 0;
}
.label
{
position: relative;
float: left;
//display: inline;
margin: 0 1em 0 -3em;
padding: 0;
}
.field
{
float: left;
width: 100%;
padding: 0;
margin: 0;
}
input
{
width: 100%;
}
.medium input.text
{
width: 25em;
}
		</style>
	</head>
	<body>


		<form>
			<dl class="row medium">
				<dt class="label"><label> 22222222222222222222222 </label></dt>
				<dd class="field"><input class="text" value="" /></dd>
			</dl>
			<dl class="row medium">
				<dt class="label"><label>122</label></dt>
				<dd class="field"><input class="text" /></dd>
			</dl>
			<dl class="row medium">
				<dt class="label"><label> 22222222222222222222222 </label></dt>
				<dd class="field"><input class="text" /></dd>
			</dl>
			<dl class="row">
				<dt class="label"><label>121231</label></dt>
				<dd class="field"><input class="text" /></dd>
			</dl>
			<div class="fieldset">
				<strong class="legend">Legend</strong>
				<div class="reducer">
					<dl class="row medium">
						<dt class="label"></dt>
						<dd class="field"><input class="text" /></dd>
					</dl>
					<dl class="row">
						<dt class="label"></dt>
						<dd class="field"><input class="text" /></dd>
					</dl>
				</div>
			<div>
			<dl class="row medium">
				<dt class="label"><label> 22222222222222222222222 </label></dt>
				<dd class="field"><input class="text" /></dd>
			</dl>
			<dl class="row">
				<dt class="label"><label> 22222222222222222222222</label></dt>
				<dd class="field"><input class="text" /></dd>
			</dl>
			<div class="fieldset">
				<strong class="legend">Legend</strong>
				<div class="reducer">
					<dl class="row medium">
						<dt class="label"><label>222222222222</label></dt>
						<dd class="field"><input class="text" /></dd>
					</dl>
					<dl class="row">
						<dt class="label"><label>111</label></dt>
						<dd class="field"><input class="text" /></dd>
					</dl>
				</div>
			<div>
		</form>
	</body>
</html>

s0rr0w · February 20, 2009

Цель: Получение возможности произвольной ширины поля label для сайтов поддерживающих множество языков. Названия полей на разных языках как правило имеют разную длинну.
Задача: Кроссбрр. сверствать поля форм таким образом, что бы при увеличении текста (label) в длинну, поле переносилось со строчки (на которой стоит вместе с текстом) на строчку ниже сохраняя при этом свой отступ, а текст при этом продолжался без переноса.

Практический смысл данной задачи стремится к нулю

Amigos · February 23, 2009

2 s0rr0w Практический смысл данной задачи позволяет решить непростую реализацию форм или любого другого контенат с учетом требования заказчика/дизайнера/тех.директора.

... кстати кто это?)) да, s0rr0w? +))))

s0rr0w · February 23, 2009

2 s0rr0w Практический смысл данной задачи позволяет решить непростую реализацию форм или любого другого контенат с учетом требования заказчика/дизайнера/тех.директора.
... кстати кто это?)) да, s0rr0w? +))))

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

Да, и расположите два инпута в одной строке, инпут и селект, просто селект, два чекбокса с лейблами.

rash · February 23, 2009

Если такая конструкция позволит реализовать идею дизайнера, то она уже полезна.

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

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

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

s0rr0w · February 23, 2009

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

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

Связь не вызывает только потому, что вы рассматриваете этот код более внимательно. Попробуйте сходу заполнить поле 121231. Пользователь запоминает расположения полей, доводя до моторики свои действия. Лейблы обычно читаются после поля, вот тут и возникает основной конфуз. Где надпись? Снизу? Сбоку? Сверху?

Расположение нескольких элементов в одной строке - это задача, которая встречается примерно в 80% случаев. Простой пример - дата рождения: день-месяц-год. Второй простой пример, еще более сложный - Фамилия-имя-отчество. Третий пример - пол: (о) мужчина ( ) женщина

И более читабельный и однозначный будет вот такой подход

Фамилия			 Имя				  Отчество
[______________]	[________________]   [_______________]

Логин
[______________]

Пароль
[______________]


...

Sign In

Верстаем поля формы

Recommended Posts

Amigos

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Amigos

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Обсуждения

Forums

Important Information