Az űrlapok stílusának formázása CSS-sel: Kezdő útmutató

Az alkalmazások elsősorban űrlapokon keresztül gyűjtik az adatokat. Vegyünk például egy általános regisztrációs űrlapot: a felhasználóknak több mezőbe kell beírniuk az információkat, például a nevüket, az e-mail címüket stb.

Régen a webhelyeknek csak egyszerű, unalmas HTML űrlapjaik voltak, nincs stílus. Ez azelőtt történt, hogy a CSS mindent megváltoztatott. Most még érdekesebb, élénkebb formákat hozhatunk létre a CSS legújabb funkcióinak felhasználásával.

Ne csak szót fogadjon. Az alábbiakban láthatjuk, hogyan néz ki egy tipikus HTML-űrlap CSS nélkül.

Ugyanez az űrlap egy kis CSS-sel van összekapcsolva .

Ebben az oktatóanyagban bemutatjuk, hogyan lehet újból létrehozni a fenti űrlapot, valamint néhány további elképesztő képet módosítások, amelyekkel vizuálisan lenyűgöző, felhasználóbarát űrlapokat hozhat létre.

Hat lépésben bemutatjuk, hogyan formázhatók az űrlapok CSS-sel:

1. box-sizing
2. CSS választók a bemeneti elemekhez
3. Alapvető stílusmódszerek a szövegbeviteli mezőkhöz
4. Más beviteli típusok stílusa
5. UI pseudo-osztályok
6. Nem testreszabható bemenetek

Mielőtt belevágnánk, fontos megértenünk, hogy az űrlapoknak nincs külön stílusa. A lehetőségeket csak a képzelete korlátozza. Ez az útmutató segít abban, hogy elindulhasson a saját egyedi tervek létrehozásában a CSS segítségével.

Kezdjük!

A doboz méretének beállítása

A * {box-sizing:border-box;} t általában nem csak űrlapokhoz, hanem weboldalakhoz is beállítom. Amikor beállítja, az összes elem szélessége tartalmazza a kitöltést.

Például állítsa be a szélességet és a kitöltést az alábbiak szerint.

.some-class { width:200px; padding:20px;}

A .some-class box-sizing:border-box nélküli szélessége meghaladja a 200px szélességet. kérdés lehet. Ezért a legtöbb fejlesztő a border-box elemet használja az összes elemre.

Az alábbiakban a kód jobb verziója található. Támogatja a :before és a :after álelemeket is.

*, *:before, *:after { box-sizing: border-box;}

Tipp: A * választó kiválasztja a dokumentum összes elemét.

CSS választók a bemeneti elemekhez

A kiválasztás legegyszerűbb módja a bemeneti elemeknek CSS attribútumválasztókat kell használniuk.

Ezek a kiválasztók kiválasztják a dokumentum összes beviteli elemét. Ha meg kell adnia valamilyen választót, osztályokat kell hozzáadnia az elemekhez.

<input type="text" class="signup-text-input" />

Ezután:

