Mönster för formulärlayouter
Ordna etiketter och inmatningsfält i staplade eller radbaserade layouter med flex och grid samt enhetliga verktyg för avstånd och justering.
Mönster för formulärlayouter är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Varför formulärlayout är viktigt
Formulärets layout är lika viktig som stylingen av de enskilda fälten. Ett välstrukturerat formulär leder användaren naturligt genom ifyllnaden, medan ett dåligt arrangerat formulär ökar risken att användaren avbryter. Formulärlayout omfattar hur etiketter och inmatningsfält placeras, hur fält i flera kolumner arrangeras och hur åtgärder som skicka och avbryt placeras.
Tailwinds flex- och grid-utilities gör alla dessa arrangemang enkla utan att du behöver skriva egen CSS.
Staplad (vertikal) formulärlayout
Den staplade layouten placerar etiketterna direkt ovanför sina inmatningsfält, vilket är det mest mobilvänliga och lättlästa tillvägagångssättet. Varje etikett–inmatningsfält-par ligger i en flex flex-col gap-1-container, och hela formuläret använder space-y-5 mellan paren.
Det här layoutmönstret har visat sig ge högst andel slutförda formulär, eftersom användaren läser etiketten innan inmatningsfältet visas och därmed får sammanhang innan hen behöver agera.
<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>Inline (horisontell) formulärlayout
En inline-layout placerar etiketten till vänster om inmatningsfältet på samma rad. Den är kompakt och fungerar bra för administrativa formulär eller sökfilter där det vertikala utrymmet är begränsat. Använd flex items-center gap-4 på varje rad och ge etiketten en fast bredd, till exempel w-32 flex-shrink-0, så att alla etiketter justeras mot samma högra kant.
På mobila enheter bör dessa inline-rader växla till staplad layout med responsiva brytpunkter: 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>Formulärgrid med två kolumner
För formulär med många fält sparar en tvåkolumnsgrid vertikalt utrymme genom att placera två fält bredvid varandra. Använd grid grid-cols-1 sm:grid-cols-2 gap-5 på formulärets innehåll. Fält som behöver full bredd, till exempel ett textarea-fält för meddelanden, använder sm:col-span-2.
Det här mönstret är mycket vanligt i kassaflöden, på sidor för profilredigering och i registreringsformulär.
<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>Avdelare för formulärsektioner
Långa formulär delas upp i logiska sektioner för att minska den kognitiva belastningen. Lägg till en sektionsrubrik med text-base font-semibold text-gray-900 och en diskret avdelare med border-t border-gray-200 pt-6 mt-6 för att visuellt separera grupper av fält.
Vanliga sektioner i ett profilformulär är Personuppgifter, Kontaktuppgifter, Inställningar och Säkerhet. Varje sektion behandlar ett tydligt ämne, vilket hjälper användarna att förstå formulärets struktur innan de fyller i det.
<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>Markering av obligatoriska fält
Obligatoriska fält markeras vanligtvis med en röd asterisk. Placera ett <span class="text-red-500">*</span> direkt efter etiketttexten. Lägg gärna till en hjälptext som Obligatoriska fält markeras med * högst upp i formuläret.
Validera alltid obligatoriska fält på serversidan. Den visuella markeringen är en hjälp för användarupplevelsen, inte en säkerhetsåtgärd. Använd HTML-attributet required på inmatningsfält som första återkoppling genom webbläsarens validering.
<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>Hjälptext under fält
Hjälptext ger ytterligare sammanhang eller instruktioner om format under ett inmatningsfält. Använd mt-1 text-xs text-gray-500 på en <p>-tagg under inmatningsfältet och koppla den till fältet via aria-describedby för stöd åt skärmläsare.
Håll hjälptexten kort — högst en kort mening. För lösenordsfält förhindrar en hjälptext som förklarar kraven på lösenordets styrka (minst 8 tecken, en siffra) frustrerande valideringsfel efter att formuläret skickats.
<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>Placering av formulärets åtgärdsknappar
Placeringen av skicka-knappen påverkar hur många formulär som slutförs. För formulär i en enda staplad kolumn fungerar en knapp med full bredd, w-full, bra. För formulär i kort eller modaler placerar du primära och sekundära åtgärder längst ned till höger med flex justify-end gap-3.
Placera alltid den destruktiva eller sekundära åtgärden (Avbryt, Återställ) till vänster om den primära åtgärden (Skicka, Spara), så att användarna läser Avbryt före Skicka och inte råkar skicka formuläret när de försöker avbryta.
<!-- 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>Mönster med flytande etikett
En flytande etikett börjar inuti inmatningsfältet som platshållartext och flyttas ovanför fältet när användaren fokuserar på eller skriver i det. Det sparar vertikalt utrymme samtidigt som etiketten förblir synlig. Implementera detta med relative på omslutningen, en absolute-etikett som transformeras i tillstånden focus och not-placeholder-shown, samt peer-utilities.
Den viktigaste utilityn är peer-placeholder-shown:translate-y-0, som håller etiketten inuti det tomma inmatningsfältet, och peer-focus:-translate-y-6 peer-focus:scale-75, som flyttar den ovanför fältet vid fokus.
<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>Inline-formulär (sökfältstil)
Ett inline-formulär placerar inmatningsfältet och skicka-knappen på samma rad, som vid en prenumeration på ett nyhetsbrev eller i ett sökfält i en hero-sektion. Använd en flex gap-2-container där inmatningsfältet får flex-1 och knappen har en fast bredd.
På mobila enheter kan de staplas vertikalt med flex-col sm:flex-row, så att inmatningsfältet får full bredd på små skärmar och knappen placeras under det.
<!-- 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>Navigering i flerstegsformulär
Långa formulär blir enklare att hantera med navigering i flera steg som delar upp dem i logiska etapper. En förloppsindikator högst upp visar var användaren befinner sig. Innehållet för varje steg visas villkorligt, och navigeringsknapparna (Tillbaka/Nästa) placeras längst ned.
Styla stegindikatorerna som numrerade cirklar: w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold. Slutförda steg använder bg-blue-600 text-white, det aktuella steget använder border-2 border-blue-600 text-blue-600, och kommande steg använder 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>Snabbtest
Testa dina kunskaper om koncepten i Tailwind CSS Mastery från den här lektionen.
Lektionssammanfattning
I den här lektionen lärde du dig följande: staplade layouter använder flex flex-col gap-1 för varje etikett–inmatningsfält-par, med space-y-5 mellan raderna; formulär med tvåkolumnsgrid använder grid grid-cols-1 sm:grid-cols-2 gap-5 och sm:col-span-2 för fält med full bredd; och formulärets åtgärder högerjusteras i skrivbordsmodala fönster eller får full bredd i mobilformulär. Nästa steg är att styla validerings- och feltillstånd.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Mönster för formulärlayouter” gratis?
Ja – hela texten till ”Mönster för formulärlayouter” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Mönster för formulärlayouter”?
Ordna etiketter och inmatningsfält i staplade eller radbaserade layouter med flex och grid samt enhetliga verktyg för avstånd och justering. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Mönster för formulärlayouter”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Formatera textfält och textområden
- Väljmenyer och kryssrutor
- Mönster för formulärlayouter
- Validering och feltillstånd