Todos

Mini Projetos

Resolução do Mini Projeto

Formulário de OTP com React

Login

Introdução e Setup

  • Introdução
  • Requisitos do Projeto
  • Instalando Vite , React e Tailwind
  • Construindo o HTML
  • Estilizando a Página
  • Extraindo o Formulário para um componente à parte
  • Lógica do Formulário

  • maxLength e required nos inputs
  • Salvando os dados do input no estado
  • Validação: dígitos numéricos
  • Foco no primeiro dígito ao carregar a página
  • Mudar o foco para o próximo input após digitar
  • Mudar o foco quando apagar um input
  • Colando um código no input
  • Navegando nos inputs com as setas do teclado
  • Propriedades inputMode e autoComplete
  • Finalização
  • Introdução e Setup

  • Introdução
  • Requisitos do Projeto
  • Instalando Vite , React e Tailwind
  • Construindo o HTML
  • Estilizando a Página
  • Extraindo o Formulário para um componente à parte
  • Lógica do Formulário

  • maxLength e required nos inputs
  • Salvando os dados do input no estado
  • Validação: dígitos numéricos
  • Foco no primeiro dígito ao carregar a página
  • Mudar o foco para o próximo input após digitar
  • Mudar o foco quando apagar um input
  • Colando um código no input
  • Navegando nos inputs com as setas do teclado
  • Propriedades inputMode e autoComplete
  • Finalização
  • maxLength e required nos inputs

    No vídeo, realizamos ajustes em nosso formulário OTP criado com React. Definimos um maxLength de 1 para apenas um dígito por input e incorporamos a propriedade required para forçar o preenchimento dos campos antes de submeter o formulário.

    Comentários

    (0)