80 CSS-formulär

Samling av gratis HTML- och CSS-formulärkodsexempel: interaktiv, steg för steg, enkel, validering, etc. Uppdatering av april 2019-samlingen. 11 nya artiklar.

Innehållsförteckning

1. Interaktiva (steg för steg) formulär

1. CSS-kontaktformulär
2. CSS-inloggningsformulär
3. CSS-kassaformulär
4. CSS Prenumerationsformulär
5. Bootstrap-formulär
6. Bootstrap-inloggningsformulär
7. jQuery Forms

Om en kod

Inloggning Formulär

Inloggningsformulär med flytande platshållare och ljusknapp.

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Beroenden: –

Om en kod

Registreringsformulär för Pupassure

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Beroenden: font-awesome .css

Om en kod

Abstrakt registreringsformulär

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Beroenden: –

Om en kod

Färgglatt kontaktformulär

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Beroenden: –

Om en kod

Neomorf form

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Beroenden : ionicons.css

Om en kod

Mindre anno ying Form

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Beroenden: –

Om en kod

Flexbox Responsive Form

Kompatibla webbläsare: Chrome, Edge, Firefox , Opera, Safari

Responsiv: ja

Beroenden: –

Om en kod

Animerat inloggningsformulär

Detta animerade inloggningsformulär är byggt bara med HTML och CSS. Ingen SVG, ingen JavaScript, ingen GreenSock. Tecknet ler när inloggningsformuläret är korrekt.

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Beroenden: –

Om en kod

Transparent materialinloggningsformulär

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Beroenden: –

Om en kod

Responsivt kontaktformulär

Endast SCSS / CSS.

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Beroenden: font-awesome.css

Om en kod

Inloggningssida

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Beroenden: –

Om koden

Prenumerationsformulär

Prenumerationsformulär med animerad knapp i HTML och CSS.

Kompatibla webbläsare: Chrome, Firefox, Ope ra, Safari

Responsiv: ja

Beroenden: –

Om koden

Sökformulär

Sökformulär med rolig animering och rensningsknapp.

Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Beroenden: –

Om koden

Inloggningsskärm

Trendigt användargränssnitt för inloggningsskärm.

Om koden

Inloggningsformulär UI-design

Inloggningsformulär UI-design med HTML och Sass och jQuery.

Om koden

Flexbox-formulär

Ett formulär med flexbox.

Om koden

Invision-inloggning

Logga in i formulärets gränssnitt.

Om koden

Animerad sökruta

Animerad sökruta med HTML, CSS och jQuery.

Om koden

Inloggning & Registreringsformulär UI

Mikrointeraktion för registrering / inloggningsformulär.

Om koden

Obehagliga fel

Formfel med obnoxious.css-animering.

Sökfält

HTML- och CSS-sökfält.
Gjord av Bahaà Addin Balashoni
9 juli 2017

Kassa betalkort

Kassa betalkort i HTML, CSS och JavaScript.
Gjord av Simone Bernabè
8 juli 2017

Om koden

Inga frågor ställda formulär & Magiskt fokus

Inspelning av inga frågor som ställs med magiskt fokus.

Validering av Emoji-formulär

Validering av Emoji-formulär i ren CSS.
Gjord av Marco Biedermann
6 juni 2017

Kreditkort Platt design

Ren CSS kreditkort platt design.
Gjord av Jean Oliveira
18 maj 2017

Inloggningsformulär för materialdesign

Materialdesign inloggningsformulär med HTML, CSS och JavaScritp.
Gjord av celyes
5 februari 2017

Inloggningsformulär – Modal

Detta är ett materialinspirerat inloggningsmodal med 2 paneler . En inloggningspanel och en registreringspanel som är dold som standard. Registreringspanelen kan utlösas genom att klicka på den synliga fliken till höger. När du väl har klickat glider registreringspanelen in och överlappar inloggningspanelen.
Gjord av Andy Tran
30 januari 2017

Registreringsformulär

Registreringsformulär med HTML , CSS och JavaScript.
Gjord av Johnny Bui
10 januari 2017

Registreringsformulär för överlägg

Registreringsformulär för överlägg med HTML, CSS och JavaScript.
Gjord av Chris Deacy
21 december 2016

Registrera dig

Registreringsformulär UI med React.js.
Gjord av Jack Oliver
25 oktober 2016

