Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Strukturering og Styling af Formularer | Opbygning af Grundlæggende Komponenter
Tailwind CSS til Webudvikling

bookStrukturering og Styling af Formularer

I dette kapitel vil vi undersøge, hvordan man kan style forskellige formelementer med Tailwind CSS, herunder inputfelter, tekstområder, radioknapper og kontakter.

Inputfelter

Inputfelter er essentielle for brugerindtastning af data. Tailwind tilbyder hjælpeklasser til effektiv styling af inputfelter.

index.html

index.html

copy

Tekstfelter

Tekstfelter bruges til indtastning af tekst over flere linjer. De kan styles på samme måde som inputfelter.

index.html

index.html

copy

Radioknapper

Radioknapper giver brugeren mulighed for at vælge én mulighed fra et sæt.

index.html

index.html

copy

form-radio anvender standard Tailwind CSS-styling til radioknapper.

Kontakter

Kontakter (toggles) bruges til at repræsentere binære valg. Selvom Tailwind CSS ikke har en standard hjælpeklasse til kontakter, kan du kombinere hjælpeklasser for at oprette en.

index.html

index.html

copy
  • sr-only: Skjuler afkrydsningsfeltet, men bevarer tilgængelighed for skærmlæsere;
  • transition: Aktiverer glidende overgang for switch-prikken;
  • Brugerdefineret CSS håndterer den markerede tilstand.

Bemærk

Yderligere information om formularer i Tailwind CSS findes her.

1. Hvad gør klassen focus:ring-2, når den anvendes på et input?

2. Hvilken klasse bruges til at skjule et element, men stadig gøre det tilgængeligt for skærmlæsere?

question mark

Hvad gør klassen focus:ring-2, når den anvendes på et input?

Select the correct answer

question mark

Hvilken klasse bruges til at skjule et element, men stadig gøre det tilgængeligt for skærmlæsere?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 5

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you show me examples of how to style each form element with Tailwind CSS?

What are some best practices for customizing form elements in Tailwind?

Can you explain how to create a custom switch using Tailwind utilities?

Awesome!

Completion rate improved to 3.57

bookStrukturering og Styling af Formularer

Stryg for at vise menuen

I dette kapitel vil vi undersøge, hvordan man kan style forskellige formelementer med Tailwind CSS, herunder inputfelter, tekstområder, radioknapper og kontakter.

Inputfelter

Inputfelter er essentielle for brugerindtastning af data. Tailwind tilbyder hjælpeklasser til effektiv styling af inputfelter.

index.html

index.html

copy

Tekstfelter

Tekstfelter bruges til indtastning af tekst over flere linjer. De kan styles på samme måde som inputfelter.

index.html

index.html

copy

Radioknapper

Radioknapper giver brugeren mulighed for at vælge én mulighed fra et sæt.

index.html

index.html

copy

form-radio anvender standard Tailwind CSS-styling til radioknapper.

Kontakter

Kontakter (toggles) bruges til at repræsentere binære valg. Selvom Tailwind CSS ikke har en standard hjælpeklasse til kontakter, kan du kombinere hjælpeklasser for at oprette en.

index.html

index.html

copy
  • sr-only: Skjuler afkrydsningsfeltet, men bevarer tilgængelighed for skærmlæsere;
  • transition: Aktiverer glidende overgang for switch-prikken;
  • Brugerdefineret CSS håndterer den markerede tilstand.

Bemærk

Yderligere information om formularer i Tailwind CSS findes her.

1. Hvad gør klassen focus:ring-2, når den anvendes på et input?

2. Hvilken klasse bruges til at skjule et element, men stadig gøre det tilgængeligt for skærmlæsere?

question mark

Hvad gør klassen focus:ring-2, når den anvendes på et input?

Select the correct answer

question mark

Hvilken klasse bruges til at skjule et element, men stadig gøre det tilgængeligt for skærmlæsere?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 5
some-alt