O elemento HTML <input> e o componente principal para captura de dados fornecidos pelo usuario em formularios web.
Tipos de Entrada
Tipos Textuais e Semânticos
| Tipo | Descrição |
|---|---|
text |
Texto simples em linha unica |
password |
Texto mascarado para senhas |
email |
Endereco de email com validacao automatica |
url |
Entrada de URL absoluta |
tel |
Numero de telefone (aciona teclado numerico em celulares) |
search |
Campo de busca com botao de limpeza rapida |
Tipos Numéricos e Quantitativos
| Tipo | Descrição |
|---|---|
number |
Campo numerico com controle de passos (min, max, step) |
range |
Controle deslizante para valor aproximado |
Tipos de Data e Hora
| Tipo | Descrição |
|---|---|
date |
Seletor de data de calendario (ano, mes, dia) |
time |
Seletor de hora (horas, minutos) |
datetime-local |
Data e hora locais sem fuso horario |
month |
Seletor de ano e mes |
week |
Seletor de ano e semana ISO |
Seleção e Ações
| Tipo | Descrição |
|---|---|
checkbox |
Caixa de selecao booleana ou multipla |
radio |
Opcao mutuamente exclusiva em um grupo |
color |
Paleta de selecao de cor |
file |
Envio de anexos e arquivos (accept, multiple) |
hidden |
Valor oculto enviado junto com o formulario |
submit |
Botao de envio do formulario |
reset |
Restaura os valores iniciais do formulario |
button |
Botao generico clicavel |
Principais Atributos de Validação
| Atributo | Comportamento |
|---|---|
required |
Impede o envio se o campo estiver vazio |
pattern="[A-Za-z0-9]+" |
Expressao regular que o valor precisa atender |
min="1" max="100" |
Limites minimos e maximos para numeros ou datas |
step="0.5" |
Intervalo de incremento valido |
minlength="5" maxlength="20" |
Quantidade minima e maxima de caracteres |
placeholder="..." |
Texto provisorio explicativo |
readonly |
Impede a edicao mas envia o valor |
disabled |
Desativa o campo e nao envia seu valor |
autofocus |
Foca o campo automaticamente ao carregar |
Exemplo Completo de Formulário
<form action="/api/submit" method="POST">
<label for="user-email">Endereço de email:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Senha (mínimo de 8 caracteres):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Idade:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Concordo com os termos e condições
</label>
<input type="submit" value="Cadastrar" />
</form>