UI-kreditkort

UI-kreditkort med HTML, CSS och JavaScript.
Gjord av Gil
22 oktober 2016

Helskärmssökning

Denna sökning inmatningen ska fungera med vilken position / layouttyp som helst, inklusive normala sidor med rullning. Bara inte åsidosätta .s – klonade stilar för .search och allt kommer att vara okej. Kräver att specifika stilar för behållare (kontrollera html + body och .scroll-cont-stilar) och .search-overlay-element placeras i roten.
Gjord av Nikolay Talanov
5 oktober 2016

Animering av sökfältet

Sökingång med morphing-effekt.
Gjord av Milan Milošev
23 september 2016

Sökfält

Sökfält med HTML, CSS och JavaScript.
Gjord av Adam Kuhn
21 september 2016

Kassakort

Kassakortsformulär med React.js.
Gjord av Jack Oliver
20 augusti 2016

Sök

Enkel sökning som spelar med animationer och positioner.
Gjord av Aaron Taylor
15 augusti 2016

Registreringsformulär

Registrera dig med HTML, CSS och JavaScript.
Gjord av Tommaso Poletti
4 augusti 2016

Kreditkortskassa

Rent och enkelt kreditkortsbetalningsformulär med css3, html5 och lite jQuery, bara för att göra något bättre UX.
Gjord av Momcilo Popov
18 juli 2016

Enkel mobil sökingång

Detta är ett exempel på sökingång, det kan vara lägg i en mobil mall för en e-handel eller wheather eller mycket mer 🙂
Gjord av Tommaso Poletti
13 juli 2016

SVG-sökning …

SVG-sökikon som övergår till understrykning på fokus.
Gjord av Mark Thomes
28 juni 2 016

Kreditkortsbetalningsformulär

Kreditkortsbetalningsformulär med HTML, CSS och JavaScript.
Gjord av Jade Preis
21 juni 2016

Anmälningsformulär UI

Inloggningsformulär till Daily UI Challenge # 001.
Gjord av Maycon Luiz
20 juni 2016

Kreditkortbetalning

Icke-funktionell kreditkortbetalning. Kodad för att öva rå JS för DOM-manipulation.
Gjord av Shehab Eltawel
5 maj 2016

Sökingångssymbolsanimering

CSS-ikoner, kontextanimering, Telegram-app gillar sökeffekt.
Tillverkad av Riccardo Zanutta
19 april 2016

UI för formulärregistrering

UI för formulärregistrering med HTML, CSS och JavaScript.
Tillverkad av Eddie Solar
9 april 2016

Logga in & Registreringsformulärskoncept

Logga in & registreringsformulärskoncept, klicka på inloggning och registrera dig för att ändra och v se effekten.
Gjord av Dany Santos
19 mars 2016

Kreditkortskassa

Kreditkortskassa med HTML, CSS och JavaScript.
Gjord av Fabio Ottaviani
18 mars 2016

Sök UI

Sökkoncept med alternativ.
Gjord av Fabio Ottaviani
10 mars 2016

Sökanimation

Sök animering med HTML, CSS och JavaScript.
Gjord av Dmitriy
26 februari 2016

Kreditkortskassa

Kredit ca utcheckning med HTML, CSS och JavaScript.
Gjord av Pavel Laptev
25 februari 2016

Uttagbar sökfältskoncept

HTML och CSS pull- ut sökfältet koncept
Gjort av Asna Farid
22 februari 2016

Animering av sökruta

En animerande sökruta gjord med HTML & CSS.
Gjord av Jarno van Rhijn
5 februari 2016

CSS-sökruta

Den söker efter saker, förmodligen har något liknande gjorts tidigare.
Tillverkad av Jamie Coulter
12 januari 2016

Bouncy-sökruta

HTML-, CSS- och JavaScript-hoppsökruta.
Gjord av Guillaume Schlipak
5 december 2015

Kreditkortskassa

Kreditkortskassa med HTML, CSS och JavaScript.
Gjord av Marco Biedermann
3 december 2015

Registreringsformulär UI

Registreringsformulär med HTML, CSS och JavaScript.
Gjord av Lewis Needham
13 november 2015

Registreringsformulär UI

Daglig utmaning 001 från dailyui.co.
Gjord av Tyler Johnson
30 oktober 2015

Kreditkortgränssnitt

