80 de formulare CSS

Colecție gratuită de exemple de coduri de formulare HTML și CSS: interactive, pas cu pas, simple, validare etc. Actualizare a colecției din aprilie 2019. 11 articole noi.

Cuprins

1. Formulare interactive (pas cu pas)

1. Formulare de contact CSS
2. Formulare CSS Login
3. Formulare CSS Checkout
4. Formulare CSS Subscribe
5. Formulare Bootstrap
6. Formulare Bootstrap Login
7. Formulare jQuery

Despre un cod

Conectare Formular

Formular de conectare cu substituent plutitor și buton luminos.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependențe: –

Despre un cod

Formular de înscriere Pupassure

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependențe: font-awesome .css

Despre un cod

Formular abstract de înscriere

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependențe: –

Despre un cod

Formular de contact colorat

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: da

Dependențe: –

Despre un cod

Formă neomorfă

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependențe : ionicons.css

Despre un cod

Mai puțin ying Form

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: da

Dependențe: –

Despre un cod

Flexbox Responsive Form

Browsere compatibile: Chrome, Edge, Firefox , Opera, Safari

Responsive: yes

Dependențe: –

Despre un cod

Formular de conectare animat

Acest formular de conectare animat este creat doar cu HTML și CSS. Fără SVG, fără JavaScript, fără GreenSock. Caracterul zâmbește atunci când formularul de conectare este corect.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependențe: –

Despre un cod

Formular de autentificare material transparent

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: nu

Dependențe: –

Despre un cod

Formular de contact receptiv

Numai SCSS / CSS.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: da

Dependențe: font-awesome.css

Despre un cod

Pagina de conectare

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: da

Dependențe: –

Despre cod

Formular de abonare

Formular de abonare cu buton animat în HTML și CSS.

Browsere compatibile: Chrome, Firefox, Ope ra, Safari

Responsive: yes

Dependențe: –

Despre cod

Formular de căutare

Formular de căutare cu animație amuzantă și buton de ștergere.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependențe: –

Despre cod

Ecran de conectare

Interfață de utilizator a ecranului de conectare la modă.

Despre cod

Design UI formular de conectare

Design UI formular formular de conectare folosind HTML și Sass și jQuery.

Despre cod

Formular Flexbox

Un formular realizat cu flexbox.

Despre cod

Invision Login

Conectați formularul UI.

Despre cod

Casetă de căutare animată

Casetă de căutare animată utilizând HTML, CSS și jQuery.

Despre cod

Conectare & UI formular de înscriere

Microinteracțiune pentru formularul de înscriere / conectare.

Despre cod

Erori neplăcute

Erori de formă cu animația obnoxious.css.

câmp de căutare

câmp de căutare HTML și CSS.
Realizat de Bahaà Addin Balashoni
9 iulie 2017

Checkout Card Card

Checkout card în HTML, CSS și JavaScript.
Realizat de Simone Bernabè
8 iulie 2017

Despre cod

Formular fără întrebări & Magic Focus

Recreația formularului fără întrebări cu accent magic.

Validarea formularului Emoji

Validarea formularului Emoji în CSS pur.
Realizat de Marco Biedermann
6 iunie 2017

Card de credit Design plat

Design plat al cardului de credit CSS.
Realizat de Jean Oliveira
18 mai 2017

Formular de conectare design material

Design material formular de autentificare cu HTML, CSS și JavaScritp.
Realizat de celyes
5 februarie 2017

Formular de conectare – Modal

Acesta este un mod de conectare inspirat din materiale cu 2 panouri . Un panou de conectare și un panou de înregistrare care este ascuns în mod implicit. Panoul de înregistrare poate fi declanșat făcând clic pe fila vizibilă din partea dreaptă. După ce ați făcut clic, panoul de înregistrare va aluneca și se va suprapune peste panoul de conectare.
Realizat de Andy Tran
30 ianuarie 2017

formular de înscriere

formular de înscriere cu HTML , CSS și JavaScript.
Realizat de Johnny Bui
10 ianuarie 2017

Formular de înscriere pentru suprapunere

Formular de înscriere pentru suprapunere cu HTML, CSS și JavaScript.
Chris Deacy
21 decembrie 2016

Înscrieți-vă

Înscrieți-vă formularul UI cu React.js.
Realizat de Jack Oliver
25 octombrie 2016

Card de credit UI

Card de credit UI cu HTML, CSS și JavaScript.
Fabricat de Gil
22 octombrie 2016

