Formatera textfält och textområden

Webbläsare återger textfält och textområden med sina egna standardformat — olika i varje operativsystem och webbläsare. I Chrome får standardfältet en blå ring vid fokus, medan det i Firefox kan se helt annorlunda ut.

Tailwind återställer formulärelement med sina grundläggande preflight-stilar, vilket ger dig en ren utgångspunkt. Därefter lägger du uttryckligen till egna stilar för kantlinje, utfyllnad, bakgrund och fokus, så att upplevelsen blir enhetlig i alla webbläsare.

Ett välformaterat textfält kombinerar verktyg för storlek, kantlinje, bakgrund och fokus. Grundmönstret för standardläget är w-full px-3 py-2 text-sm bg-white border border-gray-300 rounded-lg.

Lägg till placeholder:text-gray-400 för att tona ned platshållartexten och text-gray-900 för att säkerställa att den faktiska inmatningstexten är mörk och lättläst. Verktyget w-full ser till att fältet fyller sin behållare, vilket är det förväntade beteendet för formulärfält.

Fokustillståndet är den viktigaste interaktiva stilen för ett inmatningsfält. Användare som navigerar med tangentbord behöver en tydlig visuell markering av vilket fält som är aktivt. Använd focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent för att ersätta webbläsarens standardkontur med en Tailwind-ring.

focus:border-transparent tar bort den grå kantlinjen vid fokus så att den blå ringen inte konkurrerar visuellt med den. Lägg till transition-shadow duration-150 för att få ringen att visas mjukt.

Varje inmatningsfält måste ha en tillhörande etikett av tillgänglighetsskäl. Placera etiketten och inmatningsfältet i en behållare med flex flex-col gap-1 så att de staplas prydligt. Etiketten använder text-sm font-medium text-gray-700 och kopplas till inmatningsfältet med matchande attribut för for och id.

Förlita dig aldrig enbart på platshållartext som ersättning för en etikett — platshållare försvinner när användaren börjar skriva, så att fältets sammanhang går förlorat.

Många inmatningsfält har nytta av ett ikonprefix som visar vilken typ av inmatning som förväntas — ett förstoringsglas för sökning, ett kuvert för e-post eller ett lås för lösenord. Använd relative på omslaget, absolute left-3 top-1/2 -translate-y-1/2 på ikonen och pl-10 på inmatningsfältet för att flytta texten förbi ikonen.

Tekniken håller ikonen och inmatningsfältet snyggt justerade utan extra omslagselement som påverkar layouten.

En suffixknapp sitter fäst vid inmatningsfältets högra kant — vanligt i lösenordsfält (visa/dölj-växling) eller sökfält (skicka-knapp). Använd ett flexomslag med overflow-hidden rounded-lg border border-gray-300 flex, ange flex-1 border-0 focus:ring-0 för inmatningsfältet och formge knappen med en avskiljande vänsterkantlinje.

border-0 på inmatningsfältet tar bort dess kantlinje, eftersom det yttre flexomslaget tillhandahåller den gemensamma kantlinjen.

Textområden använder samma verktygsklasser som textfält. Ange en minsta höjd med min-h-24 eller en fast höjd med h-32, och lägg till resize-none eller resize-y för att styra om användaren kan ändra elementets storlek.

Använd resize-y för att tillåta storleksändring i höjdled, vilket är det naturligaste beteendet för textområden, och förhindra storleksändring i sidled som kan förstöra layouten. Om du lägger till leading-relaxed blir texten lättare att läsa när användare skriver innehåll på flera rader.

Inaktiverade inmatningsfält bör skilja sig visuellt från aktiva fält. Använd disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed för att skapa ett ljusare, nedtonat utseende. Lägg även till disabled:border-gray-200 för att tona ned kantlinjen.

Inkludera alltid HTML-attributet disabled — Tailwinds variant disabled: läser detta attribut, så stilarna tillämpas bara när attributet finns.

Ett inmatningsfält med readonly visar ett värde som användare kan läsa och kopiera men inte ändra. Till skillnad från inaktiverade fält kan skrivskyddade fält fortfarande få fokus och nås med tangentbordet. Formge dem med read-only:bg-gray-50 read-only:text-gray-600 för att diskret visa att de inte kan redigeras.

Skrivskyddade fält används för beräknade värden, bekräftelsefält eller referensdata som användare behöver se men inte bör ändra.

Formulär i olika sammanhang behöver inmatningsfält i olika storlekar. Definiera en liten, medelstor och stor variant genom att ändra utfyllnaden och textstorleken. Ett litet inmatningsfält passar bra för infogade filter, medan ett stort inmatningsfält passar sökfält i herosektioner.

• Litet: px-2.5 py-1.5 text-xs
• Medelstort: px-3 py-2 text-sm (standard)
• Stort: px-4 py-3 text-base

Textområden för användargenererat innehåll innehåller ofta en teckenräkning som visas under fältet. Använd en flexrad med flex items-center justify-between mt-1 för att placera hjälptexten till vänster och räkneverket till höger.

Formge hjälptexten med text-xs text-gray-500 och räkneverket med matchande liten grå text. JavaScript uppdaterar räkneverket vid varje input-händelse. När gränsen nästan har nåtts ändrar du räkneverkets färg till text-red-600 som en varning.

I den här lektionen har du lärt dig grundläggande formatering av inmatningsfält med border border-gray-300 rounded-lg px-3 py-2; fokusringar som ersätter webbläsarens konturer med focus:outline-none focus:ring-2 focus:ring-blue-500; samt speciella mönster för inmatningsfält, till exempel ikonprefix med absolut positionering, suffixknappar med flexlayout och varianter för inaktiverade och skrivskyddade fält. Nästa steg är att formge listrutor och kryssrutor.