Amafomu ezitayela nge CSS

Funda Ukuthuthukisa Ukubuka Iwebhusayithi Yakho

Ukufunda indlela yokufometha amafomu nge- CSS kuyindlela enhle yokuthuthukisa ukubukeka kwewebhusayithi yakho. Amafomu we-HTML aphikisana phakathi kwezinto ezimbi kakhulu kumakhasi amaningi wewebhu. Bavame ukuzonda futhi basebenzise futhi banganikeli ngendlela yesitayela.

Nge-CSS, lokho kungashintsha. Ukuhlanganisa i-CSS namathegi wefomu okuphambili kungaba nokuletha amafomu amahle abukeka kahle.

Shintsha imibala

Njengoba nje ngombhalo, ungashintsha imibala yangaphambili nangemuva yezici zefomu.

Indlela elula yokushintsha umbala wangemuva cishe zonke izinto zefomu ukusebenzisa imbala yendawo yangemuva kuthegi lokufakwayo. Isibonelo, le khodi isebenza umbala wesizinda esibomvu (# 9cf) kuzo zonke izakhi.

okokufaka {
umbala ongemuva: # 9cf;
umbala: # 000;
}}

Ukuze ushintshe umbala wangemuva wezinto ezithile zefomu, vele ufake umbhalo bese ukhetha isitayela. Ngokwesibonelo:

okokufaka, textarea, ukhethe {
umbala ongemuva: # 9cf;
umbala: # 000;
}}

Qiniseka ukuthi ushintshe umbala wombhalo uma wenza umbala wakho wesizinda ube mnyama. Imibala ehlukisanayo isiza ukwenza izakhi zefomu zibe ngaphezulu. Isibonelo, umbhalo obala umbala obomvu obomvu ufundeka kalula uma umbala wombhalo ubomhlophe. Isibonelo, le khodi ibeka umbhalo omhlophe esizinda esibomvu.

okokufaka, textarea, ukhethe {
umbala wangemuva: # c00;
umbala: #fff;
}}

Ungakwazi ngisho ukufaka umbala wangemuva kufomathi yefomu ngokwayo. Khumbula ukuthi ifomu lefomu liyisici se- block , ngakho umbala ugcwalisa kulo lonke umugqa, hhayi nje kuphela izindawo zezinto.

Ungangezela isizinda esiphuzi kwisici sokuvimba ukwenza indawo ibonakale, njengale:

ifomu {
umbala wangemuva: #ffc;
}}

Engeza ama-Borders

Njengemibala, ungashintsha imingcele yezinhlobo ezahlukene zefomu. Ungangeza umngcele owodwa kuzungeze lonke ifomu. Qinisekisa ukuthi ungeze i-padding, noma izakhi zakho zefomu zizogxila ngqo eceleni komngcele.

Nasi isibonelo sekhodi yomngcele omnyama we-pixel onama-pixel angu-5 wokugqoka:

ifomu {
Umngcele: 1px oqinile # 000;
i-padding: 5px;
}}

Ungabeka imingcele ezungeze ngaphezu kwefomu ngokwayo. Shintsha umngcele wezinto zokufaka ukuze ubonakale:

okokufaka {
Umngcele: 2px udlule # c00;
}}

Qaphela uma ufaka imingcele emabhokisini wokufaka njengoba ubheka kancane njengebhokisi lokufakwayo bese, futhi abanye abantu bangase bangaqapheli ukuthi bangagcwalisa ifomu.

Hlanganisa Izici Zesitayela

Ngokuhlanganisa ndawonye izakhi zakho zefomu nomcabango kanye ne-CSS, ungasetha ifomu elibukeka elihle eligcwalisa ukuklama nokuhlelwa kwesayithi lakho.