26 июля 2009, 14:31

CSS: Simple form layout

Простой CSS для вёрстки формы. Очень нужная вещь, когда доступа к вьюхам(темплейтам, формгенератору) нет ;) Например есть простая форма
<form>
	<label for="name">Name</label>
	<input id="name" name="name"><br>
	<label for="address">Address</label>
	<input id="address" name="address"><br>
	<label for="city">City</label>
	<input id="city" name="city"><br>
</form>
В итоге обычно получается ёлка, красивого мало ;) И как говорится, нужно всего лишь добавить CSS :D
label,input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}
label {
	text-align: right;
	width: 75px;
	padding-right: 20px;
}
br {
	clear: left;
}


Но обычно форма не ограничивается только текстовыми инпутами. Для таких случаев лучше обзавестись более универсальным CSSом ;) добавим небольшие ограничения с помощью css-selectors
input[type="radio"],
input[type="checkbox"],
input[type="submit"],
input[type="button"],
input[type="reset"]{
	width: auto;
}



1 комментарий РСС

mr-ozio
вот за это спасибо, очень полезно периодически применять. а-то с формами каждый раз беда какая-то. колесо по сто раз сочинять.

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter