Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Strutturazione e Stile dei Moduli | Creazione di Componenti di Base
Tailwind CSS per lo Sviluppo Web

bookStrutturazione e Stile dei Moduli

In questo capitolo, esploreremo come stilizzare diversi elementi dei moduli utilizzando Tailwind CSS, inclusi input, textarea, pulsanti di opzione e switch.

Input

Gli input sono fondamentali per l'inserimento dei dati da parte dell'utente. Tailwind fornisce classi di utilità per stilizzare gli input in modo efficace.

index.html

index.html

copy

Aree di testo

Le aree di testo vengono utilizzate per l'inserimento di testo su più righe. Possono essere stilizzate in modo simile agli input.

index.html

index.html

copy

Pulsanti di opzione

I pulsanti di opzione consentono agli utenti di selezionare una sola opzione da un insieme.

index.html

index.html

copy

form-radio applica lo stile predefinito di Tailwind CSS ai pulsanti di opzione.

Switch

Gli switch (toggle) vengono utilizzati per rappresentare scelte binarie. Sebbene Tailwind CSS non disponga di una classe utility predefinita per gli switch, è possibile combinarne diverse per crearne uno.

index.html

index.html

copy
  • sr-only: Nasconde la casella di controllo ma la mantiene accessibile ai lettori di schermo;
  • transition: Abilita una transizione fluida per il punto di attivazione;
  • Viene utilizzato CSS personalizzato per gestire lo stato selezionato.

Nota

Ulteriori informazioni sui form in Tailwind CSS sono disponibili qui.

1. Cosa fa la classe focus:ring-2 quando applicata a un input?

2. Quale classe viene utilizzata per nascondere un elemento ma mantenerlo accessibile ai lettori di schermo?

question mark

Cosa fa la classe focus:ring-2 quando applicata a un input?

Select the correct answer

question mark

Quale classe viene utilizzata per nascondere un elemento ma mantenerlo accessibile ai lettori di schermo?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 5

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 3.57

bookStrutturazione e Stile dei Moduli

Scorri per mostrare il menu

In questo capitolo, esploreremo come stilizzare diversi elementi dei moduli utilizzando Tailwind CSS, inclusi input, textarea, pulsanti di opzione e switch.

Input

Gli input sono fondamentali per l'inserimento dei dati da parte dell'utente. Tailwind fornisce classi di utilità per stilizzare gli input in modo efficace.

index.html

index.html

copy

Aree di testo

Le aree di testo vengono utilizzate per l'inserimento di testo su più righe. Possono essere stilizzate in modo simile agli input.

index.html

index.html

copy

Pulsanti di opzione

I pulsanti di opzione consentono agli utenti di selezionare una sola opzione da un insieme.

index.html

index.html

copy

form-radio applica lo stile predefinito di Tailwind CSS ai pulsanti di opzione.

Switch

Gli switch (toggle) vengono utilizzati per rappresentare scelte binarie. Sebbene Tailwind CSS non disponga di una classe utility predefinita per gli switch, è possibile combinarne diverse per crearne uno.

index.html

index.html

copy
  • sr-only: Nasconde la casella di controllo ma la mantiene accessibile ai lettori di schermo;
  • transition: Abilita una transizione fluida per il punto di attivazione;
  • Viene utilizzato CSS personalizzato per gestire lo stato selezionato.

Nota

Ulteriori informazioni sui form in Tailwind CSS sono disponibili qui.

1. Cosa fa la classe focus:ring-2 quando applicata a un input?

2. Quale classe viene utilizzata per nascondere un elemento ma mantenerlo accessibile ai lettori di schermo?

question mark

Cosa fa la classe focus:ring-2 quando applicata a un input?

Select the correct answer

question mark

Quale classe viene utilizzata per nascondere un elemento ma mantenerlo accessibile ai lettori di schermo?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 5
some-alt