Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Criar Formulário com Campos e Rótulos | Formulários HTML e Entrada do Usuário
HTML Definitivo
course content

Conteúdo do Curso

HTML Definitivo

HTML Definitivo

1. Compreendendo o Desenvolvimento Web
2. Tags e Atributos HTML
3. Estrutura do Documento HTML
4. Trabalhando com Mídia e Tabelas

book
Desafio: Criar Formulário com Campos e Rótulos

Objetivo

Aprimorar a experiência do usuário no site criando um formulário interativo que exija entradas para nome, e-mail e senha, cada um com seus respectivos rótulos.

Tarefa

Incorporar um formulário intuitivo ao seu site, promovendo maior engajamento e interação do usuário. Sua tarefa é:

  • Para o campo de nome: criar um campo de texto para coletar os nomes dos usuários. Utilize os atributos corretos para garantir uma experiência fluida.

    1. Definir o type apropriado para o campo de texto;

    2. Definir o placeholder como John;

    3. Garantir que o campo esteja em foco por padrão.

  • Para o campo de e-mail: criar um campo de e-mail para coletar os endereços de e-mail dos usuários. Assegure a precisão dos dados utilizando os atributos adequados.

    1. Definir o type correto para o campo de e-mail;

    2. Definir o placeholder como example@gmail.com;

    3. Marcar o campo como obrigatório.

  • Para o campo de senha: criar um campo de senha seguro para proteger os dados do usuário. Utilize os atributos apropriados para reforçar a segurança dos dados.

    1. Definir o type correto para o campo de senha;

    2. Tornar o campo obrigatório.

html

index.html

css

index.css

copy
  1. autofocus: foca automaticamente no campo de entrada ao carregar a página.

  2. required: torna o campo de entrada obrigatório, impedindo o envio do formulário se estiver vazio.

  3. placeholder: fornece uma dica ou texto de exemplo para o campo de entrada.

  4. for e id: associa um rótulo a um campo de entrada para melhorar a acessibilidade.

  5. type: especifica o tipo de dado esperado no campo de entrada (por exemplo, texto, email, senha).

html

index.html

css

index.css

copy
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 6

Pergunte à IA

expand
ChatGPT

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

course content

Conteúdo do Curso

HTML Definitivo

HTML Definitivo

1. Compreendendo o Desenvolvimento Web
2. Tags e Atributos HTML
3. Estrutura do Documento HTML
4. Trabalhando com Mídia e Tabelas

book
Desafio: Criar Formulário com Campos e Rótulos

Objetivo

Aprimorar a experiência do usuário no site criando um formulário interativo que exija entradas para nome, e-mail e senha, cada um com seus respectivos rótulos.

Tarefa

Incorporar um formulário intuitivo ao seu site, promovendo maior engajamento e interação do usuário. Sua tarefa é:

  • Para o campo de nome: criar um campo de texto para coletar os nomes dos usuários. Utilize os atributos corretos para garantir uma experiência fluida.

    1. Definir o type apropriado para o campo de texto;

    2. Definir o placeholder como John;

    3. Garantir que o campo esteja em foco por padrão.

  • Para o campo de e-mail: criar um campo de e-mail para coletar os endereços de e-mail dos usuários. Assegure a precisão dos dados utilizando os atributos adequados.

    1. Definir o type correto para o campo de e-mail;

    2. Definir o placeholder como example@gmail.com;

    3. Marcar o campo como obrigatório.

  • Para o campo de senha: criar um campo de senha seguro para proteger os dados do usuário. Utilize os atributos apropriados para reforçar a segurança dos dados.

    1. Definir o type correto para o campo de senha;

    2. Tornar o campo obrigatório.

html

index.html

css

index.css

copy
  1. autofocus: foca automaticamente no campo de entrada ao carregar a página.

  2. required: torna o campo de entrada obrigatório, impedindo o envio do formulário se estiver vazio.

  3. placeholder: fornece uma dica ou texto de exemplo para o campo de entrada.

  4. for e id: associa um rótulo a um campo de entrada para melhorar a acessibilidade.

  5. type: especifica o tipo de dado esperado no campo de entrada (por exemplo, texto, email, senha).

html

index.html

css

index.css

copy
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 6
Sentimos muito que algo saiu errado. O que aconteceu?
some-alt