Как сделать красивое поле ввода

Современные формы на HTML5 и CSS3

Дата публикации: 2013-02-08

От автора: давайте рассмотрим создание функциональной формы html5, производящей валидацию пользовательских данных на стороне клиента. Сделав это, мы улучшим ее с помощью CSS, в том числе CSS3!

Шаг 1: Формирование представления о функциональности

Сначала нам нужно составить концепцию того, как будет выглядеть наша форма на HTML5, и как она будет функционировать. Для примера давайте создадим простую контактную форму, запрашивающую у пользователя следующую информацию:

Адрес электронной почты

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Шаг 2: Разработка формы

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

Видите, нашу форму составляют следующие элементы:

Заголовок
Обозначение обязательных для заполнения полей

Названия полей ввода

Поля ввода данных
Текст-заполнитель

Кнопка «Отправить» (Submit)

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

Шаг 3: Первичный код HTML

Вплоть до этого момента HTML-файл в браузере пока пуст. Это – просто начальный код для страницы HTML5.

Шаг 4: Форма HTML

Давайте создадим форму HTML (оставим метод action пока пустым, так как проверка данных на стороне сервера в этом учебнике не раскрывается):

Шаг 5: Элементы формы HTML

Для получения организованного и структурированного контента своей формы, обернем ее элементы (label, input и т.д.) в список. Так что начнем мы с создания заголовка формы и первого элемента input:

Подсказки для полей формы

Как видно из макета, мы собираемся сделать форматированные подсказки для полей ввода электронного адреса “email” и вебсайта “website”. Поэтому добавим свои подсказки под поля ввода, где это нужно, и назначим им класс, чтобы можно было позже определить им стили.

Остальные элементы input

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

Шаг 6: Добавляем атрибут placeholder

Одно из первых усовершенствований, которые предлагает HTML5 для веб-форм (с которым вы, возможно, уже знакомы) – это способность установить текст-подсказку. Он показывается, когда поле ввода либо пустое, либо находится не в фокусе.

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

Подсказка: Назначьте placeholder’у стили

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

В современных браузерах поддержка атрибута placeholder налажена довольно хорошо (кроме IE9, к сожалению). Если вам реально требуется поддерживать его во всех браузерах, можно посмотреть решение проблемы в javascript.

Шаг 7: Основной CSS

Чтобы создать для формы некую структуру, давайте добавим немного основного CSS. Я прокомментирую вам правила:

Удалите стиль :focus

Webkit автоматически добавляет к input-ам стили, когда те находятся в фокусе. Так как мы будем добавлять собственные стили, то стили по умолчанию нужно отменить:

Типографские стили

Давайте определим элементам своей формы типографские стили:

Стили списка

Давайте назначим стили элементам списка, чтобы придать форме структуру:

Кроме того, добавим тонкую рамку к верхнему и нижнему разделам формы. Выполнить это можно, применив селекторы :first-child и :last-child. Они выбирают, как подразумевается в их названиях, первый и последний элементы списка ul.

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

Заголовок формы

Назначим стили разделу заголовка своей формы. Он включает тэг заголовка и уведомление, которое информирует пользователей о том, что звездочка (*) обозначает поля, обязательные для заполнения.

Элементы input

Давайте назначим стили основным элементам формы, тем, которые предназначены для сбора пользовательской информации.

Теперь добавим несколько дополнительных визуальных стилей CSS. Некоторые из них видны только пользователям современных браузеров.

Шаг 8: Добавляем интерактивность с помощью CSS3

Давайте добавим немного интерактивности. Мы заставим выбранное в данный момент поле увеличиваться путем добавления отступа.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Теперь с помощью CSS3 для поддерживающих браузеров сделаем увеличение поля гладким переходом.

Шаг 9: Атрибут required в HTML5

Теперь пора заняться долгожданным: инструментами управления формой HTML5.

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

Итак, продолжим и добавим атрибут required во все элементы своей формы (потому что нам нужно, чтобы они все были заполнены).

Шаг 10: Стили обязательных для заполнения полей

Вы, возможно, заметите, что в визуальном плане от добавления атрибута required ничего не изменилось. Мы собираемся назначить стили обязательных для заполнения полей с помощью CSS. В этом примере каждое поле в качестве фонового изображения получит красную звездочку. Чтобы это сделать, нам нужно сначала добавить padding справа input-а, где будет находиться фоновое изображение (так будет предотвращено наложение текста, если запись окажется длинной строкой):

