80 CSS-lomaketta

Kokoelma ilmaisia HTML- ja CSS-lomakekoodiesimerkkejä: vuorovaikutteinen, vaihe vaiheelta, yksinkertainen, validointi jne. Päivitys huhtikuun 2019 kokoelmalle. 11 uutta kohdetta.

Sisällysluettelo

1. Vuorovaikutteiset (vaihe vaiheelta) lomakkeet

1. CSS-yhteydenottolomakkeet
2. CSS-kirjautumislomakkeet
3. CSS-kassalomakkeet
4. CSS-tilauslomakkeet
5. Bootstrap-lomakkeet
6. Bootstrap-kirjautumislomakkeet
7. jQuery Forms

Tietoja koodista

Kirjaudu Lomake

Kirjautumislomake kelluvalla paikkamerkillä ja valopainikkeella.

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: ei

Riippuvuudet: –

Tietoja koodista

Pupassure-rekisteröintilomake

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: ei

Riippuvuudet: font-awesome .css

Tietoja koodista

Tiivistetty rekisteröintilomake

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: ei

Riippuvuudet: –

Tietoja koodista

Värikäs yhteydenottolomake

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: kyllä

Riippuvuudet: –

Tietoja koodista

Neomorfinen muoto

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: ei

Riippuvuudet : ionicons.css

Tietoja koodista

Vähemmän Annoa ying-lomake

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: kyllä

Riippuvuudet: –

Tietoja koodista

Flexbox Responsive Form

Yhteensopivat selaimet: Chrome, Edge, Firefox , Opera, Safari

Reagoiva: kyllä

Riippuvuudet: –

Tietoja koodista

Animoitu kirjautumislomake

Tämä animoitu kirjautumislomake on rakennettu vain HTML: n ja CSS: n avulla. Ei SVG: tä, ei JavaScriptiä, ei GreenSockia. Merkki hymyilee, kun kirjautumislomake on oikea.

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: ei

Riippuvuudet: –

Tietoja koodista

Läpinäkyvän materiaalin kirjautumislomake

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: ei

Riippuvuudet: –

Tietoja koodista

Reagoiva yhteydenottolomake

Vain SCSS / CSS.

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: kyllä

Riippuvuudet: font-awesome.css

Tietoja koodista

Kirjautumissivu

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: kyllä

Riippuvuudet: –

Tietoja koodista

Tilauslomake

Tilaa lomake animoidulla painikkeella HTML: ssä ja CSS: ssä.

Yhteensopivat selaimet: Chrome, Firefox, Ope ra, Safari

Reagoiva: kyllä

Riippuvuudet: –

Tietoja koodista

Hakulomake

Hakulomake hauskalla animaatiolla ja tyhjennyspainikkeella.

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: kyllä

Riippuvuudet: –

Tietoja koodista

Kirjautumisnäyttö

Trendikäs kirjautumisnäytön käyttöliittymä.

Tietoja koodista

Kirjautumislomakkeen käyttöliittymäsuunnittelu

Kirjautumislomakkeen käyttöliittymäsuunnittelu HTML: ää, Sassia ja jQueryä käyttäen.

Tietoja koodista

Flexbox-lomake

Lomake, joka on tehty flexbox.

Tietoja koodista

Invision-kirjautuminen

Kirjaudu sisään lomakkeen käyttöliittymä.

Tietoja koodista

Animoitu hakukenttä

Animoitu hakukenttä HTML: ää, CSS: ää ja jQueryä käyttämällä.

Tietoja koodista

Kirjaudu sisään & Rekisteröitymislomake käyttöliittymä

Mikrovaikutus rekisteröinti- / kirjautumislomakkeessa.

Tietoja koodista

Häirittävät virheet

Lomakevirheet obnoxious.css-animaation kanssa.

Hakukenttä

HTML- ja CSS-hakukenttä.
Tekijä Bahaà Addin Balashoni
9. heinäkuuta 2017

Maksukorttimaksu

Maksukorttimaksu HTML-, CSS- ja JavaScript-muodossa.
Valmistanut Simone Bernabè
8. heinäkuuta 2017

Tietoja koodista

Ei kysyttyä -lomaketta & Maaginen tarkennus

