Criando um formulário de OTP com React

Workshop

16 vídeos • 01:04:26

Seção 01 | Introdução e Setup

  1. 1.

    Introdução

    01:14
  2. 2.

    Requisitos do Projeto

    03:20
  3. 3.

    Instalando Vite , React e Tailwind

    05:08
  4. 4.

    Construindo o HTML

    01:51
  5. 5.

    Estilizando a Página

    08:57
  6. 6.

    Extraindo o Formulário para um componente à parte

    01:04

Seção 02 | Lógica do Formulário

  1. 7.

    maxLength e required nos inputs

    01:10
  2. 8.

    Salvando os dados do input no estado

    11:54
  3. 9.

    Validação: dígitos numéricos

    01:17
  4. 10.

    Foco no primeiro dígito ao carregar a página

    02:01
  5. 11.

    Mudar o foco para o próximo input após digitar

    04:42
  6. 12.

    Mudar o foco quando apagar um input

    06:52
  7. 13.

    Colando um código no input

    07:38
  8. 14.

    Navegando nos inputs com as setas do teclado

    01:39
  9. 15.

    Propriedades inputMode e autoComplete

    04:44
  10. 16.

    Finalização

    00:55
Login
Workshops>Criando um formulário de OTP com React>maxLength e required nos inputs

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)