Оформление Формы. Часть 1, Input. Из Серии «Сделайте Мне Красиво»

19.03
2008

Рубрики: Верстка, Дизайн |

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

рис. 1
form1

Сразу оговорюсь: данный цикл статей не о серверных технологиях, использующих сей элемент для обработки вводимых пользователем данных, и не о разъяснении чем 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
form2.gif

В этом нам поможет лист стилей 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.

Вебсовет

Digg it Bookmark it Stumble it add to technorati

Комментарии (11) на запись “Оформление Формы. Часть 1, Input. Из Серии «Сделайте Мне Красиво»”

  1. Марина 20.03.2008 00:02

    Спасибо Вам большое.

  2. Kventor 20.03.2008 01:27

    2 Марина: Пожалуйста! :) Если что-то непонятно или не получается - смело спрашивайте. Обязательно отвечу и помогу.

  3. Марина 22.03.2008 01:11

    Хорошо :-), если будет что-то не получаться, то обращусь к Вам.
    Недавно начала изучать веб-разработку, правила верстки. Очень помогают Ваши советы. :-)

  4. Kventor 22.03.2008 10:02

    Замечательно! Рад, что смог хоть чем-то помочь :)

  5. HostyleFlame 03.06.2008 13:11

    Путем нехитых махинаций я менял у формы стандартную кнопку на свою. Единственной поблемой для меня было создание круглой кнопки, т.к. файрфокс и некоторые другие браузеры при нажатии на кнопку выделяют её границы, а круглую кнопку все равно вырезаешь и сохраняешь с небольшой рамкой, состоящей из окружающего кнопку фона - получается палевно в итоге…

  6. Найкрис Кроули 03.06.2008 23:27

    оу!!! вот это формы!

    (это я написал на автомате, разглядывая девушку на улице :))

  7. Kventor 04.06.2008 09:26

    HostyleFlame, есть такая трабла у некоторых браузеров. Как обойти сей факт - пока не знаю. Если что-то найду, обязательно расскажу.

    Найкрис, надеюсь написанное было цензурно и грамотно? :)

  8. Найкрис Кроули 04.06.2008 14:25

    Квентор, а я по-другому и не умею ;)

    А насчет кнопки с паливом, так я считаю, что это не проблема, ну пусть и спалит какой-то процент посетителей… если учесть, что большей части будет все равно по этому поводу, а большая часть, от оставшейся, решит, что так и нужно, то получаем 2-3% посетителей, которые заметят, что круглая кнопка на самом деле квадратная

  9. Студия электро дизайна 18.08.2008 19:01

    А никто не видел статью, как заменить чекбокс, прикрутив вместо него див с жабаскриптом?
    Весь интернет перерыл - не могу вспомнить где видел.

  10. Nus 22.08.2008 14:11

    сдорово только я не могу понять как сделать так чтоб управлять кнопкой когда курсор над ней (цвет рамки например менять когда над кнопкой курсор)

  11. Игорь Квентор 22.08.2008 16:17

    Ну, можно, например, для кнопки прописать еще одно правило:

    .button:hover {
    border: 1px solid #F00;
    }

    Хотя в ИЕ оно работать не будет.

Трэкбеки

Оставить комментарий




Поиск

Рубрики

Пузомерки


PageRank





Blog Catalog

DMOZ

Каталог дизайнерских блогов