80 CSS-formularer

Samling af gratis HTML- og CSS-formulareksempler: interaktiv, trin for trin, enkel, validering osv. Opdatering af april 2019-samlingen. 11 nye emner.

Indholdsfortegnelse

1. Interaktive (trin for trin) formularer

1. CSS-kontaktformularer
2. CSS Login-formularer
3. CSS Checkout Forms
4. CSS Abonnementsformularer
5. Bootstrap-formularer
6. Bootstrap Login-formularer
7. jQuery Forms

Om en kode

Login Form

Loginformular med flydende pladsholder og lysknap.

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Afhængigheder: –

Om en kode

Pupassure-tilmeldingsformular

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Afhængigheder: font-awesome .css

Om en kode

Abstrakt tilmeldingsformular

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Afhængighed: –

Om en kode

Farverig kontaktformular

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Afhængighed: –

Om en kode

Neomorf form

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Afhængighed : ionicons.css

Om en kode

Mindre anno ying Form

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Afhængighed: –

Om en kode

Flexbox Responsive Form

Kompatible browsere: Chrome, Edge, Firefox , Opera, Safari

Responsiv: ja

Afhængigheder: –

Om en kode

Animeret loginformular

Denne animerede loginformular er bygget kun med HTML og CSS. Ingen SVG, ingen JavaScript, ingen GreenSock. Tegnet smiler, når loginformularen er korrekt.

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Afhængighed: –

Om en kode

Gennemsigtig loginformular til materiale

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: nej

Afhængigheder: –

Om en kode

Responsiv kontaktformular

Kun SCSS / CSS.

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Afhængigheder: font-awesome.css

Om en kode

Login-side

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Afhængigheder: –

Om koden

Abonner formular

Abonner formular med animeret knap i HTML og CSS.

Kompatible browsere: Chrome, Firefox, Ope ra, Safari

Responsiv: ja

Afhængighed: –

Om koden

Søgningsformular

Søgningsformular med sjov animation og rydningsknap.

Kompatible browsere: Chrome, Edge, Firefox, Opera, Safari

Responsiv: ja

Afhængighed: –

Om koden

Login-skærm

Trendy login-brugergrænseflade.

Om koden

Login form UI Design

Login form UI design using HTML and Sass and jQuery.

Om koden

Flexbox-formular

En formular lavet med flexbox.

Om koden

Invision-login

Log på form UI.

Om koden

Animeret søgefelt

Animeret søgefelt ved hjælp af HTML, CSS og jQuery.

Om koden

Login & Tilmeldingsformular UI

Mikrointeraktion til tilmelding / tilmeldingsformular.

Om koden

Ubehagelige fejl

Formularfejl med obnoxious.css-animation.

Søgefelt

HTML- og CSS-søgefelt.
Oprettet af Bahaà Addin Balashoni
9. juli 2017

Checkout til betalingskort

Checkout til betalingskort i HTML, CSS og JavaScript.
Oprettet af Simone Bernabè
8. juli 2017

Om koden

Ingen spørgsmål stillet form & Magisk fokus

Gendannelse af ingen spørgsmål stillet form med magisk fokus.

Validering af emoji-form

Validering af emoji-formular i ren CSS.
Oprettet af Marco Biedermann
6. juni 2017

Kreditkort Fladt design

Rent CSS kreditkort fladt design.
Oprettet af Jean Oliveira
18. maj 2017

Loginformular til materialedesign

Materialedesign loginformular med HTML, CSS og JavaScritp.
Oprettet af celyes
5. februar 2017

Loginformular – Modal

Dette er et materialeinspireret loginmodal med 2 paneler . Et loginpanel og et registreringspanel, der som standard er skjult. Registreringspanelet kan udløses ved at klikke på den synlige fane i højre side. Når der er klikket på, glider registreringspanelet ind og overlapper loginpanelet.
Oprettet af Andy Tran
30. januar 2017

Tilmeldingsformular

Tilmeld formular med HTML , CSS og JavaScript.
Oprettet af Johnny Bui
10. januar 2017

Tilmeldingsformular til overlay

Tilmeldingsformular til overlay med HTML, CSS og JavaScript.
Oprettet af Chris Deacy
21. december 2016

Tilmeld dig

Tilmeld form UI med React.js.
Oprettet af Jack Oliver
25. oktober 2016

UI-kreditkort

