В этой небольшой заметке я опишу процесс верстки html–формы без использования табличной разметки. Наша будущая форма будет предназначена для регистрации новых пользователей на сайте. Каждое поле формы с подписью будет находиться на новой строке. Подписи и поля будут выровнены друг под другом, создавая ощущение, как будто мы использовали табличную верстку. Вобщем будет красиво ☺.
Разметка формы будет следующая:
HTML
<form id="myForm">
<fieldset>
<legend>Регистрация</legend>
<div>
<label for="login">Логин:</label>
<input type="text" name="login" id="login" />
</div>
<div>
<label for="password">Пароль:</label>
<input type="password" name="password" id="password" />
</div>
<div>
<label for="confirmPassword">Подтверждение пароля:</label>
<input type="password" name="confirmPassword" id="confirmPassword" />
</div>
<div class="s_but">
<input type="submit" name="submit" value="Регистрация" id="submit" />
</div>
</fieldset>
</form>
Каждый набор из элементов формы (подписи и поля) размещаем в элементе <div></div>
. Подписью будет содержимое элемента <label></label>
Сначала сделаем элементы хранящие подписи блочными и установим им ширину.
После этого мы увидим, что поля съезжают на новую строку. Чтобы это исправить, мы применим к ним еще одно правило css, которое называется float
.
таким образом. у нас получится следубющий набор правил css:
CSS
#myForm label{
display:block;
width:7em;
float:left;
}
Теперь нужно сделать отступы между блоками, обрамляющими элементы формы и выравниваем кнопку «Отправить».
В итоге к нашей форме будет применена следующая таблица стилей:
CSS
#myForm{
background-color:#dfdfdf;
border:1px solid #000;
width:20em;
height:10em;
padding:10px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#errBlock{
width:100px;
position: absolute;
top:10px;
left:10px;
background:#cfc;
border:1px solid #00f;
text-align:center;
color:#f00;
font-size:.8em;
}
#myForm label{
display:block;
width:7em;
float:left;
}
#myForm div{
margin-bottom:.3em;
}
.s_but{
text-align:center;
margin-top:.3em;
clear:both;
}
#login, #password, #confirmPassword{
border-color:#7f9db9;
border-width:1px;
border-style:solid;
}
Выглядеть форма будет так:
В итоге у нас получилась очень прилично выглядящая форма регистрации на сайте.