Формы (продолжение)
Форма авторизации состоит из двух полей (логина и пароля) и кнопки. Элементы формы можно расположить в одну строку, а можно поле для ввода логина поместить в первой строке, а поле для ввода пароля и кнопку - ниже, во второй.
Для первого варианта строим таблицу из трех ячеек, используем картинку в качестве кнопки отправки и задаем ширину полей, с помощью атрибута size. Высота картинки больше высоты полей. Выровняем их, если высота картинки 24 px, зададим высоту полей тоже равной 24.
Вот HTML-код такой формы:
<html>
<head>
<style type="text/css">
input.input {
border: 1px solid #808080;
height: 24px
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<form>
<tr>
<th colspan="3">формаавторизации</th>
</tr>
<tr>
<td><input type="text" name="login" size="18" class="input" value="логин"> </td>
<td><input type="password" name="pass" size="18" class="input" value="пароль"> </td>
<td><input type="image" src="image/go.gif" alt="вход"></td>
</tr>
</form>
</table>
</body>
</html>
Для второго типа формы также делаем таблицу из двух строк. Первая содержит одну объединенную ячейку с полем для логина, а вторая строка содержит две ячейки.
Форма нормально смотрится в Internet Explorer, но в Mozilla и Opera поля слипаются из-за того, что обнулены расстояния между ячейками таблицы и отступы в ячейках.
Решаем проблему, создав стилевое правило для первой ячейки с отступом в 4 пикселя снизу:
.expand-form {
padding-bottom: 4px
}
Теперь форма выглядит так: смотрим.
А код так:
<html>
<head>
<style type="text/css">
input.input {
border: 1px solid #808080;
height: 24px
}
input.submit {
color: #FFF;
font: bold 12px verdana;
background: #f90;
border: 1px solid #808080;
height: 24px
}
.expand-form {
padding-bottom: 4px
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<form>
<tr>
<td colspan="2" class="expand-form"><input type="text" name="login" size="18" class="input" value="логин"></td>
</tr>
<tr>
<td><input type="password" name="pass" size="18" class="input" value="пароль"> </td>
<td><input type="image" src="image/go.jpg" alt="войти"></td>
</tr>
</form>
</table>
</body>
</html>
