как стилизовать форму css

Стилизация текстовых полей формы

В этой статье рассмотрим различные варианты стилизации текстовых полей HTML-форм. Сначала создадим базовый вариант оформления input, а затем множество других, дополняя каждый из них небольшим количеством CSS.

Введение

Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.

Исходные коды примеров расположены на GitHub в папке text-field проекта «ui-components».

Нормализация стилей

Обычно хорошей практикой считается для всех элементов включая псевдоэлементы установить box-sizing: border-box :

В этом случае браузер при рассчитывании ширины и высоты элементов будет включать в них поля (padding) и границы (border). Как правило, это сильно упрощает работу с размерами элементов, и избавляет нас от множества проблем при размещении контента.

Для того чтобы в разных браузерах отображался как можно более одинаково необходимо добавить следующее:

Базовый вариант оформления input

Для удобного добавления к элементам стилей создадим следующую HTML-разметку:

Теперь напишем стили для этих элементов. А также сразу включим в них стили для нормализации, чтобы не добавлять их отдельно:

В результате получили следующее оформление:

Стили для в состоянии фокуса (получить это состояние можно с помощью псевдокласса :focus ):

Этот набор стилей будет у нас отправной точкой для создания других.

input с иконкой

Рассмотрим пример вставки в input иконки с помощью псевдоэлементов.

Для этого дополнительно обернём элемент в

Ещё один вариант оформления:

input с активной svg-иконкой

В этом примере поместим в input иконку, на которую можно нажать.

Для этого мы также как и в предыдущем примере обернули в

Оформление выполнили так:

Ещё пример вставки иконки в input :

input с кнопкой

HTML-разметка input с кнопкой:

Расположение кнопки справа от input выполним с помощью флексов:

input с плавающим label

Разметка input с плавающим label:

Ещё один вариант с «плавающей» меткой:

input со счётчиком символов

Пример в котором под input отображается количество набранных символов и максимальная длина:

Это выполняется посредством следующего кода:

Стили для отображения состояния валидации input

Отображать сообщения пользователю или подсказки можно через

Пример валидации формы с помощью JavaScript

Т.к. мы будем сами отображать сообщения, то необходимо отключить стандартные подсказки браузера. Для этого к тегу

Клиентская проверка формы после нажатия «Отправить»:

Источник

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

Формы, пожалуй, один из самых важных элементов на странице и их стилизация щекотливый момент при верстке. Главное назначение форм это обмен информации между пользователем и сервером. Самые часто используемые теги форм — input, textarea, 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 страницу выводится так:

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

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

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

Источник

Формы HTML5: CSS

Убираем стили по умолчанию

Заметьте, что я также сбросил свойства outline и box-shadow чтобы убрать некрасивую голубую подсветку вокруг сфокусированного элемента, и стилизацию поля с ошибкой во всех браузерах.

:focus

Состояние :focus было введено еще в CSS2.1, и оно определяет стиль текущего выбранного элемента

:checked

Стили :checked применяются к выделенным флажкам и переключателям, например:

Не существует селектора :unchecked, но он вам и не нужен: просто создайте стиль для элемента в исходном состоянии, а изменения применяйте при активации состояния :checked. Как альтернативу можно использовать селектор :not(:checked).

:indeterminate

Технически состояние :indeterminate нет в спецификации, но оно там упомянуто. Согласно спецификации, оно представляет собой состояние переключателя или флажка, когда они “и выбраны, и не выбраны” (между двумя состояниями)

Есть несколько ситуаций, когда состояние :indeterminate может быть полезным. Если у вас есть список флажков, вы можете использовать флажок “выбрать все”, который выбирает или снимает выделение со всех флажков по клику. Например, если вы выберите только несколько флажков из списка, то флажок “выбрать все” может перейти в неопределенное (indeterminate) состояние.

:required

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

:optional

Применяет стили к любому полю ввода, у которого нет атрибута required. Я не совсем понимаю, зачем его добавили, если можно использовать селектор :not(:required), который делает то же самое.

:valid

Применяет стили к любому полю, которое содержит верные данные.

:invalid

По аналогии с :valid, :invalid (или :not(:valid)) применяет стили к элементам, которые содержат неверные данные, то есть:

:in-range (числовые поля и слайдеры)

Числовые поля и слайдеры, содержащие числа, значение которых попадает в диапазон, заданный минимумом и максимумом, и соответствующие шагу, могут быть выбраны селектором :in-range. Но, вообще-то, крайне затруднительно вывести слайдер за пределы…

:out-of-range (числовые поля и слайдеры)

:out-of-range выбирает значения, которые находятся вне заданного диапазона значений поля ввода

:disabled

Поля ввода с атрибутом disabled можно выбрать с помощью псевдо-класса :disabled

Запомните, что отключенные поля не будут валидироваться, и их значение не будет отправлено на сервер. Но стили для псевдо-классов :required и :invalid все равно будут применяться и для отключенных элементов.

:enabled

