Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Estruturação e Estilização de Formulários | Construindo Componentes Básicos
Tailwind CSS para Desenvolvimento Web

bookEstruturação e Estilização de Formulários

Neste capítulo, será abordado como estilizar diferentes elementos de formulário utilizando Tailwind CSS, incluindo inputs, áreas de texto, botões de opção e switches.

Inputs

Campos de entrada são fundamentais para o registro de dados do usuário. O Tailwind oferece classes utilitárias para estilizar inputs de forma eficiente.

index.html

index.html

copy

Áreas de texto

Áreas de texto são utilizadas para entrada de texto em várias linhas. Podem ser estilizadas de forma semelhante aos campos de entrada.

index.html

index.html

copy

Botões de opção

Botões de opção permitem que o usuário selecione uma única opção entre várias disponíveis.

index.html

index.html

copy

form-radio aplica a estilização padrão do Tailwind CSS para botões de opção.

Interruptores

Interruptores (toggles) são utilizados para representar escolhas binárias. Embora o Tailwind CSS não possua uma classe utilitária padrão para interruptores, é possível combinar utilitários para criar um.

index.html

index.html

copy
  • sr-only: Oculta a caixa de seleção, mas a mantém acessível para leitores de tela;
  • transition: Habilita transição suave para o ponto do switch;
  • CSS personalizado é utilizado para manipular o estado marcado.

Nota

Mais informações sobre formulários no Tailwind CSS podem ser encontradas aqui.

1. O que a classe focus:ring-2 faz quando aplicada a um campo de entrada?

2. Qual classe é usada para ocultar um elemento, mas mantê-lo acessível para leitores de tela?

question mark

O que a classe focus:ring-2 faz quando aplicada a um campo de entrada?

Select the correct answer

question mark

Qual classe é usada para ocultar um elemento, mas mantê-lo acessível para leitores de tela?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 5

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

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

bookEstruturação e Estilização de Formulários

Deslize para mostrar o menu

Neste capítulo, será abordado como estilizar diferentes elementos de formulário utilizando Tailwind CSS, incluindo inputs, áreas de texto, botões de opção e switches.

Inputs

Campos de entrada são fundamentais para o registro de dados do usuário. O Tailwind oferece classes utilitárias para estilizar inputs de forma eficiente.

index.html

index.html

copy

Áreas de texto

Áreas de texto são utilizadas para entrada de texto em várias linhas. Podem ser estilizadas de forma semelhante aos campos de entrada.

index.html

index.html

copy

Botões de opção

Botões de opção permitem que o usuário selecione uma única opção entre várias disponíveis.

index.html

index.html

copy

form-radio aplica a estilização padrão do Tailwind CSS para botões de opção.

Interruptores

Interruptores (toggles) são utilizados para representar escolhas binárias. Embora o Tailwind CSS não possua uma classe utilitária padrão para interruptores, é possível combinar utilitários para criar um.

index.html

index.html

copy
  • sr-only: Oculta a caixa de seleção, mas a mantém acessível para leitores de tela;
  • transition: Habilita transição suave para o ponto do switch;
  • CSS personalizado é utilizado para manipular o estado marcado.

Nota

Mais informações sobre formulários no Tailwind CSS podem ser encontradas aqui.

1. O que a classe focus:ring-2 faz quando aplicada a um campo de entrada?

2. Qual classe é usada para ocultar um elemento, mas mantê-lo acessível para leitores de tela?

question mark

O que a classe focus:ring-2 faz quando aplicada a um campo de entrada?

Select the correct answer

question mark

Qual classe é usada para ocultar um elemento, mas mantê-lo acessível para leitores de tela?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 5
some-alt