Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Strukturering og Styling av Skjemaer | Bygge Grunnleggende Komponenter
Tailwind CSS for Webbutvikling

bookStrukturering og Styling av Skjemaer

I dette kapittelet skal vi utforske hvordan ulike skjemafelt kan styles med Tailwind CSS, inkludert input-felt, tekstområder, radioknapper og brytere.

Input-felt

Input-felt er avgjørende for innsamling av brukerdata. Tailwind tilbyr hjelpeklasser for effektiv styling av input-felt.

index.html

index.html

copy

Tekstområder

Tekstområder brukes for flersidig tekstinnskriving. De kan styles på samme måte som inndatafelter.

index.html

index.html

copy

Radioknapper

Radioknapper lar brukere velge ett alternativ fra et sett.

index.html

index.html

copy

form-radio bruker standard Tailwind CSS-stil for radioknapper.

Brytere

Brytere (toggles) brukes for å representere binære valg. Selv om Tailwind CSS ikke har en standard verktøyklasse for brytere, kan du kombinere verktøyklasser for å lage en.

index.html

index.html

copy
  • sr-only: Skjuler avmerkingsboksen, men gjør den tilgjengelig for skjermlesere;
  • transition: Aktiverer jevn overgang for bryterdotten;
  • Egendefinert CSS brukes for å håndtere valgt tilstand.

Merk

Du finner mer informasjon om skjemaer i Tailwind CSS her.

1. Hva gjør klassen focus:ring-2 når den brukes på et input-felt?

2. Hvilken klasse brukes for å skjule et element, men fortsatt gjøre det tilgjengelig for skjermlesere?

question mark

Hva gjør klassen focus:ring-2 når den brukes på et input-felt?

Select the correct answer

question mark

Hvilken klasse brukes for å skjule et element, men fortsatt gjøre det tilgjengelig for skjermlesere?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 5

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

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 av Skjemaer

Sveip for å vise menyen

I dette kapittelet skal vi utforske hvordan ulike skjemafelt kan styles med Tailwind CSS, inkludert input-felt, tekstområder, radioknapper og brytere.

Input-felt

Input-felt er avgjørende for innsamling av brukerdata. Tailwind tilbyr hjelpeklasser for effektiv styling av input-felt.

index.html

index.html

copy

Tekstområder

Tekstområder brukes for flersidig tekstinnskriving. De kan styles på samme måte som inndatafelter.

index.html

index.html

copy

Radioknapper

Radioknapper lar brukere velge ett alternativ fra et sett.

index.html

index.html

copy

form-radio bruker standard Tailwind CSS-stil for radioknapper.

Brytere

Brytere (toggles) brukes for å representere binære valg. Selv om Tailwind CSS ikke har en standard verktøyklasse for brytere, kan du kombinere verktøyklasser for å lage en.

index.html

index.html

copy
  • sr-only: Skjuler avmerkingsboksen, men gjør den tilgjengelig for skjermlesere;
  • transition: Aktiverer jevn overgang for bryterdotten;
  • Egendefinert CSS brukes for å håndtere valgt tilstand.

Merk

Du finner mer informasjon om skjemaer i Tailwind CSS her.

1. Hva gjør klassen focus:ring-2 når den brukes på et input-felt?

2. Hvilken klasse brukes for å skjule et element, men fortsatt gjøre det tilgjengelig for skjermlesere?

question mark

Hva gjør klassen focus:ring-2 når den brukes på et input-felt?

Select the correct answer

question mark

Hvilken klasse brukes for å skjule et element, men fortsatt gjøre det tilgjengelig for skjermlesere?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 5
some-alt