89 CSS Forms

:hover и :focus

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

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

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

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

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

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

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

*:focus {outline:none !important}

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

input[type=text]:focus {
  background-color: #ffd969;
  border-color: #000;
  // and any other style
}

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

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

Пример:

.some-class {
  width:200px;
  padding:20px;
}

Ширина
.some-class без box-sizing:border-box будет больше
200px, что может стать проблемой. Поэтому
большинство разработчиков используют
border-box для всех элементов.

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

*, *:before, *:after {
  box-sizing: border-box;
}

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

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

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

input[type=text] {
  // input elements with type="text" attribute
}
input[type=password] {
  // input elements with type="password" attribute
}

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

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

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

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

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

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

• Padding (внутренние отступы)
• Margin (внешние отступы)
• Border (граница)
• Box shadow (тень блока)
• Border radius (для скругления границ)
• Width (ширина)
• Font (шрифт)

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

3d login form concept

See the Pen 3D login form concept by Jenning (@jenning) on CodePen.

This simple looking 3D form will surprise you with rotation as you fill the fields with your login and password.

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

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

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

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

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

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

• :required
• :valid и :invalid
• :checked (этим мы уже пользовались)

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

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

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

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

Например, чтобы стилизовать <input
type=»file»>, мы можем спрятать дефолтный
input и использовать пользовательскую
кнопку.

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

A collection of free html/css sign-in/sign-up registration forms

Now that you know what to look for in a form, let’s look at this wonderful selection of login tools that you can get for free.

Amazing css3 login form

See the Pen Amazing CSS3 Login Form by design8383 (@design8383) on CodePen.

I like this lightweight and a little old-school design. The form works fine and leaves a sweet cartoon-like impression.

Angular login form validating with mock data

See the Pen Angular Login form validating with mock data by Jatinder (@jatinderbimra) on CodePen.

Here we have a minimalistic login form with validation against mock data.

Angularjs login form

See the Pen Angularjs Login Form by Yavuz Selim Kurnaz (@yavuzselim) on CodePen.

Here’s another great solution for a business site. Here we have a nicely designed form with dynamic fields and a side panel.

Animated login form

See the Pen Animated Login Form by Che (@code_dependant) on CodePen.

This colorful form opens up when you hover over it. The author promises us more invisible sign-in registration forms soon, so let’s stay updated.

Animated search box

Animated search box using HTML, CSS and jQuery.

Animating search box

An animating search box made with HTML & CSS.Made by Jarno van RhijnFebruary 5, 2022

Basic login form using bootstrap

See the Pen Basic Login Form using Bootstrap by Zachary Shupp (@zacharyshupp) on CodePen.

This is a perfect tool to be used with Bootstrap templates. It will adapt to them without any issues.

Batman login form

See the Pen Batman login form by Hugo Giraudel (@HugoGiraudel) on CodePen.

A very stylish black sign-in form with a shiny visual effect! It will brighten up any strict corporate site.

Beautiful login form

See the Pen Beautiful Login Form by Rosh Jutherford (@the_ruther4d) on CodePen.

A minimalistic and pretty login form for paper style layouts.

Best horizontal android login form

See the Pen Best Horizontal Android login form by Rachid Taryaoui (@taryaoui) on CodePen.

Here’s a nice sign-in form for simple WordPress projects. Check out the neon color gradient effects on the sign-in button.

Border

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

.border-customized-input {
   border: 2px solid #eee;
}

Вы также можете вообще убрать границу.

.border-removed-input {
  border: 0;
}

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

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

Border radius

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

.rounded-input {
  padding:10px;
  border-radius:10px;
}

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

Bouncy search box

HTML, CSS and JavaScript bouncy search box.Made by Guillaume SchlipakDecember 5, 2022

Box shadow

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

input[type=text] {
  padding:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
}

Boxy-login

See the Pen boxy-login by Chris Simari (@chrissimari) on CodePen.

Brutalist inspired login form with html5 pattern validation

See the Pen Brutalist Inspired Login Form with HTML5 Pattern Validation by Nikki Pantony (@nikkipantony) on CodePen.

This old-school style sign-in form was inspired with Brutalist. It looks impressive! It features flat visual effects and data validation.

Bubble animated login form

See the Pen Bubble animated Login Form by Akhil Sai Ram (@akhil_001) on CodePen.

Want to bubble up your site? This form offers pretty animation and dynamic transitions for your new site.

Checkout card

