40 mga form sa CSS na hindi maaaring mawala sa anumang website

Kung mayroong isang bagay na karaniwang karaniwan para sa anumang uri ng website, ito ang mga form. Ang mga form na ginagamit namin upang punan ang impormasyon sa pakikipag-ugnay, ipasok ang mga detalye sa bangko, mag-log in sa isang social network o magsagawa lamang ng isang paghahanap tulad ng karaniwang ginagawa namin araw-araw sa search engine ng Google.

Kaya ngayon ipapakita namin sa iyo 40 form sa CSS mula sa mga form sa pakikipag-ugnay, mga checkout sa credit card, pag-login, simple, subscription o kahit na pagpapatunay. Isang serye ng mga form ng mahusay na kagandahan at istilo upang mabigyan ang espesyal na puntong iyon sa iyong website, anuman ang tema.

Minimalist form sa pakikipag-ugnay

Isang simpleng form sa pakikipag-ugnay sa a mahusay na pagkakaiba-iba ng mga epekto tulad ng mga lumulutang na marka o linya ng mga animasyon. Elegant CSS code na may kaunting JavaScript. Kung naghahanap ka ng a minimalist form sa pakikipag-ugnay perpekto ito para sa iyo.

Kaugnay na artikulo:

23 mga de-kalidad na aklatan ng CSS para sa disenyo ng web

Minimalist form

Iba minimal na form, kahit na sa CSS lamang upang maging isang simple at mataas na epekto form. Wala itong minimalist na mga animasyon ng nakaraang isa, ngunit napakahusay nitong natutupad ang layunin nito.

Form sa pakikipag-ugnay sa antigo

Form sa pakikipag-ugnay sa antigo, isang napaka-matikas na disenyo. Nakikiramay para sa mga website upang makita mula sa mobile, bagaman hindi kasama rito ang pagpapatunay.

Form ng pakikipag-ugnay sa sulat

Ito makipag-ugnayan sa form na mayroon itong isang medyo mausisa na animasyon: nabuo ang isang liham. Simple, ngunit napaka kapaki-pakinabang na may maraming kulay.

Kaugnay na artikulo:

27 mga libreng HTML at CSS card para sa mga blog, e-commerce at marami pa

Pinalawak na form sa pakikipag-ugnay

Ito pinalawak ang form sa pakikipag-ugnay Sa harap lamang ito at mayroon ang pagpapatunay sa jQuery. Nag-click kami sa lumulutang na pindutan at lilitaw ang form na may isang buhay na buhay na animasyon. Natitirang

Makipag-ugnay sa Form UI

Makipag-ugnay sa Form UI ito ay isang form na ginawa sa HTML at CSS. Ito ay namumukod-tangi para sa pagiging isang simpleng contact card na mapupunan natin upang ang larangan lamang ng teksto ang nagbabago kapag na-click ito.

Pag-checkout sa card sa pagbabayad

Un checkout ng card sa pagbabayad ginawa sa HTML, CSS at JavaScript kung saan ay nakikilala sa pamamagitan ng umiikot na animasyon ang credit card sa ngayon ay pinindot namin ang patlang ng CVC o security number.

Disenyo ng flat card ng credit card

Puro CSS para sa a pag-checkout para sa mga credit card sa patag na kulay. Makukulay at napaka-simple na may kakayahang tukuyin ang kalidad at propesyonalismo.

UI ng credit card

Ang isa pang credit card sa HTML, CSS at JavaScript na nakikilala para sa kung gaano ito kahusay pinili ang pangkalahatang disenyo. Nakalimutan namin ang tungkol sa mga animasyon sa piraso ng code na ito para sa iyong website. I-download ito sa link na ito.

tumugon sa paglabas

tumugon sa paglabas, na ginawa sa React.js, ay nakikilala sa pamamagitan ng ang larawan sa gilid ay maaari nating ipasadya kasama ang mga serbisyo o produkto na ibinebenta namin sa aming eCommerce.

Checkout card sa pagbabayad

Ang checkout na ito ay nakatayo para sa posibilidad ng paglalagay ng isang imahe sa card. A simple at malinaw na form na ginawa gamit ang CSS3, HTML5 at kaunting jQuery. Mataas na kalidad at naiiba mula sa natitirang mga checkout sa listahang ito. Maaari kang mag-download dito ang checkout ng card sa pagbabayad na ito.

Pagbabayad ng credit card

