40 CSS mafomu ayo asingakwanise kushayikwa pane chero webhusaiti

Kana paine chimwe chinhu chinowanzo kuve chakajairika kune chero mhando yewebhusaiti, aya ndiwo mafomu. Mafomu atinoshandisa kuzadza ruzivo rwekuonana, pinda zvinyorwa zvebhangi, pinda musocial network kana kungo tsvaga seyatinowanzoita mazuva ese muGoogle yekutsvaga injini.

Saka nhasi tiri kuzokuratidza 40 mafomu muCSS kutangira pamafomu ekubatana, kiredhiti kiredhiti checkout, logins, yakapusa, kunyorera kana kunyangwe kusimbiswa. Akateedzana mafomu ehukuru hwakanaka uye dhizaini yekupa iyo yakakosha poindi kune yako webhusaiti, zvisinei nemusoro wenyaya.

Minimalist fomu yekubatana

Fomu rekubatana nyore ne akasiyana siyana emhedzisiro senge zvinoyerera mamaki kana mitsara mifananidzo. Yakashongedzwa CSS kodhi ine zvishoma zveJavaScript. Kana iwe uchitsvaga iyo minimalist fomu yekubatana izvi zvakakunakira iwe.

Nyaya inoenderana:

23 maraibhurari emhando yepamusoro eCSS ekugadzirwa kwewebhu

Minimalist fomu

Zvimwe fomu shoma, kunyange iri muCSS chete kuva yakapusa uye yepamusoro-maitiro fomu. Iyo haina iyo minimalist mifananidzo yeiyo yapfuura, asi inozadzisa chinangwa chayo chaizvo.

Vintage fomu rekubata

Vintage fomu rekubata, dhizaini yakanakisa. Inoteerera kune iwo mawebhusaiti kuti uonekwe kubva panhare, kunyange hazvo isingasanganisi kusimbiswa.

Tsamba yekutaurirana fomu

Este fomu yekutaurirana ine mifananidzo yekuda kuziva: tsamba inoumbwa. Zvakareruka, asi zvinonyanya kubatsira uine yakawanda kara.

Nyaya inoenderana:

27 yemahara HTML neCSS makadhi emablog, e-commerce uye nezvimwe

Yakawedzerwa fomu yekubatana

Este yakawedzerwa fomu yekubatana Inongova yekupedzisira mugumo uye ine iyo kusimbiswa nejQuery. Tinodzvanya pane bhatani rinoyangarara uye fomu ichaonekwa ine hupenyu hunopenya. Yakatanhamara.

Bata Fomu UI

Bata Fomu UI iri fomu rakagadzirwa muHTML neCSS. Inotaridzika kuve kadhi rekubatana iyo yatinogona kuzadza kuitira kuti chete ndima yemavara ishanduke kana ikadzvanywa.

Kadhi rekubhadhara kubuda

Un kubhadhara kadhi Checkout yakaitwa muHTML, CSS uye JavaScript iyo kusiyaniswa nekutenderera kweanopopota kadhi rechikwereti panguva ino isu tinodzvanya pane iyo CVC kana yekuchengetedza nhamba yenhamba.

Kiredhiti kadhi flat dhizaini

Yakachena CSS ye Checkout ye makadhi echikwereti mune akati wandei mavara. Yakajeka uye yakapusa kwazvo iyo inokwanisa kuratidza mhando uye hunyanzvi.

Kiredhiti kadhi UI

Imwe kiredhiti kadhi muHTML, CSS neJavaScript iyo inomira pachena kuti yakanaka sei akasarudza iyo yakazara dhizaini. Takakanganwa nezvemifananidzo mune ino kodhi yekodhi yewebhu webhusaiti. Dhawunirodha pane iyi link.

kuita checkout

kuita checkout, Yakagadzirwa neReact.js, inosiyaniswa ne mufananidzo wepadivi isu tinogona kugadzirisa nemasevhisi kana zvigadzirwa zvatinotengesa muCommerce yedu.

Checkout yekubhadhara kadhi

Iyi Checkout inomiririra mukana wekuisa mufananidzo pakadhi. A yakapusa uye yakajeka fomu yakagadzirwa neCSS3, HTML5 uye zvishoma zvejQuery. Yakakwira mhando uye dzakasiyana kubva kune ese mamwe ma checkout pane ino runyorwa. Unogona kudhawunirodha pano ino yekubhadhara kadhi Checkout.

Kiredhiti kadhi kubhadhara