Теперь воспользуемся псевдоселектором CSS :required для того, чтобы выбрать все элементы формы с нужным атрибутом. Я сделал в photoshop’е простую иконку с красной звездочкой размером 16×16 px, которая послужит визуальным индикатором поля, обязательного к заполнению.

Что происходит при отправке формы?

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

В quirksmode можно посмотреть поддержку текущим браузером атрибута required.

Подсказка:

На самом деле в webkit назначить стили сообщению в поле-«пузыре» можно с помощью следующего:

Шаг 11: Понимание новых атрибутов type и валидации на стороне клиента в HTML5

Валидация HTML5 работает в соответствии с атрибутом type, установленном в полях формы. Годами HTML поддерживал лишь горстку атрибутов type, таких, как type=»text», но у HTML5 имеется более дюжины новых типов ввода данных, включая электронную почту и url, которые мы и собираемся использовать в своей форме.

Сочетая атрибуты ввода type с новым атрибутом required, теперь браузер способен делать валидацию данных пользователя на клиентской стороне. Если браузер пользователя не поддерживаем новые атрибуты type, такие как type=»email», он просто по умолчанию вернется к type=»text». Действительно, это довольно забавно. По сути, у вас есть обратная совместимость со всеми браузерами в мире, ура!

Так что происходит, если браузер на самом деле поддерживает новые атрибуты type? Для браузеров десктопов визуально нет никакой разницы (кроме определенной пользовательскими правилами CSS). Поле type=»text» выглядит точно так, как поле type=»email». Однако для браузеров мобильных устройств в отношении пользовательского интерфейса разница имеется.

Пример: iPhone

iPhone от Apple’а распознает типы формы и динамично изменяет экранную клавиатуру, предоставляя требуемые по контексту символы. Например, все электронные адреса требуют следующих символов: “@” и “.” И iPhone предоставляет эти символы, когда у input-a задан соответствующий тип.

Шаг 12: Изменение атрибутов type

Поля нашей формы уже установлены по умолчанию на type=»text». Но теперь требуется изменить атрибут типа в полях, предназначенных для электронной почты и вебсайта на соответствующий тип HTML5.

Источник

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

Источник

Поле ввода для текста с эффектом на CSS

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

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

Красивые эффекты для полей ввода на HTML + CSS

Так выглядит при проверки, где ниже идет ссылка на demo страницу:

input, span, label, textarea <
font-family: ‘Satisfy’, cursive;
display: block;
margin: 10px;
padding: 5px;
border: none;
font-size: 22px;
>

textarea:focus,
input:focus <
outline: 0;
>
/* Question */

input.question,
textarea.question <
font-size: 28px;
line-height: 48px;
font-weight: 300;
border-radius: 2px;
margin: 0;
border: none;
width: 100%;
background: rgba(0, 0, 0, 0);
transition: padding-top 0.2s ease, margin-top 0.2s ease;
overflow: hidden; /* Hack to make «rows» attribute apply in Firefox. */
height: 60px;
color: #fff;

>
/* Underline and Placeholder */
textarea.question <
line-height: 64px;
resize: none;
>
input.question + label,
textarea.question + label <
display: block;
position: relative;
white-space: nowrap;
padding: 0;
margin: 0;
width: 10%;
border-top: 4px solid #ff12b6;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
height: 0px;
border-radius: 5px;
>

input.question:focus + label,
textarea.question:focus + label <
width: 100%;
>

input.question:valid + label,
textarea.question:valid + label <
border-color: #1183FF;
>

input.question:invalid,
textarea.question:invalid <
box-shadow: none;
>

input[type=»submit»] <
-webkit-transition: opacity 0.2s ease, background 0.2s ease;
transition: opacity 0.2s ease, background 0.2s ease;
display: block;
opacity: 0;
margin: 8px 0px 15px 0px;
padding: 8px;
cursor: pointer;
border-radius: 75px;
width: 170px;
box-shadow: 5px 5px 10px rgba(27, 26, 26, 0.3);
background: #c7118f;
color: #f7f3f3;
border: 2px solid #a2a1a1;
>

input[type=»submit»]:hover <
background: #D11A98;
>

input[type=»submit»]:active <
background: #D11A98;
>

input[type=»submit»] <
-webkit-animation: appear 1s forwards;
animation: appear 1s forwards;
>
hr <
clear: both;
margin-top: 10px;
margin-bottom: 50px;
border: 0;
>
input.question:invalid

input[type=»submit»] <
display: none;
>

@-webkit-keyframes appear <
100% <
opacity: 1;
>
>

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

Источник