Căutare ecran complet

Această căutare de intrare ar trebui să funcționeze cu orice tip de poziție / aspect, inclusiv pagini normale cu scroll. Doar nu suprascrieți .s – stilurile clonate pentru .search și totul va fi în regulă. Necesită stiluri specifice pentru containere (verificați stilurile html + body și .scroll-cont) și elementul .search-overlay pentru a fi plasat în rădăcină.
Realizat de Nikolay Talanov
5 octombrie 2016

Animație în bara de căutare

Intrare de căutare cu efect de transformare.
Realizat de Milan Milošev
23 septembrie 2016

Bara de căutare

Bara de căutare cu HTML, CSS și JavaScript.
Realizată de Adam Kuhn
21 septembrie 2016

Card de plată

Formular de card de plată cu React.js.
Realizat de Jack Oliver
20 august 2016

Căutare

Căutare simplă jucând cu animații și poziții.
Realizat de Aaron Taylor
15 august 2016

formular de înscriere

Înscriere cu HTML, CSS și JavaScript.
Realizat de Tommaso Poletti
4 august 2016

Checkout card de credit

Formular simplu și simplu de plată a cardului de credit, cu css3, html5 și puțin jQuery, doar pentru a face UX ceva mai bun.
Realizat de Momcilo Popov
18 iulie 2016

Intrare simplă de căutare mobilă

Acesta este un exemplu de intrare de căutare, care ar putea fi puneți un șablon mobil pentru e-commerce sau vreme sau multe altele 🙂
Realizat de Tommaso Poletti
13 iulie 2016

Căutare SVG …

Pictogramă de căutare SVG care trece pentru a sublinia accentul.
Realizat de Mark Thomes
28 iunie 2 016

Formular de plată cu card de credit

Formular de plată cu card de credit cu HTML, CSS și JavaScript.
Realizat de Jade Preis
21 iunie 2016

Formular de înscriere UI

Formular de conectare la Daily UI Challenge # 001.
Realizat de Maycon Luiz
20 iunie 2016

Plată cu card de credit

Plată cu carduri de credit UI nefuncționale. Codificat pentru practic JS brut pentru manipulare DOM.
Realizat de Shehab Eltawel
5 mai 2016

Search Input Context Animation

Pictograme CSS, animație de context, aplicație Telegram- ca efect de încărcare a căutării.
Realizat de Riccardo Zanutta
19 aprilie 2016

UI de înscriere la formular

UI de înscriere a formularului cu HTML, CSS și JavaScript.
Realizat de Eddie Solar
9 aprilie 2016

Conectare & Conceptul formularului de înscriere

Conectați-vă & conceptul formularului de înscriere, faceți clic pe login și înscrieți-vă la changue și v Iew the effect.
Realizat de Dany Santos
19 martie 2016

Check Card Cardout

Checkout card de credit cu HTML, CSS și JavaScript.
Realizat de Fabio Ottaviani
18 martie 2016

UI de căutare

Conceptul de căutare cu opțiuni.
Realizat de Fabio Ottaviani
10 martie 2016

animație de căutare

Căutați animație cu HTML, CSS și JavaScript.
Realizat de Dmitriy
26 februarie 2016

Credit Card Checkout

Credit ca rout checkout cu HTML, CSS și JavaScript.
Realizat de Pavel Laptev
25 februarie 2016

Conceptul barei de căutare extragere

HTML și CSS pull- conceptul barei de căutare
Realizat de Asna Farid
22 februarie 2016

Casetă de căutare animată

O casetă de căutare animată realizată cu HTML & CSS.
Realizat de Jarno van Rhijn
5 februarie 2016

Casetă de căutare CSS

Căuta lucruri, probabil că ceva similar a fost făcut înainte.
Realizat de Jamie Coulter
12 ianuarie 2016

casetă de căutare bouncy

casetă de căutare bouncy HTML, CSS și JavaScript.
Realizat de Guillaume Schlipak
5 decembrie 2015

Checkout card de credit

Checkout card de credit cu HTML, CSS și JavaScript.
Realizat de Marco Biedermann
3 decembrie 2015

UI formular de înscriere

Formular de înscriere cu HTML, CSS și JavaScript.
Realizat de Lewis Needham
13 noiembrie 2015

UI formular de înscriere

Provocare zilnică 001 de la dailyui.co.
Realizat de Tyler Johnson
30 octombrie 2015

UI card de credit

Credi UI card cu HTML și CSS.
Realizat de Star St.Germain
23 octombrie 2015