Checkout card form with React.js.Made by Jack OliverAugust 20, 2022

Concept material login form

See the Pen Concept Material Login Form by İbrahim ÖZTÜRK (@ibrahimozturkme) on CodePen.

A beautiful monocolor sign-in form. The fields are dynamic, and there is some animation when you click on the Login button.

Credit card checkout

Clean and simple credit card payment checkout form, with css3, html5, and little bit of jQuery, just to make slightly better UX.Made by Momcilo PopovJuly 18, 2022

Credit card flat design

Pure CSS credit card flat design.Made by Jean OliveiraMay 18, 2022

About a code

Untitled form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: –

Credit card payment

Non functional UI credit cards payment. Coded for practice raw JS for DOM manipulation.Made by Shehab EltawelMay 5, 2022

Credit card ui

Credit card UI with HTML and CSS.Made by Star St.GermainOctober 23, 2022

Css 3 cheat sheets

By clicking the button you agree to the Privacy Policy and Terms and Conditions.

Css animated login form

See the Pen CSS Animated Login Form by Jordan Parker (@jordyparker) on CodePen.

A bright login form enhanced with CSS. The design doesn’t have many extra details but will work perfectly fine for simpler projects.

Css login form

See the Pen CSS login form by Hugo Giraudel (@HugoGiraudel) on CodePen.

This sign-in form is far from generic. It is a perfect solution for flat site designs.

Css newsletter with animated floating input labels

Move placeholder above the input on focus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: –

Css search box

It searches things, probably something similar been done before.Made by Jamie CoulterJanuary 12, 2022

Css3 animation cloud and login form

See the Pen CSS3 Animation Cloud and login form by Ravinthranath (@ravinthranath) on CodePen.

How about this dynamic and colorful form for sites and games? The clouds move at different speeds, so it resembles the Parallax effect. Check out the details!

Dailyui #001 – sign up

See the Pen DailyUI #001 – Sign Up by Maycon Luiz (@mycnlz) on CodePen.

If you like sliders, check out this form. The panel with additional login options slides into view when clicked upon.

Diagonally-cut search and login form

See the Pen Diagonally-cut Search and Login Form by Aleks (@achudars) on CodePen.

Here’s a smart two-in-one design concept. You get a sign-in button and a search field all in one tool. The fields are transparent while the background is very impressive.

Elastic login form

See the Pen Elastic Login Form by Andrej Mlinarević (@andrejmlinarevic) on CodePen.

Elegant login form

See the Pen Elegant Login Form by Victor Hugo Matias (@reidark) on CodePen.

Nothing extra in this one, just a stylish sign-in page design.

Emoji form validation

Emoji form validation in pure CSS.Made by Marco BiedermannJune 6, 2022

Fancy parallax login form

See the Pen Fancy Parallax Login Form by Derek Hill (@MrHill) on CodePen.

A very dynamic design that features changing neon backgrounds and a rotating Parallax panel.

Flat html5/css3 login form

See the Pen Flat HTML5/CSS3 Login Form by Aigars Silkalns (@colorlib) on CodePen.

Flat login form

See the Pen Flat Login Form by Andy Tran (@andytran) on CodePen.

This is a simple flat design form that features CSS3 animation. It is flexible and fit for less demanding web design projects.

Flat ui login form

See the Pen Flat UI Login Form by Brad Bodine (@bbodine1) on CodePen.

One more example of a CSS3 form made with flat design. It has several working tabs and a nice clickable button.

Flat ui login form – blue

See the Pen Flat UI Login Form – Blue by Benjamin Gagne (@benngagne) on CodePen.

This nice and simply coded form allows speedy registration in just a few seconds. It features a 3D button and dynamic fields.

Flexbox form

A form made with flexbox.

Flickering login

See the Pen Flickering Login by Jeff Thomas (@aecend) on CodePen.

A glass-like design with glimmering animation to toggle when valid and invalid data is entered. This design will work best with a high-tech or corporate website.

Flipping login form

See the Pen Flipping login form by HollowMan (@HollowMan) on CodePen.

Here is another black minimalistic login form with a nice texture.

Form with social logins

See the Pen Form with social logins by Joe (@dope) on CodePen.

Check out this bright and tasty-looking form with social media options available on the additional panel that emerges when you press the “Oh, social?” link.

Fullscreen search

This search input should work with any position/layout type, including normal pages with scroll. Just don’t override .s–cloned styles for .search and everything will be okay. Requires specific styles for containers (check html body and .scroll-cont styles) and .search-overlay element to be placed in the root.Made by Nikolay TalanovOctober 5, 2022

