Формы html красивые: Коллекция из 15+ красивых форм регистрации и авторизации

50 бесплатных HTML5 и CSS3 форм входа для вашего сайта

Автор: Елизавета Гуменюк Рейтинг топика: +1

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

Формы входа присутствуют повсюду в Интернете. Вы пользуетесь социальными сетями? Необходимо зайти через форму входа. У вас есть электронная почта? Вы вступили в какое-либо сообщество или форум? Вы хотите оставить комментарий на сайте WordPress? Чтобы получить доступ к чему-нибудь в Интернете, скорее всего, вам придется пройти через процесс входа в систему. Вам, вероятно, придется сначала зарегистрироваться или оставить какую-то информацию о себе, а затем использовать форму входа, чтобы совершить  какое-либо действие онлайн.

Так почему формы входа нужно делать с помощью HTML и CSS? Это две существенные части.

HTML — это стандартный язык разметки, используемый для создания веб-страниц. HTML-элементы являются строительными блоками всех веб-сайтов.

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

Мы используем HTML для создания веб-сайта и CSS, чтобы он выглядел красиво. Это то, с чем большинство пользователей сталкиваются в интернете.

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

Creative Login Form

Простая, но креативная форма входа, созданная с использованием HTML5 и CSS3. Эта форма может быть также использована, как форма регистрации. Это наш любимый шаблон в этом списке благодаря своей гибкости и подобия.
 

DropDown Login Form

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

Floating Sign Up Form

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

Simple Login Form

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

После нажатия кнопки “Click me” в верхнем правом углу, вы получите плавную анимацию, которая превращает эту форму для входа в форму регистрации.
 

Login With Self-Contained SCSS Form

Это форма с автономным SCSS. Расширение CSS, которое добавляет силу и элегантность основному языку, что позволяет использовать различные опции и элементы.
 

Facebook Login

Это простая форма Facebook, которая с легкостью может быть импортирована в ваш сайт.
 

Animated Login Form

Это на самом деле анимированная форма входа, с надписью вверху “Эй ты, входи уже” трансформируется в поля для входа внизу формы.
 

Login Form Using CSS3 And HTML5

Это пример того, как создать простую регистрационную форму с помощью HTML5 и CSS3. Форма использует псевдо элементы (:after и :before), чтобы создать многостраничный эффект. Эти элементы поворачиваются с помощью свойства преобразования CSS3. Эта форма использует HTML5, чтобы сделать более простой подачу и валидацию.

iPhone Login Template

Творческий способ, чтобы продемонстрировать форму входа на iPhone.
 

Login With Shake Effect

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

Boxy Login Form

Квадратная форма входа с небольшим сюрпризом. Попробуйте “admin” в качестве имени пользователя и “1234” в качестве пароля  для полноценного опыта.
 

Animated Login Form

Изящная форма входа. Как только вы нажмете на “Вход” на левой стороне, эффект анимации создает аккуратную форму входа справа. Определенно уникальный подход!
 

Elegant Login

Material Design Form

Bootstrap Snippet Form

Login With Flat UI

Trendy UI Kits Form

Flat Login With Flat Design

Dashboard CSS3 HTML5 Form      

Login With Recovery Form

Flat Login Form

Transparent Login

Login With Google Chrome Extension

Elegant Flat Form

Stylized Login Form

jQuery Animated Sliding Login Form

Responsive Login

Transparent Form

Login With Social Integration

Show And Hide Password Form Example

Log ‘N Load Animated Form

Flat Modern Login Form

Flat CSS3 Form With Animated Background

CSS3 Cloud Animated Background Form

My Login Form

Simple Form For Inspiration

CSS3 Form With Logo

CSS3 Form With Shadow

Flat UI Form V2

Simple Login Widget

Fancy Login Form

Green And Yellow Form

Simple Form With Spinning Loader

Material Shadow Form

Password Protected Form

Paper Login CSS3 Form

Bootstrapped Twitter Login Form

Transparent Form With Logo

Modern Login Form

Источник

Без вкуса.

Сборная России презентовала новую форму, которую точно не назовешь удачной. Впрочем, в биатлоне с находками и выдумками – большие проблемы.

В отличие от командных видов, биатлон чересчур прост и не так технологичен в выпуске форм. Не бывает второго или третьего комплекта, домашнего или гостевого, светлого или темного, под декабрьские или январские этапы Кубка мира; под чемпионат мира, наконец (ну, только если кому-то захочется). Разнообразие – лишь на Олимпиадах, но там правила МОК и единые цвета для всей команды.

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

