Реферат: Блоки в документах
все элементы располагаются в одну строку
поле для ввода логина располагается в первой строке, а поле для ввода пароля и кнопка отправки – во второй строке (именно так сделана форма на рис. 1)
Давайте сначала рассмотрим первый вариант. Для него отлично подойдет таблица из трех ячеек. Будем использовать картинку в качестве кнопки отправки и сразу зададим ширину полей, с помощью атрибута size. Код будет простым:
<table cellpadding="0" cellspacing="0">
<form>
<tr>
<td><input type="text" name="login" size="14"> </td>
<td><input type="password" name="pass" size="14"> </td>
<td><input type="image" src="i/go.gif" alt="Войти"></td>
</form>
</table>
В браузере такая форма будет выглядеть так, как показано на рис. 5.
Рис. 5 Простая форма входа для клиентов
Для полного счастья осталось написать стили на поля формы. Я знаю, что высота картинки ровно 19 пикселей, поэтому задам высоту полей тоже 19 пикселей. Стиль получится несложным:
INPUT.input {border: 1pxsolid #666; height: 19px}
Надо бы еще назвать поля, чтобы пользователь знал, куда что вводить. Иногда название поля пишут прямо в самом поле. Для этого можно использовать атрибут value. Кроме того, нам надо задать класс input для обоих полей, так что HTML-код формы немного модифицируется:
<table cellpadding="0" cellspacing="0">
<form>
<tr>
<td><input type="text" name="login" size="14" class="input" value="логин"> </td>
<td><input type="password" name="pass" size="14" class="input" value="пароль"> </td>
<td><input type="image" src="i/go.gif" alt="Войти"></td>
</form>
</table>
А выглядеть форма будет так, как показано на рис. 6
Рис. 6 Вид формы после написания стилей
Некоторые могут возразить, что использовать таблицу для верстки такой простой формы совершенно необязательно. Давайте попробуем сделать как можно проще и посмотрим, что из этого выйдет. Если убрать, таблицу, то код станет очень простым: