Tekstikenttien ja tekstialueiden tyylittely
Käyttäkää tekstikentissä ja tekstialueissa border-, padding-, ring- ja focus-utilityjä selkeiden ja saavutettavien lomakekenttien luomiseksi.
Tekstikenttien ja tekstialueiden tyylittely on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Tyylittelemättömien syötekenttien ongelma
Selaimet näyttävät tekstikentät ja tekstialueet omilla oletustyyleillään, jotka vaihtelevat käyttöjärjestelmän ja selaimen mukaan. Chromessa oletussyötekentässä näkyy kohdistettaessa sininen rengas, kun taas Firefoxissa se voi näyttää täysin erilaiselta.
Tailwind nollaa lomake-elementtien tyylit preflight-perustyyleillään ja antaa sinulle puhtaan lähtökohdan. Sen jälkeen määrität reunuksen, sisennyksen, taustan ja kohdistustyylit itse, jolloin käyttökokemus pysyy yhtenäisenä kaikissa selaimissa.
<!-- Without styling: browser-dependent appearance -->
<input type="text" placeholder="Enter name" />
<!-- With Tailwind: consistent, styled input -->
<input
type="text"
placeholder="Enter name"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>Syötekentän perusrakenne
Hyvin tyylitelty tekstikenttä yhdistää koon, reunuksen, taustan ja kohdistuksen apuluokat. Oletustilan perusmalli on w-full px-3 py-2 text-sm bg-white border border-gray-300 rounded-lg.
Lisää placeholder:text-gray-400 pehmentämään paikkamerkkitekstiä ja text-gray-900 varmistamaan, että varsinainen syöteteksti on tummaa ja helppolukuista. Apuluokka w-full varmistaa, että syötekenttä täyttää säilönsä, mikä on lomakekenttien odotettu toimintatapa.
<input
type="text"
placeholder="Full name"
class="w-full px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
placeholder:text-gray-400"
/>Kohdistusrengas ja ääriviiva
Kohdistustila on syötekentän tärkein vuorovaikutteinen tyyli. Näppäimistöllä navigoivat käyttäjät tarvitsevat selkeän visuaalisen merkin aktiivisesta kentästä. Korvaa selaimen oletusääriviiva Tailwindin renkaalla käyttämällä luokkia focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent.
focus:border-transparent poistaa harmaan reunuksen kohdistuksen aikana, jotta sininen rengas ei kilpaile sen kanssa visuaalisesti. Lisää transition-shadow duration-150, jotta rengas tulee näkyviin tasaisesti.
<input
type="email"
placeholder="you@example.com"
class="w-full px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
transition-shadow duration-150"
/>Tunnisteen ja syötekentän yhdistäminen
Jokaisella syötekentällä on oltava siihen liittyvä tunniste saavutettavuuden vuoksi. Aseta tunniste ja syötekenttä säilöön, jonka luokat ovat flex flex-col gap-1, jotta ne asettuvat siististi päällekkäin. Tunnisteessa käytetään luokkia text-sm font-medium text-gray-700, ja se yhdistetään syötekenttään vastaavilla for- ja id-määritteillä.
Älä koskaan käytä pelkkää paikkamerkkitekstiä tunnisteen korvikkeena — paikkamerkki katoaa, kun käyttäjä alkaa kirjoittaa, jolloin kentän asiayhteys häviää.
<div class="flex flex-col gap-1">
<label for="email" class="text-sm font-medium text-gray-700">
Email address
</label>
<input
id="email"
type="email"
placeholder="you@example.com"
class="w-full px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>Kuvakkeella varustettu syötekenttä
Monet syötekentät hyötyvät etuliitteen kuvakkeesta, joka ilmaisee odotetun syötteen tyypin — hakusuurennuslasista, sähköpostin kirjekuoresta tai salasanan lukosta. Käytä säilössä luokkaa relative, kuvakkeessa luokkia absolute left-3 top-1/2 -translate-y-1/2 ja syötekentässä luokkaa pl-10, jotta teksti sisennetään kuvakkeen ohi.
Tämä tekniikka pitää kuvakkeen ja syötekentän siististi kohdakkain ilman ylimääräisiä säilöelementtejä, jotka vaikuttaisivat asetteluun.
<div class="relative">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<input
type="email"
placeholder="you@example.com"
class="w-full pl-10 pr-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>Jälkiliitepainikkeella varustettu syötekenttä
Jälkiliitepainike sijaitsee syötekentän oikeaan reunaan kiinnitettynä. Tätä käytetään yleisesti salasanakentissä (näytä/piilota-valitsin) tai hakukentissä (lähetyspainike). Käytä flex-säilöä, jonka luokat ovat overflow-hidden rounded-lg border border-gray-300 flex, määritä syötekentän luokiksi flex-1 border-0 focus:ring-0 ja tyylittele painike vasemman reunan erottavalla reunuksella.
Syötekentän border-0 poistaa sen reunuksen, koska ulompi flex-säilö tarjoaa yhteisen reunuksen.
<div class="flex overflow-hidden rounded-lg border border-gray-300 focus-within:ring-2 focus-within:ring-blue-500">
<input
type="text"
placeholder="Search..."
class="flex-1 px-3 py-2 text-sm text-gray-900 border-0 focus:ring-0 focus:outline-none"
/>
<button class="px-4 py-2 bg-blue-600 text-white text-sm font-semibold
border-l border-gray-300 hover:bg-blue-700 transition-colors">
Search
</button>
</div>Tekstialueiden tyylittely
Tekstialueissa käytetään samoja apuluokkia kuin tekstikentissä. Aseta vähimmäiskorkeus luokalla min-h-24 tai kiinteä korkeus luokalla h-32 ja lisää resize-none tai resize-y määrittämään, voiko käyttäjä muuttaa elementin kokoa.
Käytä luokkaa resize-y, jotta kokoa voi muuttaa pystysuunnassa, mikä on tekstialueille luontevin toimintatapa, ja estä vaakasuuntainen koon muuttaminen, joka voi rikkoa asettelun. leading-relaxed-luokan lisääminen parantaa luettavuutta, kun käyttäjä kirjoittaa monirivistä sisältöä.
<div class="flex flex-col gap-1">
<label for="message" class="text-sm font-medium text-gray-700">Message</label>
<textarea
id="message"
rows="4"
placeholder="Write your message here..."
class="w-full px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
resize-y leading-relaxed
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
></textarea>
</div>Käytöstä poistetun syötekentän tyylittely
Käytöstä poistetut syötekentät on erotettava aktiivisista kentistä visuaalisesti. Käytä luokkia disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed luodaksesi vaaleamman ja harmaantuneen ulkoasun. Lisää myös disabled:border-gray-200 pehmentämään reunusta.
Lisää aina HTML:n disabled-määrite — Tailwindin disabled:-variantti lukee tätä määritettä, joten tyylit otetaan käyttöön vain, kun määrite on olemassa.
<input
type="text"
value="Cannot edit this"
disabled
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
disabled:bg-gray-50 disabled:text-gray-400
disabled:cursor-not-allowed disabled:border-gray-200"
/>Vain luku -syötekentän tyyli
readonly-syötekenttä näyttää arvon, jonka käyttäjä voi lukea ja kopioida mutta jota hän ei voi muokata. Toisin kuin käytöstä poistetut kentät, vain luku -kentät ovat edelleen kohdistettavia ja niissä voi navigoida näppäimistöllä. Tyylittele ne luokilla read-only:bg-gray-50 read-only:text-gray-600 osoittamaan hienovaraisesti, ettei niitä voi muokata.
Vain luku -kenttiä käytetään laskettuihin arvoihin, vahvistuskenttiin tai viitetietoihin, jotka käyttäjän on nähtävä mutta joita hänen ei pitäisi muuttaa.
<div class="flex flex-col gap-1">
<label for="ref" class="text-sm font-medium text-gray-700">Reference ID</label>
<input
id="ref"
type="text"
value="ORD-2026-00847"
readonly
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
read-only:bg-gray-50 read-only:text-gray-600
focus:outline-none focus:ring-2 focus:ring-gray-400"
/>
</div>Syötekentän kokovaihtoehdot
Eri käyttötarkoituksissa olevat lomakkeet tarvitsevat erikokoisia syötekenttiä. Määritä pieni, keskikokoinen ja suuri vaihtoehto muuttamalla sisennystä ja tekstikokoa. Pieni syötekenttä sopii erinomaisesti rivinsisäisiin suodattimiin, kun taas suuri syötekenttä sopii korostettuihin hakupalkkeihin.
- Pieni:
px-2.5 py-1.5 text-xs - Keskikokoinen:
px-3 py-2 text-sm(oletus) - Suuri:
px-4 py-3 text-base
<!-- Small -->
<input type="text" placeholder="Small" class="w-full px-2.5 py-1.5 text-xs border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" />
<!-- Medium (default) -->
<input type="text" placeholder="Medium" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
<!-- Large -->
<input type="text" placeholder="Large" class="w-full px-4 py-3 text-base border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500" />Merkkimäärän ohjeteksti
Käyttäjien luomaa sisältöä varten olevissa tekstialueissa näytetään usein kentän alapuolella merkkimäärä. Käytä flex-riviä, jonka luokat ovat flex items-center justify-between mt-1, sijoittaaksesi ohjetekstin vasemmalle ja merkkimäärän oikealle.
Tyylittele ohjeteksti luokilla text-xs text-gray-500 ja merkkimäärä vastaavalla pienellä harmaalla tekstillä. JavaScript päivittää merkkimäärän jokaisen input-tapahtuman yhteydessä. Kun raja alkaa lähestyä, vaihda merkkimäärän väriksi text-red-600 varoitukseksi.
<div class="flex flex-col gap-1">
<label for="bio" class="text-sm font-medium text-gray-700">Bio</label>
<textarea
id="bio"
maxlength="160"
rows="3"
oninput="document.getElementById('count').textContent = this.value.length"
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg resize-none
focus:outline-none focus:ring-2 focus:ring-blue-500"
></textarea>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">Tell us about yourself</span>
<span class="text-xs text-gray-400"><span id="count">0</span>/160</span>
</div>
</div>Pikatarkistus
Testaa, miten hyvin hallitset tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opit syötekenttien perustyylittelyn luokilla border border-gray-300 rounded-lg px-3 py-2; kohdistusrenkaat, joilla selaimen ääriviivat korvataan luokilla focus:outline-none focus:ring-2 focus:ring-blue-500; sekä erityiset syötekenttämallit, kuten kuvakkeet absoluuttisella sijoittelulla, flex-asettelua käyttävät jälkiliitepainikkeet sekä käytöstä poistetut ja vain luku -vaihtoehdot. Seuraavaksi tyylittelemme valikkoluettelot ja valintaruudut.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Tekstikenttien ja tekstialueiden tyylittely” ilmainen?
Kyllä – oppitunnin ”Tekstikenttien ja tekstialueiden tyylittely” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tekstikenttien ja tekstialueiden tyylittely”?
Käyttäkää tekstikentissä ja tekstialueissa border-, padding-, ring- ja focus-utilityjä selkeiden ja saavutettavien lomakekenttien luomiseksi. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Tekstikenttien ja tekstialueiden tyylittely”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tekstikenttien ja tekstialueiden tyylittely
- Valikot ja valintaruudut
- Lomakkeiden asettelumallit
- Validointi- ja virhetilat