Este kadhi rechikwereti fomu yekubhadhara yakagadzirirwa kuita ne JavaScript yekunyengera kweDOM. Iwe unogona kuyeuka mune dhizaini kodhi yakanakisa yeStripe, iyo digital banking sevhisi iri kuswedera padyo nePayPal.

Kadhi rechikwereti

Yakashongedzwa kubhadhara kubhadhara kadhi zvakasiyana nevamwe uye zvakavakirwa pa kadhi rechikwereti riri kumusoro Saka kuti pazasi isu tine fomu rese neakasiyana data iro mutengi raanofanira kuzadza kuti abhadhare muCommerce.

Nhanho nhanho fomu

Un fomu nedanho fomu yekunyoresa kunoitwa muHTML, CSS uye JavaScript. Matanho mana echimwe nechimwe chezvirevo iri kuruboshwe. Yakanyatsopedzwa mifananidzo yeiyo yakapera fomu. Yakakurudzirwa

Inopindirana fomu

Un yekudyidzana fomu multi-pass inogadzirwa neHTML, CSS uye JavaScript. Iyo inomiririra kunze kweiyo shanduko yehupenyu pakati peimwe nhanho. Iyo ine yakashongedzwa yekubata iyo isingazo enda isingazivikanwe.

Nhanho nhanho fomu

Este fomu nedanho fomu inomira kuve yekugadzira chaizvo. Iwe uchapindura mibvunzo kuitira kuti iwe ugone kudzokera kwavari chero nguva nekuve nemaziso aripo pachiratidziri nguva dzese.

Nhanho nhanho

Nhanho nhanho fomu yaitwa mu HTML, CSS uye JavaScript. Iyo inozivikanwa neiyo shanduko yehupenyu pakati peimwe nhanho.

Yakawanda nhanho fomu yeJquery

Kana iwe uine fomu refu kwazvo, izvi zvakakwana kune akasiyana zvikamu zvine inoshamisa kwazvo yekufambira mberi bar. Kubva pane jQuery neCSS, inomira kunze kwekugadzirwa kwayo uye nekukwirira kwayo kukuru.

UI yehupenyu fomu

Shanduko dzeizvi UI fomu yemifananidzo ndizvo zvichibva pana Domink Marskusic. Tarisa kune yekugadzira mhedzisiro yebhokisi rebhuruu patinodzvanya pane mamwe eminda miviri yekupinda.

Kugadzirwa kweakaundi / fomu rekupinda

Chinhu chakaipa login uye account account zvinova zvinoenderana nehupenyu chii chinoitika pakati pezvikamu zviviri izvi. Kwazvino chaizvo uye kunoshamisa kuvepo kuti kuitwe muHTML, JavaScript neCSS.

Nyoka Kuratidza

Nyoka Kuratidza ndeimwe yekutora kunoshamisa kwechero rondedzero iyo inomiririra kune yakashongedzwa mifananidzo izvo zvinoonekwa nekukurumidza nguva yatinobaya pane imwe yeminda miviri.

Login chidzitiro

Kunamata ichi dhizaini login skrini ndozvakaitawo avo mifananidzo uye kuti yakasikwa sei. Kana iwe uchida kuve unonyanya kuitika kana zvasvika kune webhu dhizaini, iyi fomu haigone kushayikwa Inokosha.

Login UI dhizaini

Yakagadzirirwa kushandisa HTML, Sass, uye jQuery. Login UI dhizaini es elegant uye yakajeka pane iyo nyaya isingashaye inovhenekera mifananidzo kuti uve imwe yeanodiwa pane akanyorwa.

Login uye UI account account

Yakakosha login dhizaini uye account kugadzira UI  Zvemavara uye zvekuratidzira mukati kadhi rimwe rakakura zvikamu zviviri. Imwe yeakanaka kwazvo mukuuraya kwatisingakwanise kupotsa. Yakagadzirwa muHTML, CSS uye JavaScript.

Zvikanganiso zvinotyisa

Zvikanganiso zvinotyisa Iko kukuru kupinda nekuda kwekuratidzwa kwe minda ine hunhu.css. Chekutanga kuve chinonakidza, chisina hanya uye rakasiyana kwazvo rekupinda. Chekutanga pasina kupokana kune webhusaiti yedu.

Kupinda CSS HTML

Kupinda kwekuda kuziva nemifananidzo yakasiyana izvo zvinoratidza imwe neimwe yeminda yekutora muyenzi kwese kwatinoda. Mimvuri yakasarudzwa mumavara inomirawo. Iyo haina chero hupenyu. Inoitwa muHTML neCSS kuitisa pane webhusaiti kune mutengi kana yedu pachedu.

