Passo 1 de 7
Identificar e-mails e endereços web
Escolha entre email e url pelo significado da informação solicitada, mesmo quando os campos parecem iguais.
Trilha de aprendizado · Nível 6 · Tutorial 4
Ao concluir, você poderá selecionar tipos de campo adequados para endereços de e-mail, URLs, telefones, senhas, quantidades e datas, sem confundir números com identificadores.
Identificar e-mails e endereços web
Escolha entre email e url pelo significado da informação solicitada, mesmo quando os campos parecem iguais. 2 min
Usar tel para números de telefone
Escolha o tipo adequado para telefones e reconheça que ele não padroniza automaticamente a escrita do número. 2 min
Entender o que password realmente faz
Use campos de senha distinguindo a ocultação visual da proteção do valor digitado. 2 min
Separar quantidades de identificadores
Escolha number para quantidades, text para identificadores e tel para telefones, preservando zeros iniciais e outros caracteres importantes. 3 min
Distinguir a data exibida do valor enviado
Use type="date" para datas de calendário e diferencie a apresentação regional do valor padronizado no HTML e no envio. 3 min
Reconhecer variações da interface nativa
Compare controles em diferentes ambientes e reconheça mudanças de apresentação sem confundi-las com mudanças no tipo do campo. 2 min
Aplicar as escolhas em um formulário
Revise os tipos de sete campos e justifique as decisões sobre identificadores, quantidades, datas, senhas e interface. 3 min
Passo 1 de 7
Escolha entre email e url pelo significado da informação solicitada, mesmo quando os campos parecem iguais.
Escolha o atributo type pela natureza da informação solicitada:
type="email": endereço de e-mail, como ana@example.org.type="url": endereço de uma página ou site, como https://example.org/portfolio.Nos dois casos, o usuário digita um endereço, mas cada endereço tem uma finalidade diferente.
<label for="email">E-mail para contato</label>
<input type="email" id="email" name="email"
value="ana@example.org">
<label for="portfolio">Endereço do portfólio</label>
<input type="url" id="portfolio" name="portfolio"
value="https://example.org/portfolio">Dica
Esses campos podem aparecer como caixas de texto semelhantes. Isso não torna seus tipos equivalentes: escolha pelo que o campo pede, não pelo desenho do controle.
Um formulário solicita o endereço da página de contato de uma empresa, como https://example.org/contato. Qual escolha representa melhor essa informação?
Os campos “E-mail para retorno” e “Página pessoal” têm a mesma aparência. O segundo já usa type="url". Complete apenas o valor de type do primeiro:
<label for="retorno">E-mail para retorno</label>
<input type="____" id="retorno" name="retorno">
Passo 2 de 7
Escolha o tipo adequado para telefones e reconheça que ele não padroniza automaticamente a escrita do número.
Use type="tel" quando o campo solicitar um número de telefone. Isso vale para telefone fixo ou celular, no Brasil ou em outro país.
<label for="telefone">Telefone de contato</label>
<input type="tel" id="telefone" name="telefone">Um formulário pede o celular do cliente no Brasil e o telefone fixo de um hotel no exterior. Qual valor de type você usaria nos dois campos?
type="___"
Digite apenas o valor que completa a lacuna.
Telefones podem incluir código de país, código de área e diferentes combinações de espaços, parênteses e hífens. O tipo tel não escolhe um padrão único para essas informações.
Exemplo
Exemplos fictícios:
(11) 91234-5678+55 11 91234-5678+44 20 7946 0123Dica
Sozinho, type="tel" não insere parênteses ou hífens, não exige uma quantidade fixa de dígitos e não impõe um formato universal de telefone.
Em um campo com type="tel", sem regras adicionais, uma pessoa escreve (11) 91234-5678 e outra escreve +44 20 7946 0123. Qual afirmação está correta?
Passo 3 de 7
Use campos de senha distinguindo a ocultação visual da proteção do valor digitado.
Para solicitar uma senha, use type="password". Esse tipo oculta visualmente os caracteres, normalmente com pontos ou asteriscos.
Os símbolos mudam a apresentação, mas não substituem o valor digitado.
<label for="senha">Senha</label>
<input type="password" id="senha" name="senha">Você digita a senha fictícia Treino42 no campo do exemplo, e a tela mostra ••••••••.
Ao enviar o formulário, o valor associado a senha continua sendo Treino42, não os pontos.
type="password" não criptografa o valor nem protege seu transporte por si só. A proteção do transporte vem do HTTPS, não dos símbolos exibidos no campo.
Atenção
Esse tipo também não define como a senha será armazenada nem garante proteção no armazenamento. Ver pontos na tela não permite concluir que o sistema trata a senha com segurança.
Uma equipe troca type="text" por type="password" em um campo de senha. O que essa mudança oferece?
Passo 4 de 7
Escolha number para quantidades, text para identificadores e tel para telefones, preservando zeros iniciais e outros caracteres importantes.
Use type="number" quando o campo pedir uma quantidade, como uma contagem de unidades.
Quando os dígitos formam um identificador, como um CEP ou código de produto, use type="text" para manter sua representação textual.
Exemplo
“12 unidades” responde quantas?: é uma quantidade.
“Produto 0012” responde qual produto?: é um identificador. Os zeros fazem parte do código, não da contagem.
Um formulário solicita os dados abaixo. Qual campo deve usar type="number"?
No código 0042, os zeros iniciais fazem parte da identificação. No CEP 01310-100, há também um hífen na representação adotada. Esses caracteres não devem ser tratados como detalhes descartáveis de uma quantidade.
A quantidade usa number; o CEP e o código usam text.
<label for="quantidade">Quantidade de unidades</label>
<input type="number" id="quantidade" name="quantidade" value="3">
<label for="cep">CEP</label>
<input type="text" id="cep" name="cep" value="01310-100">
<label for="codigo">Código do produto</label>
<input type="text" id="codigo" name="codigo" value="0042">Um formulário pede:
4.0008, que deve manter os quatro caracteres.11987654321.Indique o type adequado para cada campo e explique por que o código 0008 não deve ser tratado como a quantidade 8.
Passo 5 de 7
Use type="date" para datas de calendário e diferencie a apresentação regional do valor padronizado no HTML e no envio.
Para pedir uma data de calendário, sem horário, use type="date". Neste trecho de um formulário, a data inicial da visita é 9 de abril de 2027.
<label for="data-visita">Data da visita</label>
<input type="date" id="data-visita" name="visita" value="2027-04-09">Dica
Em value, escreva a data no formato AAAA-MM-DD, com hífens. Mês e dia têm dois dígitos: abril é 04 e o dia 9 é 09.
Associe cada data ao valor que deve ser escrito em value em um campo type="date".
Toque em um item e depois no par correspondente.
A apresentação da data depende do navegador e da configuração regional. O dia pode aparecer antes ou depois do mês, mas o valor de uma data preenchida usa AAAA-MM-DD, tanto em value quanto no dado enviado.
Exemplo
Para 9 de abril de 2027, duas apresentações possíveis são:
09/04/2027.04/09/2027.No campo anterior, com name="visita", manter essa data até o envio resulta no par visita=2027-04-09 em ambos os casos. A ordem visual não altera a data selecionada.
O usuário seleciona 4 de setembro de 2027 em um campo com type="date" e name="visita". Na configuração brasileira, a tela mostra 04/09/2027. Ao enviar o formulário com essa data, qual par nome e valor é enviado?
Passo 6 de 7
Compare controles em diferentes ambientes e reconheça mudanças de apresentação sem confundi-las com mudanças no tipo do campo.
A interface nativa é o controle que o navegador oferece para o campo. Sua aparência e sua forma de interação dependem do navegador e do dispositivo. Até a disponibilidade de recursos, como um seletor de calendário, pode variar: type="date" não garante uma interface idêntica em todos os ambientes.
Nos dois exemplos, o campo usa type="date". Compare a disposição dos controles e o espaço ocupado pelo seletor.
Nas imagens, os dois campos usam type="date", mas os seletores têm disposições diferentes. Qual conclusão é adequada?
Com type="number", alguns ambientes exibem setas para aumentar ou diminuir o valor; outros não as mostram. O formato e a disponibilidade desses controles podem variar sem mudar o significado numérico do campo.
O mesmo type="number" com e sem setas visíveis.
Um campo de quantidade usa type="number", mas não mostra setas no celular. Só essa ausência já justifica trocar o tipo do campo.
Passo 7 de 7
Revise os tipos de sete campos e justifique as decisões sobre identificadores, quantidades, datas, senhas e interface.
Este rascunho usa text em todos os campos. Revise apenas os atributos type: alguns precisam mudar, outros não. Mantenha os rótulos e os demais atributos.
O código é apenas para leitura, com destino e dados fictícios. Não envie dados nem use uma senha real.
<form action="https://example.com/pratica" method="post">
<label for="email">E-mail</label>
<input type="text" id="email" name="email" value="ana@example.com">
<label for="site">Site pessoal</label>
<input type="text" id="site" name="site" value="https://example.com/ana">
<label for="telefone">Telefone</label>
<input type="text" id="telefone" name="telefone" value="11900000000">
<label for="senha">Senha de acesso</label>
<input type="text" id="senha" name="senha">
<label for="kits">Quantidade de kits</label>
<input type="text" id="kits" name="kits" value="3">
<label for="data_oficina">Data da oficina</label>
<input type="text" id="data_oficina" name="data_oficina" value="2026-09-18">
<label for="cep">CEP</label>
<input type="text" id="cep" name="cep" value="01310-100">
</form>Escolha como cada atributo type deve ficar na versão revisada.
Toque em um item e depois no par correspondente.
Com os tipos corrigidos, escreva uma nota curta que responda:
text no CEP 01310-100 e number na quantidade de kits?18/09/2026, qual é seu valor enviado?password substituem ou criptografam a senha?Escreva pelo menos 60 caracteres (0/60).
Resumo
Parabéns! Você concluiu: Escolher tipos de input conforme a informação
Você concluiu “Escolher tipos de input conforme a informação”. Ao revisar um campo, comece pela pergunta: o que este dado representa?
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
