Стилизация всех элементов форм, с помощью CSS и jQuery

Формы, пожалуй, один из самых важных элементов на странице и их стилизация щекотливый момент при верстке. Главное назначение форм это обмен информации между пользователем и сервером. Самые часто используемые теги форм — input, textarea, select, label.

Кликнув по кнопке «Демо» можете наглядно увидеть какой результат мы получим в конце урока. Нажав на исходники Вы можете скачать абсолютно весь исходный код вместе с комментариями.

Введение

• Тег input предназначен для создания текстовых полей, кнопок (submit, button, file, text), переключателей (radio) и флажков (checkbox).
• Тег texarea — используется для создания текстового поля для ввода нескольких строк текста.
• Тег select применяется для создания выпадающего списка в котором можно сделать один или множественный выбор.
• Тег label — для подписи к элементам форм.

Примечание*: каждый тег формы имеет атрибут value — в него вносится значение, которое пользователь ввел или выбрал, и именно это значение передается на сервер.

В этом практикуме я продемонстрирую как с помощью CSS и jQuery стилизовать эти элементы. Начнем с самых простых, а как окажется позже вся стилизация очень простая. Приступим.

Для начала создадим обычную форму, самую простую:

Первым рассмотри тег Input.

Input

В HTML его выводят вот таким способом:

Обязательным параметром тега input является атрибут type (тип, это может быть текст [text], кнопка отправки [submit], скрытое поле [hidden], переключатель [radio], чекбокс [checkbox], загрузка файла[file]).

Для стилизации этого тега jQuery не требуется, главное помнить, что браузеры неоднозначно работают с его высотой, поэтому высоту этого элемента стоит подбирать исходя из размера шрифта, который Вы будете использовать и чтобы слова не чёркали по рамке нужно добавлять отступ (padding)

Иногда для Internet Explorer 8 нужно увеличить высоту на 1px, чтобы тег соответствовал дизайну, тогда в стилях нужно добавить хак для IE:

Вот и все тайны связанные с этим тегом. Дальше рассмотри тег для ввода нескольких строк текста textarea.

Textarea

Данный тег на HTML страницу выводится так:

по умолчанию у этого тега присутствуют некоторые параметры:

• за правый нижний угол текстовой области можно потянуть мышкой и текстовая область будет увеличиваться
• справа присутствует постоянная прокрутка в браузерах IE

уберем эти мелочи, открываем наш файл стилей и пишем следующие свойства:

Теперь наше поле для ввода текста имеет привлекательный вид. Следующим этапом стилизируем переключатели radio.

Radio Button

На HTML странице радио переключатели выводятся так:

К сожалению, стилизации с помощью CSS эти волшебные переключатели не поддаются, но есть jQuery и все будет круто. Суть моего метода очень простая: вместо тегов input я буду писать столько тегов div сколько предполагалось переключателей, плюс в них буду вносить текст с заданными значениями и будет всего лишь один скрытый input, в который будет заносится текстовое значение с нажатого div’a. теперь давайте реализуем эту идею.

Для начала создадим HTML разметку:

Теперь стили. Каждый div будет иметь фоновую картинку пустого переключателя (именно ее Вы сможете поменять на свою любимую или ту что Вам нарисует дизайнер), а если по div’у произошло событие клика то ему еще добавится класс active и сменится фоновое изображение на включенный переключатель

Да забыл сказать что для стилизации переключателей, чекбоксов и селектов я буду использовать спрайт с фоновыми изображениями (он будет в исходниках, как и сам файл стилей).

Наконец-то дошла очередь до jQuery (:

Если посмотреть работу данного скрипта через firebug для Firefox или через средства разработки Google Chrome, то картина будет более наглядной.

Давайте займемся теперь стилизацией чекбоксов.

Checkbox

Чекбоксы выводятся на HTML страницу таким же методом как и radio переключатели:

Со стилизацией с помощью одного CSS тут та же история, что и с radio кнопками. Для стилизации чекбоксов нужен немного другой логический подход: выводим столько чекбоксов сколько задано но вместо атрибута checkbox ставим атрибут hidden и перед каждым input’ом добавим div:

дальше добавим стилей, для активного и неактивного чекбокса

теперь очередь jQuery:

А теперь займемся селектами:

Select

На HTML страничку селекты выводятся так:

Реально кучу плагинов jQuery для их стилизации, но мой метод я считаю самый правильный, суть его такая же как и в случае с radio кнопками, только здесь вместо дивов будет использоваться список, который выпадает по клику на ссылку, а потом при клике на ссылку из выпадающего списка ее текстовое значение будет заносится в скрытый инпут и в первую ссылку по которой кликнули. Все очень просто)))

HTML рзаметка выглядит следующим образом:

Теперь добавим стилей для всего этого дела

ну и без jQuery опять никуда:

Дальше займемся кнопками загрузить изображение и кнопкой отправкой формы.

Input type=file

По умолчанию инпут с таким атрибутом добавляет на страницу кнопку обзора для выбора файла и текстовое поле в котором отображается имя загруженного файла. Моя задача сейчас показать Вам как можно стилизовать эту конструкцию.

Итак для стилизации кнопки нужно создать следующую разметку:

Которой добавим таких стилей:

Тут я сделал такой финт: стандартный инпут делаем прозрачным и задаем огромный шрифт, чтобы кнопка обзора была достаточно большой и закрывала весь контейнер, позиционируем его абсолютно по правому краю контейнера (потому что курсор-рука появялется тока на кнопке «обзор»).

Под инпутом который вызывает окно загрузки располагаем еще один инпут, который будет отображать имя файла который мы загрузили и кнопку обзор все стили я написал)

Теперь добавим script который будет показывать имя прикрепленного файла и еще напишем хувер для кнопки если загрузчик получил фокус:

Как оказалось ничего сложного.

Дальше займемся кнопкой сброса формы (reset form).

Input type=reset

Сброс формы иногда очень-очень нужен, а там как мы добавили стилизацию почти всех элементов форм то двайте разберемся как их сбросить, потому что стандартный reset не сработает (верней сработает но не на всех элементах)

И добавим стилей кнопочке сброса:

Вот опять все просто)

И заключительным этапом будет кнопка отправки формы.

Input type=submit

Как я уже писал выше, тег инпут предназначен не только для полей ввода, переключателей и чекбоксов, с его помощью так же делаются кнопки. Делают их корректным объявлением атрибута type: button или submit, атрибут submit говорит о том что при клике на этот инпут данные из формы будут переданы на сервер. На страничку его добавляют так:

а теперь немножко стилей:

Заключение

Вот и все, если не все, то некоторые моменты будут Вам полезны. Мои познания в jQuery не максимальны, если у Вас есть предложения по усовершенствованию кода, буду признателен если Вы напишите его в комментариях.