Carregando...

Tipos de input em HTML

Os elementos de formulário mapearam as tags dentro de form. Tipos de input focam numa tag: input. type escolhe a face do controlo. Esta lição é um catálogo de type. Ajudas como required vêm a seguir.

Porque os tipos importam

type=text serve quase para tudo, mas o telemóvel mostra teclado errado, palavras-passe ficam visíveis e datas viram texto livre. Ajustar type aos dados melhora escrita, verificações e forma dos valores.

Resposta direta

1) Ponha type no input — text, email, password, number, checkbox, radio, date, file, hidden, submit. 2) Associe cada visível a label. 3) Rádios de uma resposta partilham name; checkbox é independente. 4) Prefira button type=submit. 5) type só escolhe a face — action/method e atributos posteriores são outras camadas.

📊 Starter input types

type Use Beginner tip
text General single-line text Default when nothing fitter exists
email Email addresses Mobile email keyboard + light format check
password Masked secrets Never store the real password in page source
number Numeric values Good for ages/qty — still validate on the server
checkbox Independent on/off Many can be checked at once
radio One choice in a named group Same name = one group
date Calendar date Browser UI varies; value is YYYY-MM-DD style
file Upload a file Needs multipart form encoding for real uploads
hidden Value not shown Still submitted with name/value

Registo: campos tipados

Pequeno formulário de adesão: email, palavra-passe, idade number e data de início.

Signup with typed inputs

html 
<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

<label for="pw">Password</label>
<input id="pw" name="pw" type="password">

<label for="age">Age</label>
<input id="age" name="age" type="number">

<label for="start">Start date</label>
<input id="start" name="start" type="date">

<button type="submit">Join</button>
</form>

Ler o demo de registo

  • email → UI de correio
  • password mascara caracteres
  • number entrada numérica
  • date controlo de data
  • label com for/id; name como chave
  • action/method inalterados

Inquérito: checkbox, radio e file

Interruptores e envios usam o mesmo input com type diferente. Rádios partilham name=plan. checkbox sozinho. file abre um seletor.

Survey checkbox radio file

html 
<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>

<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>

<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">

<button type="submit">Send</button>
</form>

Ler o demo de inquérito

  • checkbox de newsletter independente
  • mesmo name → uma escolha rádio
  • label torna o texto clicável
  • file + multipart para envios
  • fieldset enquadra Plan — foco em type
  • próxima lição: atributos como required

Escolher o type certo

  • texto curto: text
  • email/palavra-passe: email/password
  • quantidade ou idade: number
  • opção exclusiva: radio com mesmo name
  • interruptor independente: checkbox
  • dia de calendário: date
  • anexo: file
  • oculto: hidden
  • multilinha continua textarea

Prática — mudar tipos

  1. Copie o registo; email→text
  2. password brevemente como text
  3. segundo number para quantidade
  4. rádios com names diferentes, depois corrija
  5. Newsletter + Pro; anote names esperados
  6. file sem multipart — consciência
  7. Frase: type escolhe a face do input

Erros fáceis

  • text para palavras-passe
  • rádios com names diferentes
  • sem label
  • esperar envio file sem encoding
  • achar que type substitui action/name
  • input para texto longo em vez de textarea
  • confundir com a lição de atributos

Resumo

  • um input — muitas faces via type
  • combine type com os dados
  • rádios partilham name; checkbox sozinho
  • etiquete sempre o visível
  • elementos de formulário e atributos de input são camadas separadas
  • a seguir: atributos de input

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
5
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 51 de 68
Html Tutorial