Hide/show password login form

See the Pen Hide/Show Password Login Form by Geoffrey Rose (@geoffreyrose) on CodePen.

This one is a hide and show sign-in form with a striking design.

Interactive form

Interactive input form built with just CSS. Abusing focus state & labels to handle transitions & navigation. Navigate between inputs using Tab (Next) & Shift Tab (Prev). Pure CSS. No JS included.Made by Emmanuel PilandeMarch 7, 2022

Interactive sign up form

A concept for an interactive signup form.Made by Riccardo PasianottoMarch 1, 2022

Iron man login form

See the Pen Iron Man Login Form by Hugo DarbyBrown (@hugo) on CodePen.

A masterpiece! Here’s a dynamic animated form for WordPress. Get it and imagine yourself as Tony Stark launching a blog!

Log in / sign up

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, unicons.css

Log in form

See the Pen Log in form by Kamen Nedev (@nedev) on CodePen.

A unique dark transparent design with bright red elements. There are also sign-in, register, and password renewal panels.

Log in form css 2022

See the Pen Log In Form CSS 2022 by Omar Dsoky (@linux) on CodePen.

A very vanilla-looking design with simple animation.

Login form

See the Pen Login Form by Tyler Fry (@frytyler) on CodePen.

Login form – jquery animate

See the Pen Login form – JQuery animate by MBheiry (@MBheiry) on CodePen.

A fresh-looking sign-in form that has all it takes: dynamic fields, toggles, social media options. This one is made using JQuery animation.

Login form – modal

See the Pen Login Form – Modal by Andy Tran (@andytran) on CodePen.

The invisible registration panel will appear when clicked on. Select the blue tab on the right and enter your registration details.

Login form & email client

See the Pen Login form & Email client by Hugo DarbyBrown (@hugo) on CodePen.

A very sleek and youthful login form with SVG elements and blurred background. Note the awesome typography!

Login form ( only css )

See the Pen Login Form ( Only CSS ) by sean_codes (@sean_codes) on CodePen.

This CSS-only sign-in form features sign-in and register option panels rendered in gradients with nice animation.

Login form bootstrap

See the Pen Login form bootstrap by Aniuska Maita Aparicio (@aniusk18) on CodePen.

Login form build where eyes follow cursor

See the Pen Login form build where eyes follow cursor by Jesper Lauridsen (@justjspr) on CodePen.

In this form, the eyes of the character follow the cursor and her smile changes. The design features field highlighting and other interactive effects. Overall, it looks very cheerful. Check it out!

Login form: weather animation #april-weather

See the Pen Login Form: weather animation #april-weather by Claudia (@eyesight) on CodePen.

A simple design with changing colors, a cute button, and impressive dynamic transition to the “Forgot your password?” panel.

Login password mask

See the Pen Login Password Mask by Tyler Kelley (@TylerK) on CodePen.

Here you can choose to mask your password and see the new password field emerge.

Login template powered with boostrap

See the Pen Login Template powered with Boostrap by Robin Savemark (@robinsavemark) on CodePen.

This awesome dynamic form built on Bootstrap has a pop-up login panel and a rich background.

Login to everdwell

See the Pen Login to Everdwell by Kaushalya R. Mandaliya (@kman) on CodePen.

A massive and bright social media and email sign-in form will help you create an attractive and functional site.

Make sure it has labels indicating the point of each field

Without a label, no one will know what they are expected to do with a certain field and what kind of data they are supposed to enter. The fields look similar, and you don’t want your site visitors to be busy guessing where to do what. Add labels.

Margin

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

Market – login form

See the Pen Market – Login Form by Andy Tran (@andytran) on CodePen.

Material design login form

See the Pen Material Design Login Form by Josh Adamous (@joshadamous) on CodePen.

This neutral form will be a perfect fit for any web project. It has an awesome material design solution that comes absolutely free.

Material design login/signup form

See the Pen Material Design login/signup form by Davide Vico (@masterdave) on CodePen.

Material login

See the Pen Material Login by Vineeth.TR (@vineethtr) on CodePen.

A color-rich and beautiful example of material design used in login registration forms. The fields are nicely animated, and the panel features social media login options.

Material login form

See the Pen Material Login Form by Andy Tran (@andytran) on CodePen.

Morphing login form

See the Pen Morphing Login Form by The Legend (@the_leg3nd) on CodePen.

