Websovet - блочная верстка веб сайтов, HTML, CSS, jQuery и WordPress

19.03.2008 | Рубрики: Верстка, Дизайн
Тэги: , css, form, input, формы

Что есть такое — форма? Это не френч с карманАми, не лампас на штанине урядника и даже не бескозырка старпома Лома. В данном цикле из нескольких статей мы будем говорить за веб-формы. То есть, об интерактивных элементах на странице веб-сайта, самым простым вариантом которой является окошко ввода почтового адреса с кнопкой «ОК».

рис. 1

Сразу оговорюсь: данный цикл статей не о серверных технологиях, использующих сей элемент для обработки вводимых пользователем данных, и не о разъяснении чем GET отличается от POST. Тема заявлена как Оформление, то есть внешнее представление элементов формы. Вот этим и займемся.

Большое разнообразие полей для ввода данных в веб-формах можно свести к трем основным тэгам: input, textarea и select. В данной статье поговорим об оформлении наиболее часто используемого тэга — input. Напомню, что тэг этот, подобно тэгу изображения img не имеет закрывающего тэга. Поэтому после записи всех свойств необходимо так же перед закрывающей скобкой добавлять пробел со слэшем /.

При помощи тэга input можно изобразить довольно приличную кучку разнообразных элементов веб-формы. Все определяет значение атрибута type этого тэга. Например:

• text — однострочное текстовое поле, как на рис.1;
• password — поле для ввода пароля. При наборе символы отображаются звездочками *;
• checkbox — «флажок» — предлагает множественный выбор;
• radio — «радиокнопка» — предлагает единственный выбор из ряда;
• submit — ОК, «Да!», Отправить, «Пшел!», «Фас!» — кнопка отправки данных. К слову: эта кнопка не обязательна. Данные можно отравить и просто нажатием клавиши Enter;
• button — просто кнопка. При желании можно наделить любой функцией;
• reset — сброс данных;
• hidden — скрытое поле. В форме его не видно. Используется для передачи всевозможной служебной информации;
• file — поле для выбора локального файла. Часто обзывают словом «Обзор».

Кроме того, к данному тегу часто применяют следующие, дополнительные атрибуты:

size — размер видимой длинны поля в буквенных символах. Например запись size=”20” означает, что в окошке поместятся ровно 20 цифро-буквов, не больше и не меньше.

maxlength — еще одно дурное английское слово (рекомендую нацарапать на стене, иначе забудется). Задает максимально разрешенное количество символов для ввода в данное поле.

value — содержимое по-умолчанию. То есть, если напишете value=”E-mail”, то в этом поле изначально будет показано данное слово — E-mail.

С этим разобрались. Теперь самое вкусное! Как нам над этим тэгом поколдовать, чтобы сделать красиво? Ведь по-умолчанию эта штуковинка выглядит весьма неприглядно, эдакий серенький брусочек. Почему бы нам не сделать его таким:

рис. 2

В этом нам поможет лист стилей CSS, в котором мы для формы пропишем несколько правил и зададим тем самым желаемый вид отображения. Что мы можем изменить? Во-первых, размер самого поля. Долой мелкий и неудобный шрифт! Пусть будет крупно. Во-вторых, цвет как самого поля, так и рамки вокруг него. В-третьих, можно само поле поместить на каком-нибудь красивом фоне, задав тэгу form собственный background.

Итак, поехали! Нам понадобится код самой формы:

<form action=”"><input class=”area” type=”text” size=”20″ maxlength=”100″ name=”email” value=”Ваш E-mail” /><input class=”button” type=”submit” value=”OK” /></form>

И следующий набор правил:

form {
background: #333 url(bg-form.gif) repeat-x;
width: 350px;
margin: 200px auto;
padding: 50px 0;
text-align: center;
}

.area {
background: #F4FFE6;
color: #060;
font-size: 24px;
border: 1px solid #3f3;
}

.button {
background: #3f3;
color: #fff;
font-size: 22px;
border: 1px solid #F4FFE6;
}

Как видим, никаких лишних дивов (DIV). Все правила привязаны к существующим тэгам. Здесь тэг form используется как контейнер, в котором помещены два элемента input с классами: area — поле ввода, и button — то есть, кнопка. Для формы мы использовали в качестве фона рисунок с градиентом и бликом, ширину всего блока задали в 350 пикселей и выравнивание текста по центру.

Особо следует остановиться на размерах текстового поля и кнопки. Высота их задается размерами самого шрифта. То есть, в нашем случае — 24 пиксела. Но тут есть одна непонятка (кто разъяснит — буду сильно признателен): шрифт поля и кнопки одинаков. И когда мы смотрим нашу форму в Опере, то высота поля и кнопки тоже одинкова. Но вот в Internet Explorer кнопка почему-то становится выше текстового поля. От чего это зависит, я так и не нашел пока. Как вариант — написать небольшой хак (кусок правил) конкретно под IE и задать там высоту кнопки путем уменьшения размера шрифта.

В следующий раз поговорим о текстовом поле, которое так и называется — textarea.

Вебсовет