Ito form sa pagbabayad ng credit card ay nai-program upang magsanay sa JavaScript para sa pagmamanipula ng DOM. Maaari mong isipin sa disenyo ang matikas na code ng Stripe, ang serbisyo sa digital banking na papalapit sa PayPal.

Credit card

Isang matikas checkout para sa pagbabayad ng card naiiba sa iba at batay sa isang credit card na matatagpuan sa itaas upang sa ibaba mayroon kaming buong form na may iba't ibang data na kailangang punan ng kliyente upang makagawa ng pagbabayad sa eCommerce.

Form ng hakbang na hakbang

Un sunud-sunod na form para sa pagpaparehistro na tapos sa HTML, CSS at JavaScript. Apat na mga hakbang para sa bawat isa sa mga puntos na matatagpuan sa kaliwang bahagi. Mahusay na natapos na mga animasyon para sa isang lubos na natapos na form. Lubos na inirerekomenda.

Interactive form

Un interactive form multi-pass na ginawa gamit ang HTML, CSS at JavaScript. Ito ay nakatayo para sa animasyon ng paglipat sa pagitan ng bawat isa sa mga hakbang. Mayroon itong isang matikas na ugnayan na hindi napapansin.

Form ng hakbang na hakbang

Ito sunud-sunod na form nakatayo para sa pagiging medyo malikhain. Sasagutin mo ang mga katanungan upang maaari kang bumalik sa kanila anumang oras sa pamamagitan ng pagiging biswal na naroroon sa screen sa lahat ng oras.

Hakbang-hakbang

Natapos ang hakbang-hakbang na form sa HTML, CSS at JavaScript. Ito ay nailalarawan sa pamamagitan ng animation ng paglipat sa pagitan ng bawat isa sa mga hakbang.

Multi step na form ng Jquery

Kung mayroon kang isang napakahabang porma, perpekto ito para sa iba't ibang mga seksyon na may isang kapansin-pansin na bar ng pag-unlad. Batay sa jQuery at CSS, nakatayo ito para sa disenyo at mahusay na kagandahan.

Form ng animasyon ng UI

Ang mga paglilipat nito Form ng animasyon ng UI ay batay sa Domink Marskusic. Pansin sa malikhaing epekto ng kahon na may asul kapag nag-click kami sa ilan sa dalawang mga patlang ng pag-login o pag-login.

Paglikha ng account / form sa pag-login

Isang gimik pag-login at paggawa ng account na batay sa animasyon ano ang nangyayari sa pagitan ng dalawang seksyon na iyon. Napaka-kasalukuyan at kapansin-pansin na presensya na dapat gawin sa HTML, JavaScript at CSS.

Highlight ng Ahas

Highlight ng Ahas ay isa sa pinaka kapansin-pansin na pag-login sa anumang listahan na nakatayo para sa matikas na animasyon lumilitaw iyon nang mabilis sa sandaling mag-click kami sa isa sa dalawang mga patlang.

Screen sa pag-login

Banal ang disenyo na ito login screen ganon din ang kanilang mga animasyon at kung gaano ito malikhain. Kung nais mong maging pinaka-kasalukuyang pagdating sa disenyo ng web, ang form na ito ay hindi maaaring mawala. Kailangang-kailangan.

Disenyo ng pag-login sa UI

Dinisenyo gamit ang HTML, Sass, at jQuery. Disenyo ng pag-login sa UI es elegant at malinaw sa paksa na hindi nagkukulang ng banayad na mga animasyon upang maging isa pa sa mga paborito sa listahan.

Paglikha ng pag-login at UI account

Isang espesyal disenyo ng pag-login at UI ng paglikha ng account  para sa mga kulay at para sa pagpapakita sa isang malaking card ang dalawang seksyon. Isa pa sa pinakamaganda sa pagpapatupad na hindi natin makaligtaan. Ginawa sa HTML, CSS at JavaScript.

Nakakainis na mga error

Nakakainis na mga error Ito ay isang mahusay na pag-login dahil sa animasyon ng mga patlang na may kasuklam-suklam.css. Orihinal na maging isang masaya, walang alintana at ibang-iba sa pag-login. Orihinal na walang duda para sa aming website.

Pag-login sa CSS HTML

Isang usyosong pag-login sa pamamagitan ng iba't ibang mga icon na nagpapakita ng bawat patlang upang kunin ang bisita saan man gusto namin. Ang mga shade na pinili sa mga kulay ay nakikilala din. Wala itong anumang animasyon. Ginawa ito sa HTML at CSS upang ipatupad ito sa website para sa isang kliyente o sa amin.