По аналогии, не отключенные поля будут подвержены влиянию стилей для псевдо-классов :enabled (или :not(:disabled)). На практике вам, скорее всего, не придется пользоваться данным селектором, так как он представляет собой стили для обычного состояния полей ввода.

:read-only

Выбрать поля с атрибутом readonly (только для чтения) можно с помощью псевдо-класса :read-only. Запомните, что значения в полях, предназначенных только для чтения, все равно будут проверены и отправлены на сервер, но пользователь не сможет менять их значение.

:read-write

Обычные поля, доступные для редактирования, могут быть выбраны с помощью псевдо-класса :read-write (или :not(:read-only)). В общем, это не тот селектор, который будет часто вам нужен.

:default (только кнопки отправки или поля ввода)

И, наконец, есть селектор :default, который применяет стили к стандартной кнопке отправки формы.

Текстовые стили заполнителей

Атрибут placeholder можно стилизовать с помощью псевдо-элемента ::placeholder с вендорными префиксами (в раздельных правилах), например:

Специфика CSS

Вышеперечисленные селекторы могут применяться одновременно, так что нужно быть осторожными, определяя стили, которые могут быть применены к одному и тому же полю ввода. Представим:

Здесь мы указываем, что в поле с ошибкой текст должен быть красного цвета, но этого никогда не произойдет, потому, что после этого правила мы задали еще одно, где указали, что у включенных элементов текст черного цвета.

Старайтесь использовать простые селекторы, и использовать минимум кода. Например, пустое обязательное (:required) поле будет невалидным (:invalid), так что редко когда нужно стилизовать первое состояние.

Всплывающий блок валидации

При отправке, первое поле с неверным значением будет выделено всплывающим блоком с сообщением.

Его внешний вид отличается в зависимости от устройства и браузера. Только браузеры на движках Webkit/Blink дают возможность стилизовать этот всплывающий блок с помощью не совсем стандартных правил CSS:

Мой вам совет: даже и не пытайтесь это использовать. Если вам нужно собственное форматирование ошибок, то почти всегда вам нужно использовать собственные сообщения об ошибках. Для этого вам понадобится JavaScript.

Поддержка браузерами

Вышеприведенные стили применяются к полям немедленно. Например,

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

Мы рассмотрим ближе эти возможности в последней части серии статей.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/html5-forms-css/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 23994
Правила перепечатки

5 последних уроков рубрики «HTML5»

Расширяем возможности HTML за счёт создания собственных тегов

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

Создание форм с помощью Webix Framework — 4 практических примера

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

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Источник

Стилизуем формы при помощи CSS: руководство для начинающих

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «How to style forms with CSS: A beginner’s guide».

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

Раньше на сайтах были простые, скучные HTML-формы без всякой стилизации. Но с появлением CSS все изменилось. Благодаря новейшим свойствам CSS мы сейчас можем создавать куда более интересные и красивые формы.

И это не мое личное мнение. На иллюстрации ниже вы видите, как выглядит обычная HTML-форма без CSS.

А вот та же форма, в оформлении которой использовали каскадные таблицы стилей.

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

Наше руководство по стилизации форм при помощи CSS будет состоять из шести пунктов.

Прежде чем мы углубимся в нашу тему, важно понять, что нет никаких особенных стилей для форм. Ваши возможности в этом плане ограничены только вашим воображением. Это руководство лишь поможет вам начать создавать собственные уникальные варианты дизайна при помощи CSS.

1. Устанавливаем box-sizing

Я обычно устанавливаю * не только для форм, но и для веб-страниц. Благодаря этому ширина (width) всех элементов будет содержать внутренние отступы (padding).

Ниже приведена улучшенная версия нашего первоначального кода. В нее также добавлены псевдоэлементы :before и :after.

Совет: универсальный селектор * выбирает все элементы в документе.

2. Селекторы CSS для элементов ввода

Самый простой способ выбрать элементы ввода — использовать селекторы атрибутов.

Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:

3. Базовые методы стилизации для однострочных текстовых полей ввода

Чаще всего поля ввода в формах бывают однострочными. Обычно такое поле представляет собой простой блок с границей (его вид зависит от браузера).

Вот HTML-разметка для однострочного текстового поля с плейсхолдером.

Выглядеть это будет так:

Чтобы сделать это текстовое поле более привлекательным, можно использовать следующие свойства CSS:

Давайте пройдемся по каждому из этих свойств.

Padding

Добавление некоторого внутреннего пространства может повысить четкость. Чтобы это сделать, применяем свойство padding.

Margin

Если рядом с вашим полем ввода есть другие элементы, вы можете захотеть добавить внешний отступ, чтобы избежать слипания элементов.

Border

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

Совет: если убираете границу, обязательно добавьте цвет фона или тень. В противном случае пользователь просто не увидит ваше поле.

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

Box shadow

Свойство CSS box-shadow позволяет добавить тень элемента. Меняя 5 значений этого свойства, вы сможете добиться самых разнообразных эффектов.

Border radius

Свойство border-radius может очень сильно изменить вид ваших форм. Поля для ввода текста, имеющие скругление углов, выглядят совсем иначе.

Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.