Понятны строгие ограничения в правилах, но чтобы шагнуть вперед (в том числе и в плане зрелищности), биатлону нужен технорывок. Где снаряжение от сборной? Где красивые комплекты форм? Наконец, где ее разнообразие? Пока отдает местечковостью и нежеланием сделать из биатлона бизнес. Мы часто говорим «зимний футбол», приводя в пример рейтинги тв-трансляций, но в остальном – ноль монетизации.

Можно начать хотя бы с формы. И присмотреться к ней внимательно. Хотели бы вы что-то купить?

Неудачный вариант. На Олимпиаде-2006 украинцев одели слишком пестро. Спутать на трассе Оксану Хвостенко, Лилию Вайгину-Ефремову или Андрея Дерезмлю с кем-то еще стало нереально, но с желтым цветом кто-то явно переборщил.

Удачный вариант. Свежайший пример – экипировка команды в прошлом сезоне и на ЧМ в Контиолахти. Эффектно, узнаваемо и при этом строго.

Германия

Неудачный вариант. На Играх в Ванкувере немцы, как и четырьмя годами раньше, отказались от традиционной расцветки и выбрали черно-белый дизайн. И зря. Только красно-желтые вставки на руках не позволяют назвать этот комплект сугубо тренировочным. Черный низ – это ужас, совсем как треники.

Удачный вариант. Сочи-2014 вообще стал парадом классных дизайнерских решений – по крайней мере, в биатлоне. Немцы тоже порадовали – сохранили привычные красно-оранжево-желтые мотивы, не нацепили «болванки» с тремя полосками и визуально осовременили форму.

Неудачный вариант. Неудачных вариантов было много – но это и не удивительно, французы тут главные экспериментаторы. Есть, например, психоделический асимметричный раскрас под ЧМ-2013 в Нове-Место.

Или новейший комплект, в котором братья Фуркады, Беатрикс и Дорен-Абер побегут этой зимой. Смотрите на них и следите, чтобы не закружилась голова.

Удачный вариант. Крутые находки, впрочем, тоже случались. Стильный и ненавязчивый выбор под Сочи-2014 – французских гонщиков было легко выделять в толпе, при этом не хотелось моментально отводить взгляд.

Или смелое сочетание фиолетового с желтым на ЧМ-2012 в Рупольдинге. Кажется, раньше на такие расцветки никто не решался.

Чехия

Неудачный вариант. Чехи гениально организовали ЧМ-2013 – самый посещаемый в истории. Но с выбором формы под турнир вышел прокол – «космический» раскрас выглядел слишком броско и даже нагло. А главное – цвета совсем чужие.

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

Беларусь

Неудачный вариант. К ЧМ-2015 в Контиолахти дизайнеры соорудили «сельский» комплект. Даже странно, что обошлось без косоворотки.

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

Россия

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

В прошлом сезоне, да и на Олимпиаде в Сочи сработала обратная крайность – экипировка выглядела чересчур строго и хмуро. По телекартинке низ всегда видно лучше, чем верх, но низ у наших не получался. Много синего, без отличительных красных вставок. Когда пелотон шел плотной группой, сразу найти там русских было сложно.

Удачный вариант. Пожалуй, комплекты сезона 2011-2012 и 2012-2013. Родные цвета, в меру ярко и лаконично – ничего лишнего.

Фото: Gettyimages.ru/Shaun Botterill, Vianney Thibaut/Agence Zoom (2,12), Al Bello, Lars Baron, Martin Rose/Bongarts; facebook.com/Jean-Guillaume-Beatrix; Gettyimages.ru/Richard Heathcote, Alexander Hassenstein/Bongarts; REUTERS/David W Cerny, Sergei Karpukhin; biathlon.by; twitter.com/biathlonrus; РИА Новости/Константин Чалабов, Илья Питалев; REUTERS/Petr Josek; Global Look Press/imago sportfotodienst

10 фрагментов кода для создания красивых форм

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

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

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

Кроме того, все они размещены бесплатно, поэтому вы можете копировать и играть с кодом по своему вкусу.

1. Материальный дизайн

Все знают о языке материального дизайна Google за последние несколько лет, когда он стал известен. Концепции материального дизайна были нацелены на приложения для Android, но быстро распространились в Интернете.

Если вам нравится минималистский стиль пользовательского интерфейса материалов Google, посмотрите на эту материальную форму, созданную Джоном Ульманном.

Работает на Sass и Pug для предварительной обработки CSS/HTML. Это также довольно легкая форма, и элементы дизайна материалов должны отображаться одинаково во всех браузерах.