Ei kysyttyjen lomakkeiden luominen taika-tarkennuksella.

Emoji-lomakkeen vahvistus

Emoji-lomakkeen vahvistus puhtaassa CSS: ssä.
Laatija Marco Biedermann
6. kesäkuuta 2017

Luottokortti Tasainen muotoilu

Puhdas CSS-luottokortin tasainen muotoilu.
Valmistanut Jean Oliveira
18. toukokuuta 2017

Materiaalisuunnittelun kirjautumislomake

Materiaalisuunnittelu kirjautumislomake HTML: llä, CSS: llä ja JavaScritp: llä.
Tekijä celyes
5. helmikuuta 2017

Kirjautumislomake – Malli

Tämä on materiaalihenkinen kirjautumismalli, jossa on 2 paneelia . Kirjautumispaneeli ja rekisteröintipaneeli, joka on oletusarvoisesti piilotettu. Rekisteröintipaneeli voidaan käynnistää napsauttamalla näkyvää välilehteä oikealla puolella. Kun napsautetaan, rekisteröintipaneeli liukuu sisään ja menee päällekkäin kirjautumispaneelin kanssa.
Valmistanut Andy Tran
30. tammikuuta 2017

Rekisteröitymislomake

Rekisteröitymislomake HTML-koodilla , CSS ja JavaScript.
Tekijä Johnny Bui
10. tammikuuta 2017

Peitä rekisteröintilomake

Peitä rekisteröintilomake HTML: llä, CSS: llä ja JavaScriptillä.
Tehty Chris Deacy
21. joulukuuta 2016

Rekisteröidy

Rekisteröityä käyttöliittymä React.js: n avulla.
Valmistanut Jack Oliver
25. lokakuuta 2016

Käyttöliittymän luottokortti

Käyttöliittymän luottokortti, jossa on HTML, CSS ja JavaScript.
Laatija Gil – 22. lokakuuta 2016

Koko näytön haku

Tämä haku syötteen tulisi toimia minkä tahansa sijainnin / asettelutyypin kanssa, mukaan lukien tavalliset sivut, joissa on vieritys. Älä ohita .s – kloonattuja tyylejä hakemistolle ja kaikki on kunnossa. Vaatii erityisiä tyylejä säilöille (tarkista html + body- ja .scroll-cont-tyylit) ja .search-overlay -elementille, jotka sijoitetaan juuriin.
Tekijä Nikolay Talanov
5. lokakuuta 2016

Hakupalkin animaatio

Hakusyöttö, jolla on morfioiva vaikutus.
Tehty Milan Milošev
23. syyskuuta 2016

Hakupalkki

Hakupalkki HTML: llä, CSS: llä ja JavaScriptillä.
Tekijä Adam Kuhn
21. syyskuuta 2016

Kassakortti

Kassakortti lomake React.js: n kanssa.
Valmistanut Jack Oliver
20. elokuuta 2016

Haku

Yksinkertainen haku animaatioiden ja sijaintien kanssa.
Tekijä Aaron Taylor
15. elokuuta 2016

Rekisteröitymislomake

Rekisteröidy HTML, CSS ja JavaScript.
Tommaso Poletti
4. elokuuta 2016

Luottokorttikassalle

Puhdas ja yksinkertainen luottokorttimaksulomake, jossa on css3, html5 ja vähän jQueryä, vain paremman käyttömukavuuden parantamiseksi.
Valmistanut Momcilo Popov
18. heinäkuuta 2016

Yksinkertainen mobiilihakutulos

Tämä on esimerkki hakusyötöstä, joka voidaan laita mobiilimalli verkkokauppaa tai säätä varten tai paljon muuta 🙂
Tekijä Tommaso Poletti
13. heinäkuuta 2016

SVG-haku …

SVG-hakukuvake, joka siirtyy alleviivaan kohdistukseen.
Tekijä Mark Thomes
28. kesäkuuta 2 016

Luottokorttimaksulomake

Luottokorttimaksulomake HTML: llä, CSS: llä ja JavaScriptillä.
Tehty Jade Preis
21. kesäkuuta 2016

Rekisteröitymislomake käyttöliittymä

Kirjautumislomake Daily UI -haasteeseen 001.
Maycon Luiz
20. kesäkuuta 2016

