Lomakkeiden muotoilu CSS: n avulla: Aloittelijan opas

Sovellukset keräävät tietoja ensisijaisesti lomakkeiden kautta. Ota esimerkiksi yleinen rekisteröintilomake: Käyttäjille on useita kenttiä tietojen syöttämiseksi, kuten nimi, sähköpostiosoite jne.

Aikaisemmin verkkosivustoilla oli vain yksinkertaisia, tylsiä HTML-lomakkeita ei tyylejä. Se tapahtui ennen kuin CSS muutti kaiken. Nyt voimme luoda mielenkiintoisempia ja elävämpiä muotoja CSS: n uusimpien ominaisuuksien avulla.

Älä ota vain sanaani. Alla on, miltä tyypillinen HTML-lomake näyttää ilman CSS: ää.

Tässä on sama lomake, jossa on vähän CSS: ää .

Tässä opetusohjelmassa näytämme, miten voit luoda yllä olevan lomakkeen ja muutamia muita upeita muutokset, jotka voit toteuttaa visuaalisesti vaikuttavien, käyttäjäystävällisten lomakkeiden luomiseksi.

Esittelemme lomakkeiden tyylin muokkaamisen CSS: llä kuudessa vaiheessa:

1. Asetus box-sizing
2. CSS-valitsimet syöttöelementeille
3. Perustyylimenetelmät tekstinsyöttökentille
4. Muiden syötetyyppien muotoilu
5. Käyttöliittymän pseudoluokat
6. Mukautamattomat syötteet

Ennen kuin sukellamme, on tärkeää ymmärtää, että lomakkeille ei ole erityistä tyyliä. Mahdollisuuksia rajoittaa vain mielikuvitus. Tämän oppaan on tarkoitus auttaa sinua pääsemään alkuun omien yksilöllisten kuviesi luomisessa CSS: n avulla.

Aloitetaan!

Laatikon koon asettaminen

Asetan yleensä * {box-sizing:border-box;} paitsi lomakkeille myös verkkosivuille. Kun asetat sen, kaikkien elementtien leveys sisältää täytteen.

Aseta esimerkiksi leveys ja täyte seuraavasti.

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

.some-class ilman box-sizing:border-box -leveyttä on yli 200px, joka voi olla ongelma. Siksi useimmat kehittäjät käyttävät border-box kaikkia elementtejä.

Alla on parempi versio koodista. Se tukee myös :before ja :after pseudoelementtejä.

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

Vinkki: Valitsin * valitsee kaikki asiakirjan elementit.

CSS-valitsimet syöttöelementeille

Helpoin tapa valita syöttöelementtien on käytettävä CSS-attribuuttien valitsimia.

Nämä valitsimet valitsevat kaikki asiakirjan syöttöelementit. Jos sinun on määritettävä valitsimet, sinun on lisättävä luokkia elementteihin.

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

Sitten:

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

Yksirivisten tekstinsyöttökenttien tyylin perusmenetelmät

Yksiriviset kentät ovat yleisimpiä lomakkeissa käytettyjä kenttiä. Yleensä yksirivinen tekstinsyöttö on yksinkertainen ruutu, jossa on reunus (tämä riippuu selaimesta).

Tässä on yksirivisen kentän HTML-merkinnät, joissa on paikkamerkki.

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

Se näyttää tältä:

Voit käyttää seuraavia CSS-ominaisuudet tekevät tästä kentästä houkuttelevamman.

• Täyte (sisäisen välin lisäämiseksi)
• Reuna (marginaalin lisääminen syöttökentän ympärille)
• Reuna
• Laatikon varjo
• Reunan säde
• Leveys
• Kirjasin

Lähennetään jokaisessa näistä ominaisuuksista.

Täyte

Sisätilan lisääminen syöttökenttään voi parantaa selkeyttä. Voit tehdä tämän ominaisuudella padding.

input { padding: 10px;}

Marginaali

Jos syöttökentän lähellä on muita elementtejä, sinun on ehkä lisättävä marginaali sen ympärille klusteroitumisen estämiseksi.

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

Reuna

Useimmissa selaimissa tekstinsyöttökentissä on reunat, joita voit muokata.

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

Voit myös poistaa reunan kokonaan.

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

Vinkki: Varmista lisätä taustavärin tai box-shadow kun reuna poistetaan. Muuten käyttäjät eivät näe syötettä.