Настоящий источник вдохновения для всех дизайнеров материалов.

2. Под водой

Совершите путешествие в океан в этой уникальной контактной форме, выполненной в водном стиле.

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

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

3. Bootstrap 3 Form

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

Эта форма BS3 делает все правильно, создавая поверх фреймворка Bootstrap. Он использует несколько рестайлингов в полях ввода и кнопке отправки, чтобы создать привлекательную форму Bootstrap, о которой вы никогда бы не догадались, что это Bootstrap.

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

4. Elegant Contact

Благодаря значкам Font Awesome и базовому адаптивному стилю эта контактная форма действительно уникальна.

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

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

И если вы ищете что-то немного уникальное, попробуйте добавить в смесь другой значок.

5.

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

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

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

6. Комбинация входа и регистрации

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

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

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

7. Контакт с классной доской

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

Кроме того, деревянная рамка помогает продавать эту вещь как настоящую.

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

8. Касса кредитной карты

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

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

9. Настраиваемая регистрация

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

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

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

Это довольно сложный эффект, который можно реализовать исключительно с помощью CSS, но разработчик Хосе Карнейро смог его реализовать.

10. Плавающие этикетки

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

Взгляните на эту форму с плавающей меткой, работающую на CSS3 и Compass.

Создатель Антон Симанов использует jQuery для надписей, но все это делается на заказ без каких-либо плагинов. Не говоря уже о том, что его решение работает для всех типичных стилей ввода, включая текстовые поля и меню выбора.

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

Чем больше вы изучаете шаблоны проектирования, тем больше идей у ​​вас появляется для реализации собственных проектов. И CodePen — отличный сайт для сбора этих идей.

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

Учебное пособие по HTML-формам | HTML & CSS Is Hard

№ 13. HTML & CSS Is Hard

Удобный учебник по веб-разработке для сбора данных, вводимых пользователем

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

Формы — это «денежные страницы». Это то, как сайты электронной коммерции продают свои продукты, как SaaS-компании собирают оплату за свои услуги и как некоммерческие группы собирают деньги в Интернете. Многие компании измеряют успех своего веб-сайта эффективностью его форм, потому что они отвечают на такие вопросы, как «сколько лидов наш веб-сайт отправил нашему отделу продаж?» и «сколько человек подписались на наш продукт на прошлой неделе?» Часто это означает, что формы подвергаются бесконечным A/B-тестам и оптимизации.

Есть два аспекта функциональной HTML-формы: внешний пользовательский интерфейс и внутренний сервер. Первый — это внешний вид формы (как определено в HTML и CSS), а второй — это код, который ее обрабатывает (хранение данных в базе данных, отправка электронной почты и т. д.). В этой главе мы полностью сосредоточимся на внешнем интерфейсе, оставив внутреннюю обработку форм для будущего руководства.

Настройка

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

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

Создайте новый проект Atom с именем формирует и вставляет в него новый файл HTML с именем Speaker-submission.

 

  <голова>
    <метакодировка='UTF-8'/>
    
    
  
  <тело>
    <заголовок>
       
Доклад спикера
 
      
Хотите выступить на нашей поддельной конференции? Заполнить
        эту форму.
    
  

 

Затем создайте файл styles.css и добавьте следующий CSS. Он использует простую технику flexbox для центрирования заголовка (и формы) независимо от ширины окна браузера:

 * {
  маржа: 0;
  заполнение: 0;
  box-sizing: граница-коробка;
}
тело {
  цвет: #5D6063;
  цвет фона: #EAEDF0;
  семейство шрифтов: "Helvetica", "Arial", без засечек;
  размер шрифта: 16px;
  высота строки: 1,3;
  дисплей: гибкий;
  flex-направление: столбец;
  выравнивание элементов: по центру;
}
.спикер-форма-заголовок {
  выравнивание текста: по центру;
  цвет фона: #F6F7F8;
  граница: 1px сплошная #D6D9ОКРУГ КОЛУМБИЯ;
  радиус границы: 3px;
  
  ширина: 80%;
  поле: 40px 0;
  отступ: 50 пикселей;
}
.  speaker-form-header h2 {
  размер шрифта: 30px;
  нижняя граница: 20px;
}
 

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

HTML-формы

На формы! Каждая HTML-форма начинается с метко названного элемента

 .speaker-form {
  цвет фона: #F6F7F8;
  граница: 1px сплошная #D6D9DC;
  радиус границы: 3px;
  
  ширина: 80%;
  отступ: 50 пикселей;
  поле: 0 0 40px 0;
}
 

 <дел>
  Имя