UI-kreditkort med HTML, CSS og JavaScript.
Oprettet af Gil
22. oktober 2016

Fuldskærms-søgning

Denne søgning input skal fungere med enhver position / layouttype, inklusive normale sider med rulle. Bare tilsidesæt ikke .s – klonede stilarter til .search og alt vil være okay. Kræver, at specifikke stilarter til containere (tjek html + body og .scroll-cont-stilarter) og .search-overlay-element skal placeres i roden.
Oprettet af Nikolay Talanov
5. oktober 2016

Animation i søgefelt

Søgeinput med morphing-effekt.
Oprettet af Milan Milošev
23. september 2016

Søgefelt

Søgefelt med HTML, CSS og JavaScript.
Oprettet af Adam Kuhn
21. september 2016

Checkout-kort

Kassekortformular med React.js.
Oprettet af Jack Oliver
20. august 2016

Søg

Enkel søgning, der spiller rundt med animationer og positioner.
Oprettet af Aaron Taylor
15. august 2016

Tilmeldingsformular

Tilmeld dig med HTML, CSS og JavaScript.
Oprettet af Tommaso Poletti
4. august 2016

Kreditkortafkrydsningsfelt

Ren og enkel betalingsformular til betaling med kreditkort med css3, html5 og lidt jQuery, bare for at gøre lidt bedre UX.
Oprettet af Momcilo Popov
18. juli 2016

Simple Mobile Search Input

Dette er et eksempel på søgeinput, det kunne være læg i en mobil skabelon til en e-handel eller wheather eller meget mere 🙂
Oprettet af Tommaso Poletti
13. juli 2016

SVG-søgning …

SVG-søgeikon, der overgår til at understrege med fokus.
Oprettet af Mark Thomes
28. juni, 2 016

Kreditkortformular

Kreditkortformular med HTML, CSS og JavaScript.
Oprettet af Jade Preis
21. juni 2016

Tilmeld form UI

Loginformular til Daily UI Challenge # 001.
Oprettet af Maycon Luiz
20. juni 2016

Kreditkortbetaling

Ikke-funktionel UI-kreditkortbetaling. Kodet til praksis rå JS til DOM-manipulation.
Oprettet af Shehab Eltawel
5. maj 2016

Search Input Context Animation

CSS ikoner, kontekst animation, Telegram app- som søgeindlæsningseffekt.
Oprettet af Riccardo Zanutta
19. april 2016

UI til formulartilmelding

UI til formulartilmelding med HTML, CSS og JavaScript.
Oprettet af Eddie Solar
9. april 2016

Login & Tilmeld formular koncept

Log ind & tilmeld dig formkoncept, klik på login og tilmeld dig for at ændre og v se effekten.
Oprettet af Dany Santos
19. marts 2016

Kreditkortcheck

Kreditkortkasse med HTML, CSS og JavaScript.
Oprettet af Fabio Ottaviani
18. marts 2016

Søgningsgrænseflade

Søgekoncept med valgmuligheder.
Oprettet af Fabio Ottaviani
10. marts 2016

Søgeanimation

Søg animation med HTML, CSS og JavaScript.
Oprettet af Dmitriy
26. februar 2016

Kreditkortcheck

Kredit ca. rd checkout med HTML, CSS og JavaScript.
Oprettet af Pavel Laptev
25. februar 2016

Pull-Out Search Bar Concept

HTML og CSS pull- ud søgelinjekoncept
Oprettet af Asna Farid
22. februar 2016

Animering af søgefelt

Et animerende søgefelt lavet med HTML & CSS.
Oprettet af Jarno van Rhijn
5. februar 2016

CSS-søgefelt

Det søger efter ting, sandsynligvis er der gjort noget lignende før.
Lavet af Jamie Coulter
12. januar 2016

Bouncy-søgefelt

HTML, CSS og JavaScript hoppende søgefelt.
Lavet af Guillaume Schlipak
5. december 2015

Kreditkortskasse

Kreditkortskasse med HTML, CSS og JavaScript.
Oprettet af Marco Biedermann
3. december 2015

Tilmeldingsformular UI

Tilmeldingsformular med HTML, CSS og JavaScript.
Oprettet af Lewis Needham
13. november 2015

Tilmeldingsformular UI

Daglig udfordring 001 fra dailyui.co.
Oprettet af Tyler Johnson
30. oktober 2015

