Lomakkeiden asettelumallit
Järjestäkää otsikot ja kentät päällekkäisiin tai rinnakkaisiin asetteluihin flex- ja grid-malleilla sekä yhdenmukaisilla gap- ja tasausutilityillä.
Lomakkeiden asettelumallit on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Miksi lomakkeen asettelulla on väliä
Lomakkeen asettelu on yhtä tärkeä kuin sen yksittäisten kenttien tyylittely. Hyvin jäsennelty lomake ohjaa käyttäjiä täyttämisessä luontevasti, kun taas huonosti järjestetty lomake lisää keskeyttämisiä. Lomakkeen asettelu kattaa selitteiden ja syöttökenttien sijoittelun, usean sarakkeen kenttien järjestämisen sekä toimintojen, kuten lähetys- ja peruutuspainikkeiden, sijoittamisen.
Tailwindin flex- ja grid-utilityt tekevät näistä kaikista asetteluista suoraviivaisia ilman mukautetun CSS:n kirjoittamista.
Pinottu (pystysuuntainen) lomakeasettelu
Pinotussa asettelussa selitteet sijoitetaan suoraan syöttökenttien yläpuolelle. Tämä on mobiiliystävällisin ja helppolukuisin lähestymistapa. Kukin selite–syöttökenttä-pari on flex flex-col gap-1 -säilössä, ja koko lomakkeessa parien väliseen väliin käytetään space-y-5-luokkaa.
Tämän asettelun on osoitettu tuottavan parhaat täyttöasteet, koska käyttäjät lukevat selitteen ennen syöttökentän näkemistä ja saavat siten asiayhteyden ennen toimimista.
<form class="max-w-md space-y-5">
<div class="flex flex-col gap-1">
<label for="fname" class="text-sm font-medium text-gray-700">First name</label>
<input id="fname" type="text" 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" />
</div>
<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" 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" />
</div>
<button type="submit" class="w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
Submit
</button>
</form>Rivinsisäinen (vaakasuuntainen) lomakeasettelu
Rivinsisäisessä asettelussa selite sijoitetaan syöttökentän vasemmalle puolelle samalle riville. Tämä on tiivis ratkaisu, joka sopii hyvin hallintolomakkeisiin tai hakusuodattimiin, joissa pystysuora tila on rajallinen. Käytä kullakin rivillä flex items-center gap-4 -luokkia ja anna selitteelle kiinteä leveys, kuten w-32 flex-shrink-0, jotta kaikki selitteet kohdistuvat samaan oikeaan reunaan.
Mobiilissa nämä rivit kannattaa muuttaa pinotuiksi responsiivisten rajakohtien avulla: flex-col sm:flex-row.
<form class="space-y-4">
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<label for="h-name" class="text-sm font-medium text-gray-700 sm:w-32 sm:flex-shrink-0 sm:text-right">
Full name
</label>
<input id="h-name" type="text" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
</div>
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<label for="h-email" class="text-sm font-medium text-gray-700 sm:w-32 sm:flex-shrink-0 sm:text-right">
Email
</label>
<input id="h-email" type="email" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
</div>
</form>Kaksisarakkeinen lomakeruudukko
Kun lomakkeessa on paljon kenttiä, kaksisarakkeinen ruudukko säästää pystysuoraa tilaa sijoittamalla kaksi kenttää vierekkäin. Käytä lomakkeen rungossa luokkia grid grid-cols-1 sm:grid-cols-2 gap-5. Täyden leveyden tarvitsevat kentät, kuten viestitekstialue, käyttävät sm:col-span-2-luokkaa.
Tämä malli on erittäin yleinen kassalomakkeissa, profiilin muokkaussivuilla ja rekisteröitymislomakkeissa.
<form class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div class="flex flex-col gap-1">
<label class="text-sm font-medium text-gray-700">First name</label>
<input type="text" 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" />
</div>
<div class="flex flex-col gap-1">
<label class="text-sm font-medium text-gray-700">Last name</label>
<input type="text" 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" />
</div>
<!-- Full-width field -->
<div class="flex flex-col gap-1 sm:col-span-2">
<label class="text-sm font-medium text-gray-700">Email address</label>
<input type="email" 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" />
</div>
<!-- Full-width textarea -->
<div class="flex flex-col gap-1 sm:col-span-2">
<label class="text-sm font-medium text-gray-700">Message</label>
<textarea rows="3" 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>
</form>Lomakeosioiden erottimet
Pitkät lomakkeet jaetaan loogisiin osioihin kognitiivisen kuormituksen vähentämiseksi. Lisää osion otsikko luokilla text-base font-semibold text-gray-900 ja hienovarainen erotin luokilla border-t border-gray-200 pt-6 mt-6 erottelemaan kenttäryhmät visuaalisesti.
Profiililomakkeen yleisiä osioita ovat henkilötiedot, yhteystiedot, asetukset ja turvallisuus. Kukin osio käsittelee selkeää aihetta, mikä auttaa käyttäjiä ymmärtämään lomakkeen rakenteen ennen sen täyttämistä.
<form class="max-w-2xl space-y-8">
<!-- Section 1 -->
<div>
<h3 class="text-base font-semibold text-gray-900">Personal Information</h3>
<p class="mt-1 text-sm text-gray-500">Update your personal details.</p>
<div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-5">
<div class="flex flex-col gap-1">
<label class="text-sm font-medium text-gray-700">First name</label>
<input type="text" 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" />
</div>
<div class="flex flex-col gap-1">
<label class="text-sm font-medium text-gray-700">Last name</label>
<input type="text" 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" />
</div>
</div>
</div>
<!-- Section divider -->
<div class="border-t border-gray-200 pt-6">
<h3 class="text-base font-semibold text-gray-900">Contact Details</h3>
</div>
</form>Pakollisten kenttien merkinnät
Pakolliset kentät merkitään yleensä punaisella tähdellä. Sijoita <span class="text-red-500">*</span> heti selitetekstin jälkeen. Voit lisätä lomakkeen alkuun valinnaisen ohjetekstin, kuten Pakolliset kentät on merkitty tähdellä *.
Tarkista pakolliset kentät aina palvelimella. Visuaalinen merkintä helpottaa käyttöä, mutta se ei ole turvatoimi. Käytä syöttökentissä HTML:n required-attribuuttia selaintason tarkistukseen ensisijaisena palautteena.
<form class="max-w-md space-y-5">
<p class="text-xs text-gray-500">Fields marked with <span class="text-red-500">*</span> are required.</p>
<div class="flex flex-col gap-1">
<label for="req-name" class="text-sm font-medium text-gray-700">
Full name <span class="text-red-500">*</span>
</label>
<input id="req-name" type="text" required
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" />
</div>
<div class="flex flex-col gap-1">
<label for="req-email" class="text-sm font-medium text-gray-700">
Email <span class="text-red-500">*</span>
</label>
<input id="req-email" type="email" required
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" />
</div>
<div class="flex flex-col gap-1">
<label for="opt-phone" class="text-sm font-medium text-gray-700">Phone number</label>
<input id="opt-phone" type="tel"
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" />
</div>
</form>Kenttien alla oleva ohjeteksti
Ohjeteksti tarjoaa syöttökentän alla lisätietoja tai muotoiluohjeita. Käytä mt-1 text-xs text-gray-500 -luokkia syöttökentän alla olevassa <p>-elementissä ja yhdistä se syöttökenttään aria-describedby-attribuutilla ruudunlukijatuen lisäämiseksi.
Pidä ohjeteksti tiiviinä — enintään yksi lyhyt virke. Salasanakentissä vahvuusvaatimukset selittävä ohjeteksti, kuten vähintään 8 merkkiä ja yksi numero, ehkäisee lähetyksen jälkeisiä turhauttavia tarkistusvirheitä.
<div class="flex flex-col gap-1">
<label for="pw" class="text-sm font-medium text-gray-700">Password</label>
<input
id="pw"
type="password"
aria-describedby="pw-hint"
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"
/>
<p id="pw-hint" class="mt-1 text-xs text-gray-500">
Must be at least 8 characters with one uppercase letter and one number.
</p>
</div>Lomakkeen toimintopainikkeiden sijoittelu
Lähetyspainikkeen sijoittelu vaikuttaa lomakkeen täyttöasteeseen. Yksisarakkeisissa pinotuissa lomakkeissa täyden leveyden w-full-painike toimii hyvin. Korttipohjaisissa tai modaalilomakkeissa sijoita ensisijaiset ja toissijaiset toiminnot oikeaan alakulmaan käyttämällä flex justify-end gap-3-luokkia.
Sijoita tuhoava tai toissijainen toiminto (Peruuta, Nollaa) aina ensisijaisen toiminnon (Lähetä, Tallenna) vasemmalle puolelle, jotta käyttäjät lukevat Peruutan ennen Lähetä-painiketta eivätkä lähetä lomaketta vahingossa yrittäessään peruuttaa.
<!-- Full width (mobile forms) -->
<div class="space-y-3">
<button type="submit" class="w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
Create Account
</button>
<button type="button" class="w-full py-2.5 text-gray-700 font-semibold rounded-lg border border-gray-300 hover:bg-gray-50">
Cancel
</button>
</div>
<!-- Right-aligned (desktop forms) -->
<div class="flex justify-end gap-3 pt-6 border-t border-gray-200">
<button type="button" class="px-4 py-2 text-sm font-semibold text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">
Cancel
</button>
<button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700">
Save Changes
</button>
</div>Kelluvan selitteen malli
Kelluva selite alkaa syöttökentän sisällä paikkamerkkitekstinä ja siirtyy syöttökentän yläpuolelle, kun käyttäjä kohdistaa kentän tai kirjoittaa siihen. Tämä säästää pystysuoraa tilaa ja pitää selitteen silti näkyvissä. Toteuta se käyttämällä kääreessä relative-luokkaa, absolute-luokalla sijoitettua selitettä, joka muuntuu focus- ja not-placeholder-shown-tiloissa, sekä peer-utility-luokkia.
Keskeinen utility on peer-placeholder-shown:translate-y-0, joka pitää selitteen syöttökentän sisällä kentän ollessa tyhjä, ja peer-focus:-translate-y-6 peer-focus:scale-75, joka siirtää sen kohdistettaessa kentän yläpuolelle.
<div class="relative">
<input
id="float-name"
type="text"
placeholder=" "
class="peer w-full px-3 pt-5 pb-2 text-sm text-gray-900 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
<label
for="float-name"
class="absolute left-3 top-3 text-sm text-gray-500 transition-all duration-200
peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600
peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-xs">
Full name
</label>
</div>Rivinsisäinen lomake (hakupalkin tyyli)
Rivinsisäisessä lomakkeessa syöttökenttä ja lähetyspainike ovat samalla rivillä, kuten uutiskirjeen tilauksessa tai aloitusnäkymän hakupalkissa. Käytä flex gap-2 -säilöä, jossa syöttökenttä ottaa flex-1-luokan ja painikkeelle määritetään kiinteä leveys.
Mobiilissa nämä voidaan pinota pystysuuntaan käyttämällä flex-col sm:flex-row -luokkia, jolloin syöttökenttä täyttää pienellä näytöllä koko leveyden ja painike sijoittuu sen alle.
<!-- Email newsletter signup -->
<form class="flex flex-col sm:flex-row gap-3 max-w-md">
<input
type="email"
placeholder="Enter your email"
class="flex-1 px-4 py-2.5 text-sm border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
class="px-6 py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-lg
hover:bg-blue-700 whitespace-nowrap transition-colors">
Subscribe
</button>
</form>Monivaiheisen lomakkeen navigointi
Pitkät lomakkeet hyötyvät monivaiheisesta navigoinnista, joka jakaa ne loogisiin vaiheisiin. Yläreunan etenemisilmaisin näyttää nykyisen vaiheen. Kunkin vaiheen sisältö näytetään ehdollisesti, ja navigointipainikkeet (Takaisin/Seuraava) sijoitetaan alareunaan.
Tyylittele vaiheiden ilmaisimet numeroiduiksi ympyröiksi käyttämällä luokkia w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold. Valmiissa vaiheissa käytetään luokkia bg-blue-600 text-white, nykyisessä vaiheessa luokkia border-2 border-blue-600 text-blue-600 ja tulevissa vaiheissa luokkia border-2 border-gray-300 text-gray-400.
<!-- Step progress indicator -->
<div class="flex items-center gap-0">
<!-- Completed -->
<div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-bold">1</div>
<div class="flex-1 h-0.5 bg-blue-600"></div>
<!-- Current -->
<div class="w-8 h-8 rounded-full border-2 border-blue-600 text-blue-600 flex items-center justify-center text-sm font-bold">2</div>
<div class="flex-1 h-0.5 bg-gray-200"></div>
<!-- Future -->
<div class="w-8 h-8 rounded-full border-2 border-gray-300 text-gray-400 flex items-center justify-center text-sm font-bold">3</div>
</div>Pikatarkistus
Testaa, miten hyvin hallitset tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opit, että pinotuissa asetteluissa käytetään kussakin selite–syöttökenttä-parissa flex flex-col gap-1 -luokkia ja rivien välissä space-y-5-luokkaa; kaksisarakkeisissa lomakeruudukoissa käytetään grid grid-cols-1 sm:grid-cols-2 gap-5 -luokkia ja täyden leveyden kentissä sm:col-span-2-luokkaa; ja lomakkeen toiminnot sijoitetaan työpöydän modaaleissa oikealle tasattuina tai mobiililomakkeissa täyden leveyden levyisinä. Seuraavaksi tyylittelemme tarkistus- ja virhetilat.
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 ”Lomakkeiden asettelumallit” ilmainen?
Kyllä – oppitunnin ”Lomakkeiden asettelumallit” 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 ”Lomakkeiden asettelumallit”?
Järjestäkää otsikot ja kentät päällekkäisiin tai rinnakkaisiin asetteluihin flex- ja grid-malleilla sekä yhdenmukaisilla gap- ja tasausutilityillä. 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 3/4.
Kuinka kauan ”Lomakkeiden asettelumallit”-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