Формы
Мы разбирались, достаточно подробно, с построением форм в разделе "HTML", сейчас, попробуем поэкспериментировать с возможностями их оформления.
Простейшая форма состоит из двух элементов - поля ввода запроса и кнопки запуска поиска. Кнопка запуска поиска может быть текстовой или графической.
Текстовая кнопка реализуется так:
<input type="submit" value="искать">Графическая кнопка объявляется так:
<input type="image" src="image/go.jpg" alt="искать">Верстаем блок формы в таблице, состоящей из одной строки и двух ячеек. В первую ячейку вставляем поле ввода текста, а во вторую - кнопку:
<table cellpadding="0" cellspacing="0"><form>
<tr>
<td><input type="text" name="search"> </td>
<td><input type="submit" value="искать"></td>
</tr>
</form>
</table>
Браузеры по-разному отображают элемент <form>. Internet Explorer делает довольно большой отступ, Opera - отступ поменьше, а Mozilla вообще считает, что отступы делать не надо. Чтобы привести форму к единому виду достаточно поместить тег <form> между тегами <table> и <tr>. В этом случае отступы отсутствуют во всех браузерах.
Кроме того, в таблице обнулены отступы и расстояния между ячейками. Если этого не сделать, то в итоге получим два пикселя несовпадения. Конечно, это не очень-то и бросается в глаза, но… Чтобы при обнулении отступов элементы формы не слипались, после текстового поля поставлен неразрывный пробел .
Используя стили можно изменить вид кнопки. Для текстового поля создаем класс "input", в нем назначаем цвет и толщину рамки. Для текстовой кнопки создаем класс "submit", назначаем рамку темно-серого цвета толщиной 1 пиксель, и задаем оранжевый фон для поля кнопки. Высота кнопки и высота поля ввода немного разнятся. Исправляем это, задав одинаковую высоту для поля и для кнопки при помощи свойства height. Изменяем цвет шрифта, делаем его полужирным.
Код будет таким:
<html>
<head>
<style type="text/css">
input.input {
border: 1px solid #808080
}
input.submit {
color: #fff;
font: bold 12px Verdana;
background: #ffa448;
border: 1px solid #808080;
height: 21px
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<form>
<tr>
<td><input type="text" class="input" name="search"> </td>
<td><input type="submit" class="submit" value="искать"></td>
</tr>
</form>
</table>
</body>
</html>