Jotkut web-suunnittelijat haluavat näyttää vain alareunan, koska tuntuu vähän muistikirjan riville kirjoittamisesta.

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

Laatikon varjo

CSS-ominaisuuden box-shadow avulla voit lisätä varjon. Voit saavuttaa useita tehosteita pelaamalla ominaisuuden viidellä arvolla.

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

Rajasäde

Ominaisuudella border-radius voi olla valtava vaikutus lomakkeiden tunnelmaan. Kaarramalla ruutujen reunoja voit muuttaa merkittävästi syöttökenttien ulkoasua.

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

Voit saavuttaa toisen ilmeen ja tuntuman käyttämällä box-shadow ja border-radius yhdessä.

Leveys

Käytä width -ominaisuutta aseta syötteiden leveys.

input { width:100%;}

Kirjasimet

Useimmat selaimet käyttävät eri elementtipohjia ja -kokoa. Tarvittaessa voimme periä fontin asiakirjasta.

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

Muiden syötetyyppien muotoilu

Voit muotoilla muita syöttötyyppejä, kuten teksti-alue, valintanappi, valintaruutu ja paljon muuta. Katsotaanpa tarkemmin.

Tekstialueet

Tekstialueet ovat samanlaisia kuin tekstinsyötöt paitsi, että ne sallivat monirivisen syötteen. Käytä niitä yleensä, kun haluat kerätä käyttäjiltä pidemmän muotoisia tietoja, kuten kommentteja, viestejä jne. Voit käyttää kaikkia aiemmin keskustelemiamme CSS: n perusominaisuuksia tekstialueiden muotoilussa. resize -ominaisuus on myös erittäin hyödyllinen teksti-alueilla. Useimmissa selaimissa tekstialueiden kokoa voidaan muuttaa oletusarvoisesti sekä x- että y-akselilla (arvo: both). Voit asettaa sen arvoon both, horizontal tai vertical.

Katso tämä tyylialue:

Katso Supun Kavindan (@SupunKavinda) kynä
dyomzez
CodePenissä.

Tässä esimerkissä käytin resize:vertical -toimintoa sallien vain pystysuoran koon muuttamisen. Tätä käytäntöä käytetään useimmissa muodoissa, koska se estää ärsyttäviä vaakasuuntaisia vierityspalkkeja.

Huomaa: Jos haluat luoda tekstialueiden automaattisen koon, sinun on käytettävä JavaScript-lähestymistapaa, joka ei ole tämä artikkeli.

Valintaruudut ja valintanapit

Oletusvalintaruutuja ja valintanappeja on vaikea muotoilla ja ne vaativat monimutkaisempia CSS: iä (ja HTML: ää).

Tyylittele valintaruutua, käytä seuraavaa HTML-koodia.

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

Muutama huomioitava asia:

• Koska käytämme <label> käärimään <input>, jos napsautat mitä tahansa elementtiä <``label``> sisällä, <input> napsautetaan
• Piilotamme <input>, koska selaimet eivät salli meidän muuttaa sitä paljon
• <span> luo mukautetun valintaruudun
• Käytämme pseudoluokan valitsinta input:checked tarkistettu tila ja tyyli mukautettu valintaruutu

Tässä on mukautettu valintaruutu (lisätietoja CSS: n kommenteista):

Katso Supun Kavindan kynä
yLNKQBo ( @SupunKavinda)
CodePenissä.

Tässä on mukautettu valintanappi:

Katso Supunin kynä
eYNMQNM Kavinda (@SupunKavinda)
CodePenissä.

Käytimme samaa käsitettä (input:checked) luodaksemme mukautettuja elementtejä molempiin esimerkkeihin.

Selaimissa valintaruudut ovat laatikkomaisia, kun taas valintanapit ovat pyöreitä. On parasta pitää tämä käytäntö mukautetuissa syötteissä käyttäjän sekaannuksen välttämiseksi.

Valitse valikot

Valitse valikot, joiden avulla käyttäjät voivat valita kohteen useista vaihtoehdoista.

Voit muotoilla <select> -elementin näyttämään houkuttelevammalta.

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

Et voi kuitenkaan muotoilla avattavaa valikkoa (tai <option> -elementtejä), koska ne on tyyliltään oletuksena käyttöjärjestelmästä riippuen. Ainoa tapa muotoilla näitä elementtejä on käyttää mukautettuja pudotusvalikkoja JavaScriptin kanssa.