Formal na form sa pag-login

Ito Formal na form sa pag-login ay inspirasyon ng wika ng disenyo na kilala sa Disenyo ng Materyal. Nakita namin ito sa maraming mga application sa mga mobile device. Sa code na ito mayroon kaming isang panel ng pag-login at isang panel ng pagpaparehistro na nakatago bilang default. Ang panel ng pagpaparehistro ay maaaring buhayin sa pamamagitan ng pag-click sa asul na haligi sa kanang bahagi. Mayroon itong mahusay na animasyon upang maging isang napaka-espesyal at kapansin-pansin na pag-login.

Bumuo ng flexbox

Sinimulan namin ang mga form sa paghahanap na ito paraan batay sa flexbox. Ito ay nakatayo para sa pulang kulay ng «paghahanap» at para sa kaunti pa para sa isang matikas na patlang ng paghahanap para sa iyong website.

Animated na kahon

Gamit ito animated box mag-click sa icon ng magnifying glass at lilitaw ang isang maliwanag na asul na animation upang mai-type lamang namin ang paghahanap na isasagawa namin sa website. Ginawa ng HTML, CSS at JavaScript.

Patlang sa paghahanap

isang malaking linya tumatakbo sa buong screen upang kapag pinindot namin ito sinisimulan naming i-type ang paghahanap. Isang pindutan ng pickup upang tukuyin ito simpleng form sa paghahanap.

Pag-click sa simpleng patlang ng paghahanap

Pag-click sa simpleng patlang ng paghahanap ay batay sa isang pakikipag-ugnay na nakikita sa ang Waze Driver Community App vehicular. Lahat ng mga icon at imahe ay ginawa gamit ang CSS. Ito ay nakatayo para sa mga icon na nagbibigay-daan sa amin upang isagawa ang mga tukoy na paghahanap para sa isang produkto o serbisyo. Nakakaakit para sa kung gaano ito cool.

Epekto ng pag-input ng teksto ng CSS

Epekto ng pag-input ng teksto ng CSS may kasamang isang serye ng mga animasyon sa drawer ng teksto at paghahanap upang maging maingat na naghahanap sa porma.

Paghahanap ng buong screen

Ang entry na ito mula sa paghahanap sa buong screen gumagana ito sa anumang uri ng layout o posisyon. Nangangailangan ng mga istilo tukoy na container at elemento ng paghahanap na overlay na matatagpuan sa ugat. Ito ay nailalarawan sa pamamagitan ng isang tumatalbog na animation sa sandaling pinindot namin ang pindutan ng paghahanap.

Maghanap

Un form ng paghahanap simple yan gusto niyang maglaro ng iba`t ibang posisyon at mga animasyon. Nag-click kami sa pindutan ng paghahanap at lilitaw ang kumpletong drawer upang mai-type ang mga salita. Napaka-kasalukuyan at lubos na inirerekomenda para sa kung gaano ito simple.

Walang tanong

Walang tanong es simpleng form na may larangan ng teksto at ang pagpipiliang pumili ng ilang mga sagot para mapili ng gumagamit ang mga ito. Mahusay na pakikitungo sa paningin upang maging isa sa pinakamahusay.

Form ng subscription sa popup

Gamit ito popup form sa subscription, nag-click kami sa lumulutang na pindutan at dadalhin kami nito form na may isang napaka nakakatawa tono at isang patlang kung saan ipasok ang email. Perpekto para sa pagmemerkado sa email.

Subscription box UI

isang kahon ng subscription may alarm bell at kaunti pa sa mga patag na kulay Sa disenyo.

Kahon ng subscription sa CSS

isang matalinong kahon ng subscription para sa katotohanan ng gumamit ng gradients para sa pindutan ng pag-subscribe tulad ng lila na kulay ng patlang.

Kahon ng suskrisyon

isang simpleng kahon ng subscription ngunit may mahusay na epekto sa pamamagitan ng disenyo.

Form ng pagpapatunay ng EMOJI

Sa puro CSS ito form ng pagpapatunay upang likhain ang susi o password. Habang nagsusulat kami, susukat ng emoji ang antas ng seguridad ng form. Nakakatawa at mausisa nang walang pag-aalinlangan.

Huwag palampasin ito listahan ng 23 mga animated na arrow sa CSS.