.signup-text-input { // styles here}

Alapvető stílusmódszerek az egysoros szövegbeviteli mezőkhöz

Az egysoros mezők a leggyakrabban használt űrlapok. Általában az egysoros szövegbevitel egyszerű keret, szegéllyel (ez a böngészőtől függ).

Itt található a helyjelzővel ellátott egysoros mező HTML jelölése.

<input type="text" placeholder="Name" />

Így fog kinézni:

A következőket használhatja: CSS tulajdonságok, amelyek vonzóbbá teszik ezt a beviteli mezőt.

• Kitöltés (belső térköz hozzáadásához)
• Szegély (margó hozzáadásához a beviteli mező körül)
• Szegély
• Doboz árnyéka
• Szegély sugara
• Szélesség
• Betűtípus

Nagyítsunk be a tulajdonságok mindegyikébe.

Kitöltés

A belső tér hozzáadásával a beviteli mező javíthatja az áttekinthetőséget. Ezt a padding tulajdonsággal érheti el.

input { padding: 10px;}

Margó

Ha a beviteli mező közelében vannak más elemek, akkor érdemes hozzáadni egy margót a köré a fürtözés megakadályozása érdekében.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Szegély

A legtöbb böngészőben a szövegbeviteli mezők szegélyekkel rendelkeznek, amelyeket személyre szabhat.

.border-customized-input { border: 2px solid #eee;}

A szegélyt teljesen eltávolíthatja is.

.border-removed-input { border: 0;}

Tipp: Ügyeljen arra, hogy háttérszín vagy box-shadow hozzáadása a határ eltávolításakor. Ellenkező esetben a felhasználók nem fogják látni a bevitelt.

Néhány webdesigner inkább csak az alsó szegélyt jeleníti meg, mert kicsit olyan, mintha egy notebook vonalára írna.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Doboz árnyéka

A CSS box-shadow tulajdonság segítségével hozzáadhat egy árnyékot. A tulajdonságok öt értékének eljátszásával számos effektust érhet el.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Határ sugara

A border-radius tulajdonság hatalmas hatással lehet formáinak érzetére. A dobozok széleinek görbítésével jelentősen megváltoztathatja a beviteli mezők megjelenését.

.rounded-input { padding:10px; border-radius:10px;}

Teljesen más megjelenést és érzetet érhet el a box-shadow és a border-radius együttes használatával.

Szélesség

Használja a width tulajdonságot állítsa be a bemenetek szélességét.

input { width:100%;}

Betűtípusok

A legtöbb böngésző más betűtípust és méretet használ az űrlapelemekhez. Ha szükséges, örökölhetjük a betűtípust a dokumentumból.

input, textarea { font-family:inherit; font-size: inherit;}

Más bemeneti típusok stílusa

Más beviteltípusokat is stílusozhat, például: szöveges terület, választógomb, jelölőnégyzet és egyebek. Vizsgáljuk meg közelebbről.

Szövegterületek

A szövegterületek hasonlóak a szövegbevitelekhez, kivéve, hogy többsoros bevitelt tesznek lehetővé. Ezeket általában akkor használja, ha hosszabb formájú adatokat szeretne gyűjteni a felhasználóktól, például megjegyzéseket, üzeneteket stb. A szövegterületek stílusához felhasználhatja az összes korábban ismertetett alapvető CSS-tulajdonságot.

A resize tulajdonság a szövegterületeken is nagyon hasznos. A legtöbb böngészőben a szöveges területek alapértelmezés szerint átméretezhetők mind az x, mind az y tengely mentén (érték: both). Beállíthatja both, horizontal vagy vertical.

Nézze meg ezt a stílusot:

Supun Kavinda (@SupunKavinda)
Pen and dyomzez
a CodePen oldalon.

Ebben a példában az resize:vertical -t használtam csak függőleges átméretezés engedélyezéséhez. Ezt a gyakorlatot a legtöbb formában használják, mert megakadályozza a bosszantó vízszintes gördítősávokat.

Megjegyzés: Ha automatikusan átméretezni kell a szöveges területeket, akkor JavaScript megközelítést kell használnia, amely kívül esik a ez a cikk.

Jelölőnégyzetek és választógombok

Az alapértelmezett jelölőnégyzetet és választógombokat nehéz megtervezni, és összetettebb CSS-t (és HTML-t) igényelnek.

Stílushoz jelölőnégyzetet, használja a következő HTML kódot.

<label>Name <input type="checkbox" /> <span></span></label>

Néhány megjegyzendő dolog:

• Mivel a div id = “106712b22f”> az <input> csomagolásához, ha a <``label``> belül bármely elemre kattint, a <input> kattintásra kerül
• Elrejtjük a <input> fájlt, mert a böngészők nem engedik meg, hogy sokat módosítsunk
• <span> létrehoz egy egyéni jelölőnégyzetet
• A input:checked pseudo-osztály választót használjuk a beolvasáshoz a bejelölt állapot és stílus az egyéni jelölőnégyzetet

Itt van egy egyéni jelölőnégyzet (további magyarázatért lásd a CSS-ben található megjegyzéseket):

Lásd Supun Kavinda Toll és yLNKQBo ( @SupunKavinda)
a CodePen-en.

Itt van egy egyéni választógomb:

Lásd a tollat és eYNMQNM, írta Supun Kavinda (@SupunKavinda)
a CodePen-en.

Ugyanazt a koncepciót (input:checked) használtuk egyedi elemek létrehozásához mindkét példában.

A böngészőkben a jelölőnégyzetek négyzet alakúak, míg a választógombok kerekek. A legjobb, ha ezt a konvenciót egyéni beviteli formában tartja, hogy elkerülje a felhasználó összetévesztését.

Menük kiválasztása

A kiválasztott menük segítségével a felhasználók több elem közül választhatnak elemet.

Stílusolhatja a <select> elemet, hogy vonzóbbá váljon.

select { width: 100%; padding:10px; border-radius:10px;}

A legördülő menü (vagy a <option> elemek) stílusát azonban nem lehet megformálni, mert alapértelmezés szerint ezek stílusa az operációs rendszertől függ. Az elemek stílusának egyetlen módja az egyéni legördülő menük használata a JavaScript-szel.

Gombok

A legtöbb elemhez hasonlóan a gombok is alapértelmezett stílusúak.

<button>Click Me</button>

Fűszerezzük ezt egy kicsit.

UI pseudo-osztályok

Az alábbiakban felsorolunk néhány UI pseudo-osztályt, amelyeket gyakran használnak az űrlapelemekkel.

Ezeket felhasználhatjuk az értesítések megjelenítésére egy elem attribútumai alapján:

• :required
• :valid és :invalid
• :checked (ezt már használtuk)

Ezeket fel lehet használni effektusok létrehozása az egyes állapotokra:

• :hover
• :focus
• :active

Létrehozott üzenetek a következővel: kötelező

Üzenet megjelenítéséhez, hogy bevitelre van szükség:

Ha eltávolítja a attribútum JavaScript használatával a "Required" üzenet automatikusan eltávolításra kerül.

Ugyanezt tehetjük a :valid és :invalid álosztályok.

: lebegés és: fókusz

:hover kiválaszt egy elemet, amikor az egérmutató lebeg rajta. A :focus fókuszáláskor kiválaszt egy elemet.

Ezeket az ál-osztályokat gyakran használják átmenetek és enyhe vizuális változások létrehozására. Megváltoztathatja például a szélességet, a háttérszínt, a szegély színét, az árnyék erősségét stb.A transition tulajdonság használata ezekkel a tulajdonságokkal sokkal gördülékenyebbé teszi ezeket a változásokat.

Íme néhány lebegő hatás az űrlap elemeire (próbáljon lebegni az elemek felett).

Lásd a tollat
yLNKZqg, írta Supun Kavinda (@SupunKavinda)
a CodePen-en.

Amikor a felhasználók látják, hogy az elemek finoman változnak, amikor lebegnek felettük, megérzik, hogy az elem működőképes. Ez fontos szempont az űrlapelemek tervezésénél.

Észrevette, hogy (egyes böngészőkben) kék körvonal jelenik meg az űrlapelemekre fókuszálva? Használhatja a :focus álosztályt annak eltávolítására és további effektusok hozzáadására, amikor az elem fókuszálódik.

A következő kód eltávolítja az összes elem fókuszvázlatát.

*:focus {outline:none !important}

Fókuszvázlat hozzáadása:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Láttál olyan keresési bemeneteket, amelyek skála, amikor összpontosít? Próbálja ki ezt a bevitelt.

Lásd a tollat
KKpoJJa, Supun Kavinda (@SupunKavinda)
a CodePen-en.

Nem testreszabható bemenetek

A formaelemek stílusa történelmileg magas rend volt. Vannak olyan formai elemek, amelyeket nem nagyon tudunk irányítani a stílus felett. Például:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Ezeket az elemeket a böngésző biztosítja, és az operációs rendszer alapján vannak kialakítva. Az elemek stílusának egyetlen módja az egyéni vezérlők használata, amelyek stílusos HTML elemek használatával jönnek létre, például div, span stb.

Például, ha <input type="file"> stílust készítünk, elrejthetjük az alapértelmezett bevitelt, és használhatunk egy egyéni gombot.

Az űrlapelemek egyéni vezérlőelemei a legtöbb nagyobb JavaScript könyvtár számára kifejlesztve. Megtalálhatja őket a GitHubon.

Következtetés

Most már meg kell értenie, hogyan kell stilizálni az egyszerű űrlapelemeket, és hogyan kell használni az egyéni vezérlőket, ha a böngésző beviteli mezőit nehéz megtervezni. Amint a bejegyzés elején kijelentettem, ezek csak a CSS formanyomtatvány alapvető építőelemei. Ezeket a tippeket alapként kell felhasználnia ahhoz, hogy a fantáziája elvaduljon.

Záró tippként ne feledje, hogy minden űrlapját rugalmasan kell elkészítenie.

További ihletet keres a forma tervezéséhez? Nézze meg ezt a CodePen gyűjteményt.