Оригинал

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

<form>
	<ul>
		<li><label>Label1</label><input type=”text” value”" /><li>
		<li><label>Label2</label><input type=”text” value”" /><li>
		…
	</ul>
</form>

Надписи могли быть слева или справа или отображались как блок, в зависимости от ваших нужд. Однако я недавно подсмотрел на Facebook.com хорошую технологию, которая использует тег определение списка (dl). Я нашел это особенно привлекательным, потому что браузеры (по умолчанию) и дизайнеры добавляют мало стилей для тега dl, поэтому ваш дизайн наиболее переносим. Плюс семантика использования этого тега позволяет вам иметь пару ключ/значение. Здесь ключом будет label и значением поле.

Вот пример, как будет выглядеть Ваша форма:

Чтобы сделать такую хорошую форму, ваш html должен быть похожим на этот:

<form action=”someURL” class=”clearfix” id=”someID” method=”post”><dl>
	<dt><label for=”form-msg-to”>To:</label></dt>
	<dd><input id=”form-msg-to” name=”to” type=”text” value=”"/></dd>
	<dt><label for=”form-msg-subject”>Subject:</label></dt>
	<dd><input id=”form-msg-subject” name=”subject” type=”text” value=”"/></dd>
	<dt><label for=”form-msg-message”>Message:</label></dt>
	<dd><textarea cols=”30″ id=”form-msg-message” name=”body” rows=”5″></textarea></dd>
</dl></form>

и стили:

#message form {
	/* Optional, just a littl nice padding */
	padding: 3em 0pt 1em 9em;
}

#message dl {
	/* Replace with desired width */
	width: 47em;
}

#message dl dt {
	float: left;
	/* Spacing between label and field */
	padding: 0 1em 0 0em;
	text-align: right;
	/* Width of largest label */
	width: 6.5em;
}

#message dl dt label {
	/* Make whatever you like */
	color: #666;
	/* Labels with “for” attribute are clickable, ensure they look that way */
	cursor: pointer;
	display: block;
	/* Use whatever font-size you prefer */
	font-size: larger;
	/* Adjust padding to align with fields */
	padding-top: 0.5em;
}

#message dl dd {
	float: left;
	/* This is the padding between form field rows */
	margin: 0 0 1em;
	/* Remaining width dl - dt - padding */
	width: 39em;
}

#message input.txt,
#message textarea {
	/* Prevents x-browser bug */
	overflow: hidden;
	padding: 0.4em 0 0.4em 0.2em;
	width: 33em;
}

Вам также надо добавить стиль “clearfix” для формы, если другие элементы зависят от её позиции.

Популярность: 14%