An uncomplicated form with simple animation. Still very nice!

Neomorphic form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: ionicons.css

Padding

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

input[type=text] {
  padding: 10px;
}

Panda login

See the Pen Panda Login by Vineeth.TR (@vineethtr) on CodePen.

This big panda will watch your cursor as you move it on the page. The form is very interactive and makes you want to stay on the website and play with it for some time. It features pretty CSS transitions and very nice UI elements. Check them out!

Payment card checkout

Payment card checkout in HTML, CSS and JavaScript.Made by Simone BernabèJuly 8, 2022

About the code

No questions asked form & magic focus

Pop up login form

See the Pen Pop Up Login Form by Afdallah Wahyu Arafat (@codot) on CodePen.

This one was created with Bootstrap Modal. A beautiful panel rendered in color gradients appears when you press the sign-in button.

Popup login & signup with jquery

See the Pen Popup Login & Signup with jQuery by Bijay Pakhrin (@monkeytempal) on CodePen.

Check out this beautiful pop-up form for social media or email login. Sign-up fields appear after you click on the right button.

Popup login form materialize css

See the Pen Popup login form materialize css by Web Zone (@skcals) on CodePen.

Press the Login button and see the panel materialize with CSS effects. A simple and nice design.

Pull-out search bar concept

HTML and CSS pull-out search bar conceptMade by Asna FaridFebruary 22, 2022

Pupassure sign up form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Pure css3 login form

See the Pen Pure CSS3 Login Form by Daniel Zawadzki (@danzawadzki) on CodePen.

This is a nice form with an icon and bright visuals. We are expecting a switch to the sign-up panel for this form soon.

Random login form

See the Pen Random Login Form by Lennart Hase (@motorlatitude) on CodePen.

This one was created when experimenting with sign-in registration forms. It works alright though, and is a unique choice. Check out the details!

React login form

See the Pen React Login form by Lakston (@Lakston) on CodePen.

A beautiful and simple login form rendered in deep blue hues.

Read also

30 Original Solutions for Your Site’s Contact Us Page

How To Create A Catchy Search Field With CSS?

Free Pricing Table Snippets in HTML & CSS

Free HTML & CSS Material Design Code Snippets

Ninjas of Web Development: 30 CSS Puns That’ll Crack You Up

Rectangular prism login form

See the Pen Rectangular Prism Login Form by Jon Kantner (@jkantner) on CodePen.

Responsive contact form

Only SCSS/CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Responsive login form

See the Pen Responsive Login Form by Omar Dsoky (@linux) on CodePen.

Look at this bright design inspired by the jungle. The form has two vertically placed panels with multiple sign-in options.

Responsive signup/login form

See the Pen Responsive Signup/Login form by Mohamed Hasan (@Mhmdhasan) on CodePen.

This is a big sign-in form with additional panels. It is responsive, so you will enjoy its UI on any screen.

Revised login form

See the Pen revised login form by Daljeet Dhaliwal (@daljeet) on CodePen.

One more Tony Stark masterpiece for your cartoon universe! It is very dynamic and impressive.

Search animation

Search animation with HTML, CSS and JavaScript.Made by DmitriyFebruary 26, 2022

Search bar

Search bar with HTML, CSS and JavaScript.Made by Adam KuhnSeptember 21, 2022

Search bar animation

Search input with morphing effect.Made by Milan MiloševSeptember 23, 2022

Search button animation

Search button animation with HTML, CSS and JavaScript.Made by Kristy YeatonApril 20, 2022

Search field

HTML and CSS search field.Made by Bahaà Addin BalashoniJuly 9, 2022

Search input context animation

CSS icons, context animation, Telegram app-like search loading effect.Made by Riccardo ZanuttaApril 19, 2022

Search transformation

Interactive prototype of search form transformation.Made by Lucas BourdalléOctober 22, 2022

Search ui

Search concept with options.Made by Fabio OttavianiMarch 10, 2022

Sign up

Sign up form UI with React.js.Made by Jack OliverOctober 25, 2022

Sign up and login form

See the Pen Sign up and login form by Charlie Yang (@mrtial) on CodePen.

Check out this awesome form that features a slider. You can choose either sign-in or sign-up options and see the panels move to the side.

Sign up form

Sign up with HTML, CSS and JavaScript.Made by Tommaso PolettiAugust 4, 2022

Sign-in and sign-up panels should be kept separate