Kreditkortgrænseflade

Credi t-kort-brugergrænseflade med HTML og CSS.
Oprettet af Star St.Germain
23. oktober 2015

Søgetransformation

Interaktiv prototype af søgeformetransformation.
Lavet af Lucas Bourdallé
22. oktober 2015

Søgeanimering

Interaktiv CSS-animation af søgeikon, der ændrer sig i søgefeltet.
Oprettet af Dan Root
10. oktober 2015

Log på form

Log ind form med HTML, CSS og JavaScript.
Oprettet af Kamen Nedev
2. oktober 2015

Animation af søgningsindgangsfokus

En simpel animation til fokushændelsen på et søgeinput.
Oprettet af Nicols J Engler
26. juli , 2015

Materiel loginformular

Loginformular til interaktivt materialedesign.
Oprettet af Andy Tran
25. juli 2015

Flat Login Form

Flad loginformular med HTML, CSS og JavaScript.
Oprettet af Andy Tran
30. juni 2015

Tilmeld form UI

Tilmeld form UI med HTML og CSS.
Oprettet af Peter
5. juni 2016

Søgeknap Animation

Søgeknapanimation med HTML, CSS og JavaScript.
Lavet af Kristy Yeaton
20. april 2015

Søgeinput med animation

Ren CSS-søgeinput med animation.
Oprettet af Arlina Design
12. april 2015

Fancy Formularer

Materiale designformular formelementer.
Oprettet af Adam
4. februar 2015

Single Input 3D Form

Single input 3D-form fra http://thecodeplayer.com.
Oprettet af Son Tran-Nguyen
17. november 2014

Form Design

Dette er en stor pladsbesparelse, når det kommer til at vise inputetiketterne som en pladsholder, og når brugeren fokuserer på inputområdet, gør det stadig det muligt for brugeren at indtaste deres oplysninger, og også pladsholder / label er stadig tilgængelig for brugeren til enhver tid at se.
Oprettet af Timurtek Bizel
21. oktober 2014

Animeret loginformular

Eksperimenter med skjulte loginformularer med animerede afsløringer. Dette er forhåbentlig den første af nogle få.
Oprettet af Che
3. september 2014

Flat UI Login Form

HTML, CSS og JavaScript flat UI login form.
Lavet af Brad Bodine
14. januar 2014

Interaktive (trin for trin) formularer

Registrer formular trin for trin

Trin for trinregistreringsformular med HTML, CSS og JavaScript.
Oprettet af Jerome Renders
6. januar 2017

Interaktiv form

En interaktiv flertrinsformular med HTML, CSS og JavaScript.
Lavet af Rosa
14. december 2016

Trin for trin-form

A tager kodropsversionen med mulighed for at gå tilbage og bekræfte alle input.
Oprettet af Jonathan H
8. november 2016

Trin for trin-form

HTML, CSS og JavaScript trin for trin.
Oprettet af DevTips
22. august 2016

Tilmeldingsgrænseflade

Et simpelt tilmeldingskoncept.
Oprettet af Tobias
3. april 2016

Tilmeldingsgrænseflade

Tungt GSAP “ed tilmeldingsformular med valideringshåndtering til den daglige ui-udfordring.
Oprettet af Antonin Cezard
20. marts 2016

Flertrinsformular med statuslinje ved hjælp af jQuery og CSS3

Har du lange formularer på dit websted? Opdel dem i mindre logiske sektioner, og konverter det til en flertrinsform med en kølig statuslinje. Kunne arbejde med lange processer som registrering, checkout, profilopfyldninger, 2-faktor-godkendelseslogins osv.
Oprettet af Atakan Goktepe
17. marts 2016

Interaktiv form

Interaktiv inputformular bygget med kun CSS. Misbrug af fokusstatus & etiketter til håndtering af overgange & navigation. Naviger mellem input ved hjælp af Tab (Next) & Shift + Tab (Prev). Ren CSS. Ingen JS inkluderet.
Oprettet af Emmanuel Pilande
7. marts 2016

Formularinteraktion trin for trin

En simpel trinformular til kundeoplevelse.
Lavet af Bhakti Al Akbar
4. marts 2016

Interaktiv tilmeldingsformular

Et koncept til en interaktiv tilmeldingsformular.
Oprettet af Riccardo Pasianotto
1. marts, 2016