Search Transformation

Prototip interactiv de transformare a formularului de căutare.
Realizat de Lucas Bourdallé
22 octombrie 2015

Căutare animație

Animație CSS interactivă a pictogramei de căutare care se transformă în câmpul de căutare.
Realizată de Dan Root
10 octombrie 2015

Formular de conectare

Formular de conectare cu HTML, CSS și JavaScript.
Realizat de Kamen Nedev
2 octombrie 2015

Căutare animație focalizare intrare

O animație simplă pentru evenimentul focalizat pe o intrare de căutare.
Realizat de Nicols J Engler
26 iulie , 2015

Formular de conectare material

Formular de conectare interactiv de proiectare material.
Realizat de Andy Tran
25 iulie 2015

Formular de conectare plat

Formular plat de conectare cu HTML, CSS și JavaScript.
Realizat de Andy Tran
30 iunie 2015

UI formular de înscriere

UI formular de înscriere cu HTML și CSS.
Realizat de Peter
5 iunie 2016

Animație buton de căutare

Animație buton de căutare cu HTML, CSS și JavaScript.
Realizat de Kristy Yeaton
20 aprilie 2015

Intrare de căutare cu animație

Intrare de căutare CSS pură cu animație.
Realizat de Arlina Design
12 aprilie 2015

Fancy Formulare

Elementele de formă ale stilului de proiectare a materialelor.
Realizat de Adam
4 februarie 2015

Formular 3D cu intrare simplă

Formular 3D cu intrare simplă din http://thecodeplayer.com.
Realizat de Son Tran-Nguyen
17 noiembrie 2014

proiectare formular

Acesta este un economizor de spațiu excelent atunci când vine vorba de afișarea etichetelor de intrare ca substituent și când utilizatorul se concentrează pe zona de intrare, acesta permite utilizatorului să introducă informațiile lor și, de asemenea, substituentul / eticheta este încă disponibil pentru vizualizare în orice moment.
Realizat de Timurtek Bizel
21 octombrie 2014

Formular de conectare animat

Experimentarea cu formulare de conectare ascunse cu dezvăluiri animate. Acesta este primul dintre câteva, sperăm.
Realizat de Che
3 septembrie 2014

Formular de conectare UI plat

Formular de conectare HTML, CSS și JavaScript plat.
Realizat de Brad Bodine
14 ianuarie 2014

Formulare interactive (pas cu pas)

formular de înregistrare pas cu pas

pas cu pas formular de înregistrare pas cu HTML, CSS și JavaScript.
Realizat de Jerome Renders
6 ianuarie 2017

Formă interactivă

Un formular interactiv cu mai mulți pași, cu HTML, CSS și JavaScript.
Realizat de Rosa
14 decembrie 2016

Formular pas cu pas

O versiune a codrop-urilor cu posibilitatea de a reveni și de a confirma toate intrările.
Realizat de Jonathan H
8 noiembrie 2016

formular pas cu pas

formular pas cu pas HTML, CSS și JavaScript.
Realizat de DevTips
22 august 2016

UI de înscriere

Un concept simplu de înscriere.
Realizat de Tobias
3 aprilie 2016

UI de înscriere

Formular de înscriere puternic GSAP „ed cu gestionarea validării pentru provocarea zilnică a interfeței de utilizare.
Realizat de Antonin Cezard
20 martie 2016

Formular cu mai mulți pași cu bara de progres Utilizând jQuery și CSS3

Aveți formulare lungi pe site-ul dvs. web? Împărțiți-le în secțiuni logice mai mici și convertiți-le într-un formular în mai mulți pași cu o bară de progres rece. Ar putea funcționa pentru procese îndelungate, cum ar fi înregistrarea, checkout-ul, completările de profil, autentificări de autentificare cu 2 factori etc.
Realizat de Atakan Goktepe
17 martie 2016

Forma interactivă

Interactivă formular de intrare construit doar cu CSS. Abuzarea stării de focalizare & etichete pentru a gestiona tranzițiile & navigare. Navigați între intrări folosind Tab (Next) & Shift + Tab (Prev). CSS pur. Fără JS inclus.
Realizat de Emmanuel Pilande
7 martie 2016

interacțiune pas cu pas

Un formular simplu pentru experiența clienților.
Realizat de Bhakti Al Akbar
4 martie 2016

Formular de înscriere interactiv

Un concept pentru un formular de înscriere interactiv.
Realizat de Riccardo Pasianotto
1 martie 2016