Have you ever typed your email into a form only to find out that you are using the wrong one? It’s annoying. Make sure it’s crystal clear where the registration form is and where you can sign in with an existing account. It’s better not to show two registration forms at the same time to avoid confusion.

Sign-up/login form

See the Pen Sign-Up/Login Form by Eric (@ehermanson) on CodePen.

The author used tabs and moving form labels in this modern and minimalistic form. It is neutral, so the design will be a perfect fit for any kind of website.

Simple login form animated

See the Pen Simple Login Form Animated by Himanshu Chaudhary (@himanshu) on CodePen.

You can’t miss this rather simple form because of its awesome animated element. The fields are transparent, and you won’t be able to stop looking at the background abstract shape.

Simple login form template

See the Pen Simple Login Form Template by Brock Nunn (@banunn) on CodePen.

Nothing too special about this one; just a good, usable form for your new site.

Simple login form w/ social logins

See the Pen Simple Login Form w/ Social Logins by Chris M (@Lymelight) on CodePen.

A very adaptable form with multiple sign-in options.

Simple login widget

See the Pen Simple Login Widget by Alexander Eckhart (@lexeckhart) on CodePen.

A mobile-friendly login widget placed vertically enhanced with CSS3 effects and JQuery validation.

Simple mobile search input

This is an example of search input, that could be put in a mobile template for an e-commerce or wheather or much more :)Made by Tommaso PolettiJuly 13, 2022

Sleek login form

See the Pen Sleek Login Form by emma (@boltaway) on CodePen.

What a beauty! This is a minimalistic yet very nice form with subtle lines on a stylish background.

Slicing design subcribe modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: –

Slide reveal login form

See the Pen Slide Reveal Login Form by Hugo DarbyBrown (@hugo) on CodePen.

This form will surprise you with an original slider – the sign-in fields appear under the front panel that opens up when hovered upon.

Slide to reveal password

See the Pen Slide to reveal password by Nicolas Slatiner (@slatiner) on CodePen.

An original sign-in concept where you can slide the toggle to reveal the password.

Snake highlight

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

This cutting-edge design features bright snake field highlights. This effect looks like neon lights. Check it out for yourself!

Split screen login form

See the Pen Split Screen Login Form by thelaazyguy (@thelaazyguy) on CodePen.

A nice split-screen design where a big sliding panel appears from the side of the front one. The form offers social media sign-in options.

Step by step form

A take on the codrops version with the possibility to go back and confirm all inputs.Made by Jonathan HNovember 8, 2022

Step by step form interaction

A simple step form for customer experience.Made by Bhakti Al AkbarMarch 4, 2022

Subscribe form

Subscribe form with animated button in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: –

Svg search…

SVG search icon that transitions to underline on focus.Made by Mark ThomesJune 28, 2022

Ui credit card

UI credit card with HTML, CSS and JavaScript.Made by GilOctober 22, 2022

Unfolding login form

See the Pen Unfolding Login Form by Hans Engebretsen (@hans) on CodePen.

Here’s a very original design with 3D elements when showing the password.

Wavy login form

See the Pen Wavy login form by Danijel Vincijanovic (@davinci) on CodePen.

This one offers beautiful vertical wave animation. Make sure you check it out!

What to look for in a good login form?

How can you tell that you’ve done a good job creating a login form?

Width

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

input {
  width:100%;
}

Делай два.

Едем дальше. Создадим стиль для кнопочки(Войти) поменяем цвет , шрифт и поправим заголовок(Вход)

.form_title { 
         text-align: center; # Текст по центру
         margin: 0 0 32px 0; # Внешний отступ на всех четырех сторонах элемента. 
         font-weight: normal;# Насыщенность шрифта, убираем жирность.
 }

Кнопочка :

.form_button {
         padding: 10px 20px;
         border: none; # Без границы блока.
         border-radius: 5px; # Радиус закругления
         font-family: sans-serif;
         letter-spacing: 1px;
         font-size: 16xp;
         color :#fff ; # Цвет текста
         background-color: #0071f0; # Цвет фона
         outline: none; #  Внешней границы элемента 
         cursor: pointer; # Тип курсора при наведение
         transition: 0.3s; #  transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства
 }

Добавляем стили в HTML :

Кнопки

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

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

button {

  /* remove default behavior */
  appearance:none;
  -webkit-appearance:none;

  /* usual styles */
  padding:10px;
  border:none;
  background-color:#3F51B5;
  color:#fff;
  font-weight:600;
  border-radius:5px;
  width:100%;

}