Painikkeet

Kuten useimmilla elementeillä, painikkeilla on oletustyylit.

<button>Click Me</button>

Maustetaan tätä hieman.

Käyttöliittymän pseudoluokat

Alla on joitain käyttöliittymän pseudoluokkia, joita käytetään yleisesti lomake-elementtien kanssa.

Näitä voidaan käyttää ilmoitusten näyttämiseen perustuu elementin määritteisiin:

• :required
• :valid ja :invalid
• :checked (olemme jo käyttäneet tätä)

Näitä voidaan käyttää luoda vaikutuksia kuhunkin tilaan:

• :hover
• :focus
• :active

Luodut viestit, joissa vaaditaan: vaaditaan

Jos haluat näyttää viestin, että syötettä vaaditaan:

Jos poistat -määritteen JavaScriptiä käytettäessä "Required" -sanoma poistetaan automaattisesti.

Voimme tehdä saman asian kohdalla :valid ja :invalid näennäisluokat.

: vie hiiri ja: kohdista

:hover valitsee elementin, kun hiiren osoitin vie sen päälle. :focus valitsee elementin kohdennettuna.

Näitä näennäisluokkia käytetään usein siirtymien ja pienten visuaalisten muutosten luomiseen. Voit esimerkiksi muuttaa leveyttä, taustaväriä, reunuksen väriä, varjon voimakkuutta jne.transition -ominaisuuden käyttäminen näiden ominaisuuksien kanssa tekee muutoksista paljon sujuvampia.

Tässä on joitain hiiren vaikutuksia lomake-elementteihin (yritä viedä hiiri elementtien päälle).

Katso kynä
yLNKZqg, kirjoittanut Supun Kavinda (@SupunKavinda)
CodePenissä.

Kun käyttäjien näkemät elementit muuttuvat hienovaraisesti, kun he leijuvat niiden päällä, he ymmärtävät, että elementti on toimintakelpoinen. Tämä on tärkeä näkökohta muotoillessasi lomakeelementtejä.

Huomasitko, että (joissakin selaimissa) sininen ääriviiva tulee näkyviin, kun keskityt lomakelementteihin? Voit käyttää :focus -pseudoluokkaa poistamaan sen ja lisäämällä tehosteita, kun elementti on kohdistettu.

Seuraava koodi poistaa kaikkien elementtien kohdistusrajapinnan.

*:focus {outline:none !important}

Kohdistuksen ääriviivan lisääminen:

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

Oletko nähnyt hakusyötteitä, jotka mittakaavassa keskittyneenä? Kokeile tätä syötettä.

Katso kynä
KKpoJJa, kirjoittanut Supun Kavinda (@SupunKavinda)
CodePenissä.

Mukautamattomat tulot

Lomakelementtien muotoilu on perinteisesti ollut korkea järjestys. On joitain muotoelementtejä, joita meillä ei ole paljon hallintaa tyylin suhteen. Esimerkiksi:

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

Nämä elementit tarjoaa selain ja ne on sisustettu käyttöjärjestelmän mukaan. Ainoa tapa muotoilla näitä elementtejä on käyttää mukautettuja ohjausobjekteja, jotka luodaan käyttämällä tyylikkäitä HTML-elementtejä, kuten div, span jne.

Esimerkiksi muotoillessamme <input type="file"> voimme piilottaa oletussyötteen ja käyttää mukautettua painiketta.

Lomakelementtien mukautetut ohjausobjektit ovat kehitetty useimmille tärkeimmille JavaScript-kirjastoille. Löydät ne GitHubista.

Johtopäätös

Sinun pitäisi nyt ymmärtää, kuinka tyylitellään yksinkertaisia lomake-elementtejä ja miten mukautettuja ohjausobjekteja käytetään, kun selaimen syöttökenttiä on vaikea muotoilla. Kuten totesin tämän viestin alussa, nämä ovat vain CSS-muotoilun peruselementit. Sinun tulisi käyttää näitä vinkkejä mielikuvituksen vapauttamiseen.

Lopuksi, muista tehdä kaikista lomakkeistasi reagoivia.

Etsitkö lisää inspiraatiota lomakkeiden suunnittelusta? Tutustu tähän CodePen-kokoelmaan.