Width

Используйте свойство width, чтобы установить ширину поля ввода.

Большинство браузеров используют разные семейства шрифтов и размер шрифта для элементов форм. Если необходимо, можно установить наследование шрифта от документа.

4. Стилизация прочих типов полей ввода

Вы также можете прописывать стили и для других полей — области текста, радиокнопок, чек-боксов и пр.

Давайте рассмотрим подробнее каждое из них.

Текстовые области (text areas)

Текстовые области напоминают однострочные текстовые поля ввода, с той лишь разницей, что здесь пользователь может ввести не одну строку текста. Обычно они используются, если нужно принимать более «многословные» данные: комментарии, сообщения и т. п. Для стилизации этих областей вы можете использовать все свойства, о которых мы говорили ранее.

Также для текстовых областей применимо и очень полезно свойство resize. В большинстве браузеров текстовые области по умолчанию могут растягиваться как по оси x, так и по оси y (значение: both). Но вы можете установить для этого свойства также значение horizontal или vertical.

Посмотрите на пример:

Здесь я использовал resize:vertical, чтобы разрешить изменение размера исключительно по вертикали. Такая практика применяется в большинстве форм, поскольку позволяет избежать появления горизонтальной полосы прокрутки.

Примечание: если вам нужно создать текстовую область с автоматическим изменением размера, следует использовать JavaScript. Но в нашей статье мы не будем углубляться в эту тему.

Чекбоксы и радиокнопки

Дефолтные чекбоксы и радиокнопки очень сложно стилизовать, для этого требуется более сложный CSS-код (и HTML — тоже).

Для стилизации чекбокса используйте следующий HTML-код.

Несколько вещей, на которые нужно обратить внимание:

Вот пользовательский чекбокс (комментарии в CSS-коде поясняют происходящее более подробно):

See the Pen yLNKQBo by Supun Kavinda (@SupunKavinda) on CodePen.

Вот пользовательская радиокнопка:

See the Pen eYNMQNM by Supun Kavinda (@SupunKavinda) on CodePen.

В обоих примерах мы использовали одну и ту же концепцию (input:checked).

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

Раскрывающийся список

Раскрывающийся список позволяет пользователю выбрать элемент из нескольких предложенных вариантов.

Но вы не можете стилизовать выпадающие элементы, потому что их стили зависят от операционной системы. Единственный способ изменить их вид — использовать JavaScript.

Кнопки

Как и у большинства элементов, у кнопок есть стили, установленные по умолчанию.

Давайте немного украсим нашу кнопку.

5. Псевдоклассы UI

Ниже приведен список псевдоклассов, которые широко используются с элементами форм.

Эти псевдоклассы могут использоваться для показа уведомлений в зависимости от атрибутов элемента:

Эти могут использоваться для создания эффектов для каждого состояния:

Сообщения, генерируемые при помощи :required

Показываем сообщение о том, что заполнение поля является обязательным:

Если вы удалите атрибут required при помощи JavaScript, сообщение «Required» исчезнет автоматически.

Мы можем сделать то же самое с псевдоклассами :valid и :invalid.

:hover и :focus

:hover выбирает элемент, когда на него наводится курсор мыши. :focus выбирает элемент, когда тот в фокусе.

Эти псевдоклассы часто используются для создания переходов и легких визуальных изменений. Например, можно менять ширину, цвет фона, цвет границы, густоту тени и т. п. Если вместе с этими свойствами использовать свойство transition, изменения будут более плавными.

Вот несколько эффектов наведения для элементов формы (попробуйте навести курсор на разные поля):

See the Pen yLNKZqg by Supun Kavinda (@SupunKavinda) on CodePen.

Когда пользователь видит небольшие изменения в элементе, происходящие при наведении мыши, он понимает, что с элементом можно что-то делать. Это важно для дизайна элементов форм.

Вы замечали, что в некоторых браузерах вокруг элемента, находящегося в фокусе, появляется синяя внешняя граница? Вы можете использовать псевдокласс :focus, чтобы удалить ее и добавить другие эффекты для элемента в фокусе.

Следующий код удаляет внешнюю границу для всех элементов:

Добавляем внешнюю границу для элементов в фокусе:

6. Элементы ввода, недоступные для кастомизации

Стилизация элементов форм всегда была сложной задачей. Есть некоторые элементы, с которыми не многое можно сделать в плане изменения стиля. Например:

Эти элементы предоставляются браузером и стилизуются в зависимости от вашей ОС. Единственный способ изменить их стиль — использовать кастомные контролы (Custom Controls), созданные при помощи div, span и прочих HTML-элементов, поддающихся стилизации.

Кастомные контролы для элементов форм уже разработаны для основных JavaScript-библиотек. Найти их можно на GitHub.

Заключение

К этому моменту у вас уже должно появиться понимание того, как стилизуются простые элементы форм и как использовать кастомные контролы для стилизации остальных элементов. Конечно, это лишь основные строительные блоки, при помощи которых вы можете создавать стили, рисуемые вашим воображением.

В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.

Источник