Немного анимации, завершаем.

Начнем с кнопки , если она в фокусе или на нее нажимают меняем цвет бэкграунд:

.form_button:focus,
.form_button:hover{
         background-color: rgba(0, 113, 240, 0.7); RGBA Цвет фона и значение прозрачности. 
 }

Когда поле ввода в фокусе , поменяем цвет нижней границы:

Описываем переключатели

Переключатели сделаем при помощи label, в нутрии располагаем заголовок (Вкладка 1, Вкладка 2) и соответственно названия полей.

Описываем структуры для авторизации

Открываем, тег form, присваиваем для него класс tab-form, что бы к ней было проще обращаться при оформлении.

В нутрии формы вкладываем input для ввода Email, прописываем название данного поля при помощи placeholder.

Дублированием текущий input, и модифицируем его под ввод пароля.

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

Ниже создаем блок с социальными иконками.

Блок с иконками оформим в виде списков, в нутрии каждого списка помещаем ссылку, а в ней уже размещаем иконку.

Иконки отбираю через статью Работа со шрифтовыми иконками. Вы так же можете перейти по ссылке, отобрать те иконки, которые вам нужны, и прописать соответствующий класс в теге (i) внутри ссылки.

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

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

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

Описываем структуры для регистрации

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

Первое поле так и остается для ввода Email, хотя можно дописать в нем placeholder  «Введите E-mail адрес», что бы чем-то оно отличалось.

Далее пойдет аналогичное поле для ввода имени только с другим атрибутом type и placeholder. Ниже ссылка, меняем в ней название на «Регистрация».

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

В нем располагаем input с type checkbox, а ниже его label с ссылкой на соглашение.

Особенности

• В верстке данной формы используется всего одно изображение — для фона страницы. Хотя и оно не обязательно. Возможности CSS3 позволили обойтись без изображения при создании кнопки.
• Максимально приближенно к исходному дизайну форма выглядит в правильных браузерах: Opera, Firefox, Chrome, Safari (исключение составляет лишь больший радиус закругления у внешней обводки полей ввода). Есть некоторые недочеты в IE9 (некорректные закругления углов полей ввода, отсутствие градиента у кнопки). Ну а если смотреть в более ранних версиях IE, то, как обычно, всей красоты мы лишаемся. Конечно, при желании в IE кнопку можно сделать изображением.
• Широкая обводка, которая присутствует у полей ввода помимо бордюра, реализована с помощью свойства box-shadow. В связи с особенностью этого свойства, радиус закругления получился больше, чем на исходном дизайне, но, я думаю, это не портит картину.

Пользуйтесь на здоровье.

* * *

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

Оформляем блоки с формами в css

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

Оформляем вкладки

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

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

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

Для этого сделаем фон формы прозрачным на 20%, и этот фон будет как бы внешней его частью, а самой форме зададим белый цвет, для этого классу dws-form добавляем соответствующий background, а белого цвета.

.dws-form {
 background: rgba(255, 255, 255, 0.2);
…

.tab-form {
 background: #fff;
}

Затем, нам нужно показать, как будет выгладить активная и неактивная вкладка.

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

Добавляем его и в CSS сразу опишем его стили.

Поля ввода, подсказки.

Дальше на очереди поля в вода. Если вы обратили внимание каждое поле находиться в своем блоке <div> . Задаем стиль для блоков :

Предварительная подготовка файлов

Делаем общею разметку, а далее оформляем блоки при помощи CSS.

Сделаем index файл и прописываем в нем DOCTYPE. 

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

В самой структуре расположен блок с классом dws-wrapper, в нем буду описывать html разметку , а затем при помощи данного класса все выровним посередине экрана. Я его использую для удобства записи и просмотра текущего видео урока. Так что сам класс этот не обязательный, и в своих примерах можете его не прописывать.

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

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

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

select {
  width: 100%;
  padding:10px;
  border-radius:10px;
}

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

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

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

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

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

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

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

• Поскольку мы используем <label> в
  качестве обертки для <input>, если вы
  кликнете на любой элемент внутри
  <«label«>, «кликнутым» будет <input>.
• Мы спрячем <input>, потому что
  браузеры практически не позволяют нам
  его модифицировать.
• Чтобы получить положение «отмечено»
  и стилизовать пользовательский чекбокс,
  мы будем использовать псевдокласс
  input:checked.

Заключение

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

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