Форма без таблиц

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

Код формы:

	<div id="login_form">
        <form action="#" method="post">
            <div class="input_row">
                <label for="username">Пользователь:</label>
                <input type="text" id="username" name="username"/>
            </div>            <div class="input_row">
                <label for="password">Пароль:</label>
                <input type="password" id="password" name="password"/>
            </div>
            <div id="button_login">
                <button type="submit">Логин</button>
            </div>
        </form>
	</div>

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

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

#login_form{ 
    width: 300px;
    height: 90px;
    background-color: #C7D4E0;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #4046F6;
}label{
    width: 150px;
    float: left;
    text-align: left;
    font-family: Georgia;
}
input{
    width: 150px;
    background-color: #FFFFFF;
    color: #FFFFFF;
    font-family: Georgia;
    border: 1px solid #B7C2F6;
}
input:focus{
    border: 1px solid #d76269;
}
.input_row{
    margin-bottom: 10px;
}
#button_login{
	 margin: 0px 150px; 
	 display:inline-block; 
}

Для формы просто задали внешний вид - размер, цвет фона, границ, скругленные углы. Для label и input делаем обтекание слева. С помощью text-align у label можно задать выравнивание текста (слева или справа). Обратите внимание на геометрию формы и ее компонентов (нужно, чтобы label и input помещался в форму). Для большего фэн-шуя задаем стили полей ввода, изменяем цвет границы поля в фокусе.

Последний штрих - размещение кнопки под полями ввода (с помощью margin в нашем случае). Получилось что-то такое:

Готовый пример (а вдруг понадобится =) ) можно скачать здесь: form