Luottokorttimaksu

Toimimaton käyttöliittymän luottokorttimaksu. Koodattu käytännön raakaa JS: ää varten DOM-manipulointia varten.
Valmistanut Shehab Eltawel
5. toukokuuta 2016

Hakutekstin kontekstianimaatio

CSS-kuvakkeet, kontekstianimaatio, sähkeohjelma- kuten hakulataustehoste.
Tekijä Riccardo Zanutta
19. huhtikuuta 2016

Lomakkeen käyttöliittymä

Lomakkeen rekisteröinti-käyttöliittymä HTML: llä, CSS: llä ja JavaScriptillä. > Valmistanut Eddie Solar
9. huhtikuuta 2016

Kirjaudu & Rekisteröitymislomakekonsepti

Kirjaudu sisään & rekisteröitymislomakekonsepti, napsauta kirjautumistunnusta ja rekisteröidy muutokseen ja v iew effect.
Tekijä Dany Santos
19. maaliskuuta 2016

Luottokorttikassan

Luottokorttikassan HTML, CSS ja JavaScript.
Made by Fabio Ottaviani
18. maaliskuuta 2016

Hakukäyttöliittymä

Hakukonsepti ja vaihtoehdot.
Valmistanut Fabio Ottaviani
10. maaliskuuta 2016

Hakuanimaatio

Hakuanimaatio HTML: llä, CSS: llä ja JavaScriptillä.
Dmitriy
26. helmikuuta 2016

Luottokorttikassalla

Luotto ca toinen kassa HTML: llä, CSS: llä ja JavaScriptillä.
Pavel Laptev | 25. helmikuuta 2016

Vedä hakupalkki -konsepti

HTML- ja CSS-vedos- ulos hakupalkkikonsepti
Laatija Asna Farid
22. helmikuuta 2016

Hakukentän animointi

HTML-koodilla tehty animoiva hakukenttä & CSS.
Tekijä Jarno van Rhijn – 5. helmikuuta 2016

CSS-hakukenttä

Se etsii asioita, todennäköisesti jotain vastaavaa on tehty aiemmin.
Tekijä Jamie Coulter
12. tammikuuta 2016

Pomppiva hakukenttä

HTML, CSS ja JavaScript pomppiva hakukenttä.
Tekijä Guillaume Schlipak
5. joulukuuta 2015

Luottokorttikassalle

Luottokorttikassalle HTML, CSS ja JavaScript.
Laatija Marco Biedermann
3. joulukuuta 2015

Rekisteröitymislomakkeen käyttöliittymä

Rekisteröitymislomake HTML: llä, CSS: llä ja JavaScriptillä.
Lewis Needham.
13. marraskuuta 2015

Rekisteröitymislomake käyttöliittymä

Dailyui.co: n päivittäinen haaste 001.
Tyler Johnson
30. lokakuuta 2015

Luottokortin käyttöliittymä

Credi t-kortin käyttöliittymä HTML: llä ja CSS: llä.
Laatija Star St.Germain
23. lokakuuta 2015

Hakumuunnos

Hakulomakemuutoksen interaktiivinen prototyyppi.
Laatija Lucas Bourdallé
22. lokakuuta 2015

Hakuanimaatio

Interaktiivinen CSS-animaatio hakukuvakkeesta morfoituvasta hakukuvakkeesta.
Dan Rootin tekemä
10. lokakuuta 2015

Kirjaudu sisään lomake

Kirjaudu sisään HTML-, CSS- ja JavaScript-lomakkeella.
Tekijä Kamen Nedev
2. lokakuuta 2015

Hakutuloskohdistuksen animaatio

Yksinkertainen animaatio kohdennustapahtumaan hakusyötössä.
Tekijä Nicols J Engler
26. heinäkuuta , 2015

Materiaalien kirjautumislomake

Vuorovaikutteinen materiaalisuunnittelun kirjautumislomake.
Valmistanut Andy Tran
25. heinäkuuta 2015

Tasainen kirjautumislomake

Tasainen sisäänkirjautumislomake, jossa on HTML, CSS ja JavaScript.
Andy Tran – 30. kesäkuuta 2015

Rekisteröitymislomakkeen käyttöliittymä

