Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Lomakkeiden Rakenne ja Tyylittely | Peruskomponenttien Rakentaminen
Tailwind CSS Verkkokehitykseen

bookLomakkeiden Rakenne ja Tyylittely

Tässä luvussa tarkastellaan, kuinka erilaisia lomake-elementtejä, kuten syötekenttiä, tekstialueita, valintanappeja ja kytkimiä, muotoillaan Tailwind CSS:n avulla.

Syötekentät

Syötekentät ovat olennaisia käyttäjän tietojen syöttämisessä. Tailwind tarjoaa hyötyluokkia syötekenttien tehokkaaseen muotoiluun.

index.html

index.html

copy

Tekstialueet

Tekstialueita käytetään moniriviseen tekstinsyöttöön. Ne voidaan muotoilla samalla tavalla kuin syötekentät.

index.html

index.html

copy

Valintanapit

Valintanappien avulla käyttäjä voi valita yhden vaihtoehdon joukosta.

index.html

index.html

copy

form-radio käyttää Tailwind CSS:n oletustyylejä valintanapeille.

Kytkimet

Kytkimiä (toggle) käytetään binääristen valintojen esittämiseen. Vaikka Tailwind CSS:ssä ei ole oletusarvoista apuluokkaa kytkimille, voit yhdistellä apuluokkia sellaisen luomiseksi.

index.html

index.html

copy
  • sr-only: Piilottaa valintaruudun, mutta säilyttää sen saavutettavana ruudunlukijoille;
  • transition: Mahdollistaa sulavan siirtymän kytkimen pisteelle;
  • Mukautettua CSS:ää käytetään valitun tilan hallintaan.

Huomio

Lisätietoja lomakkeista Tailwind CSS:ssä löytyy täältä.

1. Mitä luokka focus:ring-2 tekee, kun se lisätään syötekenttään?

2. Mitä luokkaa käytetään piilottamaan elementti, mutta säilyttämään se ruudunlukijoille saavutettavana?

question mark

Mitä luokka focus:ring-2 tekee, kun se lisätään syötekenttään?

Select the correct answer

question mark

Mitä luokkaa käytetään piilottamaan elementti, mutta säilyttämään se ruudunlukijoille saavutettavana?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 5

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

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

bookLomakkeiden Rakenne ja Tyylittely

Pyyhkäise näyttääksesi valikon

Tässä luvussa tarkastellaan, kuinka erilaisia lomake-elementtejä, kuten syötekenttiä, tekstialueita, valintanappeja ja kytkimiä, muotoillaan Tailwind CSS:n avulla.

Syötekentät

Syötekentät ovat olennaisia käyttäjän tietojen syöttämisessä. Tailwind tarjoaa hyötyluokkia syötekenttien tehokkaaseen muotoiluun.

index.html

index.html

copy

Tekstialueet

Tekstialueita käytetään moniriviseen tekstinsyöttöön. Ne voidaan muotoilla samalla tavalla kuin syötekentät.

index.html

index.html

copy

Valintanapit

Valintanappien avulla käyttäjä voi valita yhden vaihtoehdon joukosta.

index.html

index.html

copy

form-radio käyttää Tailwind CSS:n oletustyylejä valintanapeille.

Kytkimet

Kytkimiä (toggle) käytetään binääristen valintojen esittämiseen. Vaikka Tailwind CSS:ssä ei ole oletusarvoista apuluokkaa kytkimille, voit yhdistellä apuluokkia sellaisen luomiseksi.

index.html

index.html

copy
  • sr-only: Piilottaa valintaruudun, mutta säilyttää sen saavutettavana ruudunlukijoille;
  • transition: Mahdollistaa sulavan siirtymän kytkimen pisteelle;
  • Mukautettua CSS:ää käytetään valitun tilan hallintaan.

Huomio

Lisätietoja lomakkeista Tailwind CSS:ssä löytyy täältä.

1. Mitä luokka focus:ring-2 tekee, kun se lisätään syötekenttään?

2. Mitä luokkaa käytetään piilottamaan elementti, mutta säilyttämään se ruudunlukijoille saavutettavana?

question mark

Mitä luokka focus:ring-2 tekee, kun se lisätään syötekenttään?

Select the correct answer

question mark

Mitä luokkaa käytetään piilottamaan elementti, mutta säilyttämään se ruudunlukijoille saavutettavana?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 5
some-alt