Как сделать красивую форму html

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

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

Как сделать красивую форму html

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

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

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

Как сделать красивую форму html

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

Как сделать красивую форму html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать красивую форму html

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

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

Padding

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

Как сделать красивую форму html

Margin

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

Как сделать красивую форму html

Border

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

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

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

Box shadow

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

Как сделать красивую форму html

Border radius

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

Как сделать красивую форму html

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

Как сделать красивую форму html

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).

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

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

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

Как сделать красивую форму html

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

Кнопки

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

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

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

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

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

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

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

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

Как сделать красивую форму html

Если вы удалите атрибут 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.

Заключение

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

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

Источник

Форма входа и регистрации с помощью HTML5 и CSS3

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.

Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).

Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute, чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes.

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

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

Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index.

Здесь мы назначим свойства для шапки:

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента :after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

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

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства :active и :focus.

Здесь мы использовали псевдо класс :not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства :focus и :active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы :before и :after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas. Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon), чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

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

Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс :target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

Источник

Создание простой формы на HTML, CSS и JavaScript

Дата публикации: 2011-02-23

Как сделать красивую форму html

От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.

Автор: Павел Карабило

Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).

Как сделать красивую форму html

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

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

В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.

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

Также скачайте исходники себе на компьютер!

Шаг 1.

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

поле для ввода имени автора сообщения;

поле для ввода адреса его электронной почты;

текстовую область для написания сообщения;

кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.

Источник

22 лучших формы входа и регистрации на сайте в HTML&CSS!

Как сделать красивую форму html

↓ Также Вам будет интересно ↓

В этой статье у нас есть для Вас специальная коллекция лучших форм: форма входа и форма регистрации для сайта, созданные с помощью CSS3 и HTML5 технологий, в современном стиле и некоторыми классными эффектами на JavaScript. Смотрите одну из лучших и современных форм входа с эффектами JQuery.

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

Чтобы помочь Вам, я подготовил для Вас подборку лучших, на моё мнение, форм, с различным расположением полей ввода, разными цветовыми оттенками и так далее. Некоторые имеют эффекты JavaScript, с 3D переворотами, эффектным появлением.

Я считаю, что веб-дизайн играет важную роль в создании подобных форм, и ему нужно уделить должное внимание. В принципе, форма входа имеет 3 стандартных поля: логин или имя пользователя, пароль, а также кнопка “Войти”.

1 → Темная форма входа

Как сделать красивую форму html

Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.

2 → Светлая форма входа

Как сделать красивую форму html

Светлая форма входа с прозрачной рамочкой и четкой структурой.

3 → Эффектная форма с эффектом появления

Как сделать красивую форму html

Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.

4 → Простая форма с эффектом появления

Как сделать красивую форму html

Простая форма, всего 3 стандартных элемента, но с приятным эффектом появления “снизу” с прозрачностью.

5 → Красивая форма с логотипом Apple

Как сделать красивую форму html

Продуманная форма на сайт с интересным дизайном и логотипом apple.

6 → Маленькая форма в розовом стиле

Как сделать красивую форму html

Маленькая и простая, в розовом стиле, и интересным дизайном.

7 → Светлая форма

Как сделать красивую форму html

Светлая, в выдержанном стиле и дизайне, ничего лишнего.

8 → Супер форма входа и восстановления пароля

Как сделать красивую форму html

Форма входа + обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.

9 → Приятная дизайнерская форма с эффектом

Как сделать красивую форму html

Приятная на вид, красивый эффект появления иконок при активации поля ввода.

10 → Форма серого цвета

Как сделать красивую форму html

Серый оттенок, в виде друг на друга наложенных листочков.

11 → Крупная форма с дополнительным элементом

Как сделать красивую форму html

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

12 → Дизайн в виде блокнота

Как сделать красивую форму html

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

13 → Красочная, прозрачная форма

Как сделать красивую форму html

Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.

14 → Apple Iphone форма

Как сделать красивую форму html

Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!

15 → Чёткая форма с заголовком

Как сделать красивую форму html

Четкая и простая форма, без никаких отвлекающих элементов, и заметным черным заголовком.

16 → Тёмная форма

Как сделать красивую форму html

Тёмная форма с красивой и заметной кнопкой отправки данных.

17 → Черная форма

Как сделать красивую форму html

Черная форма входа с белыми полями – хорошее сочетание цветов.

18 → Горизонтальная форма входа и регистрации

Как сделать красивую форму html

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

19 → Темная форма с дополнительными элементами

Как сделать красивую форму html

Темная форма с кнопками входа через социальные сети и красивыми полями.

20 → Форма входа на сайт + регистрация

Как сделать красивую форму html

Регистрация + форма входа, с 3D эффектом переключения между формами и социальными кнопками входа.

21 → Белая форма с красным заголовком

Как сделать красивую форму html

Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.

22 → Форма входа, регистрации и восстановление пароля

Как сделать красивую форму html

Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.

Заключение

Вот они и есть, все формы html css! Надеюсь, какая-то из них Вам точно подошла.

Данный урок подготовлен для вас командой сайта /
Подготовил: Владислав Бондаренко

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Как сделать красивую форму html