Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Strukturering och Formgivning av Formulär | Bygga Grundläggande Komponenter
Tailwind CSS för webbutveckling

bookStrukturering och Formgivning av Formulär

I det här kapitlet kommer vi att utforska hur man kan styla olika formelement med Tailwind CSS, inklusive inmatningsfält, textområden, radioknappar och strömbrytare.

Inmatningsfält

Inmatningsfält är avgörande för användardata. Tailwind tillhandahåller verktygsklasser för att effektivt styla inmatningsfält.

index.html

index.html

copy

Textområden

Textområden används för flerradig textinmatning. De kan stylas på liknande sätt som inmatningsfält.

index.html

index.html

copy

Radioknappar

Radioknappar tillåter användare att välja ett alternativ från en uppsättning.

index.html

index.html

copy

form-radio tillämpar standard Tailwind CSS-stil för radioknappar.

Växlar

Växlar (toggles) används för att representera binära val. Även om Tailwind CSS inte har någon standardverktygsklass för växlar, kan du kombinera verktygsklasser för att skapa en.

index.html

index.html

copy
  • sr-only: Döljer kryssrutan men gör den tillgänglig för skärmläsare;
  • transition: Möjliggör mjuk övergång för switch-pricken;
  • Anpassad CSS används för att hantera markerat läge.

Obs

Mer information om formulär i Tailwind CSS finns här.

1. Vad gör klassen focus:ring-2 när den används på ett input-fält?

2. Vilken klass används för att dölja ett element men ändå göra det tillgängligt för skärmläsare?

question mark

Vad gör klassen focus:ring-2 när den används på ett input-fält?

Select the correct answer

question mark

Vilken klass används för att dölja ett element men ändå göra det tillgängligt för skärmläsare?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 5

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 3.57

bookStrukturering och Formgivning av Formulär

Svep för att visa menyn

I det här kapitlet kommer vi att utforska hur man kan styla olika formelement med Tailwind CSS, inklusive inmatningsfält, textområden, radioknappar och strömbrytare.

Inmatningsfält

Inmatningsfält är avgörande för användardata. Tailwind tillhandahåller verktygsklasser för att effektivt styla inmatningsfält.

index.html

index.html

copy

Textområden

Textområden används för flerradig textinmatning. De kan stylas på liknande sätt som inmatningsfält.

index.html

index.html

copy

Radioknappar

Radioknappar tillåter användare att välja ett alternativ från en uppsättning.

index.html

index.html

copy

form-radio tillämpar standard Tailwind CSS-stil för radioknappar.

Växlar

Växlar (toggles) används för att representera binära val. Även om Tailwind CSS inte har någon standardverktygsklass för växlar, kan du kombinera verktygsklasser för att skapa en.

index.html

index.html

copy
  • sr-only: Döljer kryssrutan men gör den tillgänglig för skärmläsare;
  • transition: Möjliggör mjuk övergång för switch-pricken;
  • Anpassad CSS används för att hantera markerat läge.

Obs

Mer information om formulär i Tailwind CSS finns här.

1. Vad gör klassen focus:ring-2 när den används på ett input-fält?

2. Vilken klass används för att dölja ett element men ändå göra det tillgängligt för skärmläsare?

question mark

Vad gör klassen focus:ring-2 när den används på ett input-fält?

Select the correct answer

question mark

Vilken klass används för att dölja ett element men ändå göra det tillgängligt för skärmläsare?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 5
some-alt