Credi t-kort UI med HTML och CSS.
Gjord av Star St.Germain
23 oktober 2015

Söktransformation

Interaktiv prototyp för sökformstransformation.
Gjord av Lucas Bourdallé
22 oktober 2015

Sökanimering

Interaktiv CSS-animering av sökikonen förvandlas till sökfältet.
Gjord av Dan Root
10 oktober 2015

Logga in formulär

Logga in formulär med HTML, CSS och JavaScript.
Gjord av Kamen Nedev
2 oktober 2015

Sökingångsfokusanimering

En enkel animering för fokushändelsen på en sökingång.
Gjord av Nicols J Engler
26 juli 2015

Inloggningsformulär för material

Inloggningsformulär för interaktiv materialdesign.
Gjord av Andy Tran
25 juli 2015

platt inloggningsformulär

Platt inloggningsformulär med HTML, CSS och JavaScript.
Gjord av Andy Tran
30 juni 2015

Registreringsformulär UI

Registreringsformulär UI med HTML och CSS.
Gjord av Peter
5 juni 2016

Sökknapp Animation

Sökknappsanimering med HTML, CSS och JavaScript.
Gjord av Kristy Yeaton
20 april 2015

Sökingång med animering

Ren CSS-sökingång med animering.
Gjord av Arlina Design
12 april 2015

Fancy Formulär

Formelement i materialdesignstil.
Gjord av Adam
4 februari 2015

Enkel ingång 3D-formulär

Enkel ingång 3D-form från http://thecodeplayer.com.
Gjord av Son Tran-Nguyen
17 november 2014

Formdesign

Detta är en stor platsbesparing när det gäller att visa inmatningsetiketterna som en platshållare och när användaren fokuserar på inmatningsområdet gör det fortfarande möjligt för användaren att ange sin information och platshållare / etikett är fortfarande tillgänglig för användaren när som helst.
Gjord av Timurtek Bizel
21 oktober 2014

Animerat inloggningsformulär

Experimentera med dolda inloggningsformulär med animerade avslöjanden. Detta är förhoppningsvis den första av några få.
Gjord av Che
3 september 2014

Inloggningsformulär för platt UI

HTML, CSS och JavaScript platt UI-inloggningsformulär.
Tillverkad av Brad Bodine
14 januari 2014

Interaktiv (steg för steg) formulär

Registrera formulär steg för steg

Steg för stegregistreringsformulär med HTML, CSS och JavaScript.
Gjord av Jerome Renders
6 januari 2017

Interaktivt formulär

En interaktiv flerstegsform med HTML, CSS och JavaScript.
Tillverkad av Rosa
14 december 2016

Steg för stegformulär

A ta på codrops-versionen med möjlighet att gå tillbaka och bekräfta alla ingångar.
Gjord av Jonathan H
8 november 2016

Steg för steg-formulär

HTML, CSS och JavaScript steg för steg-formulär.
Gjord av DevTips
22 augusti 2016

Registreringsgränssnitt

Ett enkelt registreringskoncept.
Gjord av Tobias
3 april 2016

Registreringsgränssnitt

Tungt GSAP-registreringsformulär med valideringshantering för den dagliga ui-utmaningen.
Gjord av Antonin Cezard
20 mars 2016

Form med flera steg med förloppsindikator med jQuery och CSS3

Har du långa formulär på din webbplats? Dela upp dem i mindre logiska sektioner och konvertera det till en flerstegsform med en cool förloppsindikator. Kan fungera för långa processer som registrering, utcheckning, profilfyllningar, 2-faktor autentiseringsinloggningar, etc.
Gjord av Atakan Goktepe
17 mars 2016

Interaktivt formulär

Interaktivt inmatningsformulär byggt med bara CSS. Missbruk av fokusläge & etiketter för att hantera övergångar & navigering. Navigera mellan ingångarna med hjälp av Tab (Next) & Skift + Tab (Prev). Ren CSS. Ingen JS ingår.
Gjord av Emmanuel Pilande
7 mars 2016

Steg för steg-formulärinteraktion

En enkel stegformulär för kundupplevelse.
Gjord av Bhakti Al Akbar
4 mars 2016

Interaktivt registreringsformulär

Ett koncept för en interaktiv registreringsformulär.
Gjord av Riccardo Pasianotto
1 mars, 2016