Rekisteröitymislomakkeen käyttöliittymä HTML: n ja CSS: n avulla.
Peter: 5. kesäkuuta 2016

Hakupainike-animaatio

Hakupainike-animaatio HTML: llä, CSS: llä ja JavaScriptillä.
Tekijä Kristy Yeaton
20. huhtikuuta 2015

Hakusyöttö animaatiolla

Puhdas CSS-hakusyöttö animaatiolla.
Tehty Arlina Design
12. huhtikuuta 2015

Fancy Lomakkeet

Materiaalisuunnittelumuotojen elementit.
Valmistanut Adam
4. helmikuuta 2015

Yhden syötteen 3D-lomake

Yhden syötteen 3D-lomake http://thecodeplayer.com.
Son Tran-Nguyenin laatima
17. marraskuuta 2014

Lomakkeen suunnittelu

Tämä on loistava tilansäästö, kun syötetarrat näytetään paikkamerkkinä, ja kun käyttäjä keskittyy syöttöalueeseen, se antaa käyttäjälle mahdollisuuden syöttää tietonsa ja myös paikkamerkki / tunniste on edelleen käyttäjän nähtävissä milloin tahansa.
Tekijä Timurtek Bizel
21. lokakuuta 2014

Animoitu kirjautumislomake

Kokeilemalla piilotettuja kirjautumislomakkeita animoitujen paljastusten avulla. Tämä on ensimmäinen muutamasta toivottavasti.
Valmistanut Che
3. syyskuuta 2014

Flat UI Login Form

HTML, CSS ja JavaScript Flat UI -kirjautumislomake.
Tekijä Brad Bodine
14. tammikuuta 2014

Vuorovaikutteiset (vaihe vaiheelta) lomakkeet

Vaiheittainen rekisteröintilomake

Vaihe vaiheelta askelrekisterilomake HTML: llä, CSS: llä ja JavaScriptillä.
Jerome Renders – 6. tammikuuta 2017

Interaktiivinen lomake

Interaktiivinen monivaiheinen lomake, jossa on HTML, CSS ja JavaScript.
Rosa, teki 14. joulukuuta 2016

Vaiheittainen lomake

Ottaa koodroppi-version, jolla on mahdollisuus palata takaisin ja vahvistaa kaikki syötteet.
Tekijä Jonathan H
8. marraskuuta 2016

Vaiheittainen lomake

HTML-, CSS- ja JavaScript-vaiheittainen lomake.
DevTips – 22. elokuuta 2016

Liity käyttöliittymä

Yksinkertainen kirjautumiskonsepti.
Tobiasin tekemä
3. huhtikuuta 2016

Rekisteröidy käyttöliittymä

Voimakkaasti GSAP: n ”rekisteröitymislomake ja vahvistus käsittely päivittäiseen käyttöliittymän haasteeseen.
Valmistanut Antonin Cezard
20. maaliskuuta 2016

Monivaiheinen lomake ja edistymispalkki jQueryn ja CSS3: n avulla

Onko sinulla pitkiä lomakkeita verkkosivustollasi? Jaa ne pienempiin loogisiin osioihin ja muunna se monivaiheiseen muotoon, jossa on viileä edistymispalkki. Voi toimia pitkissä prosesseissa, kuten rekisteröinti, maksaminen, profiilin täyttö, 2-tekijäiset kirjautumistunnukset jne.
Valmistanut Atakan Goktepe
17. maaliskuuta 2016

Interaktiivinen lomake

Interaktiivinen vain CSS: llä rakennettu syöttölomake. Kohdistustilan & -tarrojen väärinkäyttö siirtymien & navigoinnin käsittelemiseksi. Siirtyminen tulojen välillä sarkaimella (Seuraava) & Vaihto + Sarkain (Edellinen). Puhdas CSS. Ei JS: tä.
Emmanuel Pilande
7. maaliskuuta 2016

Vaiheittainen lomake-vuorovaikutus

Yksinkertainen asiakaskokemuksen lomake.
Valmistettu kirjoittanut Bhakti Al Akbar
4. maaliskuuta 2016

Interaktiivinen rekisteröintilomake

Interaktiivisen rekisteröintilomakkeen käsite.
Valmistanut Riccardo Pasianotto
1. maaliskuuta, 2016