Learje om de kâns fan jo webside te ferbetterjen
Learje hoe't formulieren foar formulieren mei CSS is in geweldige manier om de look fan jo webside te ferbetterjen. HTML-foarmen binne wierskynlik ûnder de ûnsjochste dingen op de measte websiden. Se wurde faak langer en brûker en biede net folle op 'e manier fan styl.
Mei CSS kin dat feroarje. Kombinearret CSS mei de meast avansearre formulierte tags kinne guon aardich aardige formulieren leverje.
Feroarje de kleuren
Krekt as by tekst kinne jo de foargrûn en eftergrûnkleuren fan formulierelemen feroarje.
In ienfâldige manier om de eftergrûnkleur te feroarjen fan hast elke formulier elemint is om it eftergrûn-kleurige eigendom te brûken op it input-tag. Bygelyks, dizze koade jout in blauwe eftergrûnkleur (# 9cf) op alle eleminten.
input {
background-color: # 9cf;
kleur: # 000;
}
Om de eftergrûnkleur fan allinich gewoane formulier eleminten te feroarjen, foegje jo tekstarea en selektearje nei de styl. Bygelyks:
input, textarea, selektearje {
background-color: # 9cf;
kleur: # 000;
}
Tink derom om de tekstkleur te feroarjen as jo jo eftergrûnkleur dûnker meitsje. Kontraste kleuren helpe de eleminten foar formulier mear lêsber te meitsjen. Bygelyks, tekst op in donkere reade efterkleur is folle maklik lêzen as de tekstkleur wite is. Bygelyks, dizze koade pleatst wyt tekst op in read eftergrûn.
input, textarea, selektearje {
background-color: # c00;
color: #fff;
}
Jo kinne sels in eftergrûnkleur op 'e form tag sels pleatse. Tink derom dat it formulier is in blokjeel , sadat de kleur yn it hiele rechteel falt, net allinich de lokaasjes fan de eleminten.
Jo kinne in giele eftergrûn tafoegje oan in blokje-elemint om it gebiet út te meitsjen, lykas dit:
foarm {
background-color: #ffc;
}
Borders taheakje
Krekt as by kleuren kinne jo de grinzen fan ferskillende foar eleminten feroarje. Jo kinne in iene grins om de hiele foarm taheakje. Soargje derfoar dat jo padding tafoegje, of jo foarmfoarmen sille neist de grinst rjochte wurde.
Hjir is in foarbyld fan koade foar in 1-pixel swarte grins mei 5 piksels fan padding:
foarm {
border: 1px solid # 000;
padding: 5px;
}
Jo kinne grinzen mear omsette as allinich de foarm sels. Wizigje de grins fan de ynfier items om se út te setten:
input {
border: 2px dashed # c00;
}
Wês opsichtich as jo grinzen op ynfierkasten sette as se minder as ynfierkasten sjogge, en guon minsken kinne net realisearje dat se it formulier ynfolje kinne.
Kombinearre stylfunksjes
Troch jo formuliereleminten mei gedachte en wat CSS tegeare, kinne jo in moaie sykmasine opsetten meitsje dy't it ûntwerp en layout fan jo side kompleet.