Modal yekupinda fomu

Este Modal yekupinda fomu rakafemerwa nemutauro we dhizaini inozivikanwa neChinyorwa Dhizaini. Isu takazviona mune akawanda maficha pane nhare mbozha. Mune ino kodhi isu tine pani yekupinda uye pani yekunyoresa iyo yakavanzwa nekutadza. Iyo yekunyoresa pani inogona kuvhurwa nekudzvanya pane yebhuruu ikholamu iri kurudyi kurudyi. Iyo ine hukuru hukuru kuve yakanyanya kukosha uye inokatyamadza login.

Fomu flexbox

Isu tinotanga mafomu ekutsvaga neizvi fomu zvichibva pa flexbox. Iyo inomira kunze kune iyo tsvuku tsvuku yeiyo "tsvaga" uye kune zvishoma zvishoma kune inoyevedza yekutsvaga munda kune yako webhusaiti.

Mifananidzo bhokisi

Neichi rine hupenyu bhokisi tinya pane iyo yekukudza girazi icon uye yakajeka bhuruu kuchangamuka kuchaonekwa saka kuti isu tinongofanira kutaipa kutsvaga kwatinozoita pawebhusaiti. Yakagadzirwa neHTML, CSS uye JavaScript.

Munda wekutsvaga

Una mutsetse muhombe unomhanya nepadivi rekona kuitira kuti kana tikadzvanya tinotanga kutaipa kutsvaga. Bhatani rekutsanangura izvi nyore fomu yekutsvaga.

Nyore yekutsvaga munda tinya

Nyore yekutsvaga munda tinya inoenderana nekubatana kunoonekwa mu iyo Waze Mutyairi Wenharaunda App vehicular. Mifananidzo yese nemifananidzo zvinogadzirwa neCSS. Inomira kunze kwemifananidzo iyo inotitendera kuti tiite tsvakiridzo chaiyo yechigadzirwa kana sevhisi. Kushamisika nekuda kwekutonhorera kwazvakaita.

CSS chinyorwa chekuisa mhedzisiro

CSS chinyorwa chekuisa mhedzisiro inosanganisira akateedzana e mifananidzo mune zvinyorwa uye yekutsvaga dhirowa kuve anotsvaga anotsvaga muchimiro.

Yakazara skrini yekutsvaga

Uku kupinda kubva yakazara skrini yekutsvaga inoshanda nechero mhando yekumisikidzwa kana chinzvimbo. Inoda masitaera container-yakatarwa uye yekutsvaga-pamusoro pechinhu kuve iri mumudzi. Inozivikanwa neanobhucha maficha panguva iyo isu tinodzvanya yekutsvaga bhatani.

Tsvaga

Un fomu yekutsvaga yakapusa izvo anofarira kutamba nenzvimbo dzakasiyana uye mifananidzo. Tinodzvanya pabhatani rekutsvaga uye dhirowa rakazara rinoratidzika kunyora mazwi. Yazvino kwazvo uye inokurudzirwa zvakanyanya kuti yakapusa sei.

Hapana mibvunzo

Hapana mubvunzo es fomu yakapusa ine ndima yemavara uye nesarudzo yekusarudza dzimwe mhinduro dzemushandisi kuti asarudze. Kubata kukuru kutaridzika kuve imwe yeakanakisa.

Popup kunyorera fomu

Neichi popup kunyorera fomu, tinodzvanya pane bhatani rinoyangarara uye zvinotitora kuenda fomu netoni inosetsa uye ndima yekuisa email. Yakakwana kushambadzira kweemail.

Kunyorera bhokisi UI

Una kunyorera bhokisi ine bhero rinorira uye zvishoma kupfuura zvakapetwa mavara Mukugadzirwa.

CSS yekunyorera bhokisi

Una smart kunyorera bhokisi yechokwadi che shandisa gradients yebhatani rekunyorera kungofanana neyepepuru hue yemunda.

Bhokisi rekunyorera

Una yakapusa kunyorera bhokisi asi zvekuita kukuru nekugadzirwa.

EMOJI fomu yekusimbisa

Mune yakachena CSS iyi fomu yekusimbisa kugadzira kiyi kana password. Sezvatinonyora, iyo emoji inoyera danho rekuchengetedza fomu. Anonakidza uye anoda kuziva pasina kupokana.

Usapotsa izvi Chinyorwa chemakumi maviri nemaviri emiseve muCSS.