Como Criar Caixas de Texto em HTML5: O Guia Definitivo da Tag <input>
Chegou a hora de colocar a mão na massa! Deixe seu site interativo aprendendo a criar campos de texto limpos, modernos e acessíveis usando o HTML5.
Agora que já explicamos na aula passada o que são formulários em HTML e a importância absurda que eles têm para a interatividade da internet, vamos sair da teoria e começar a programar.
Vamos iniciar com o "feijão com arroz" da web: a caixa de texto simples. É exatamente aquela caixinha marota que você usa todo dia para digitar seu nome num cadastro, pesquisar algo no Google ou inserir seu e-mail para fazer login. Apertem os cintos, porque vamos aprender o jeito certo, atualizado para o mercado de trabalho.
A Tag <input> e a Caixa de Texto (Text Input Box)
Para criar uma caixa de texto no HTML, utilizamos a tag de autofechamento <input> combinada com o atributo type="text". É essencial adicionar os atributos name (para envio ao servidor) e id (para acessibilidade via CSS e rótulos).
A tag <input> (que traduzida literalmente significa "entrada") é o canivete suíço do programador Front-End. Ela pode assumir várias formas, e para dizermos ao navegador que queremos uma área livre para digitação, usamos o atributo type="text".
Assim, a sintaxe básica para criarmos um formulário do tipo Caixa de Texto fica assim:
<!-- Exemplo de uma caixa de texto simples -->
<input type="text" name="nome_usuario" id="nome_usuario">Reparou que a tag <input> não tem fechamento (como </input>)? Ela é o que chamamos de tag vazia ou self-closing tag. Toda a mágica dela acontece apenas através dos atributos insercode nela.
O Fim da Era das Tabelas: O Jeito Moderno de Alinhar Formulários
Vamos propor um exercício: Criar dois campos, "Nome" e "Sobrenome", como se fossem um formulário real.
Como fazíamos antigamente (Não faça mais isso!):
Lá nos primórdios da internet, a gente apelava para a tag <table> para alinhar o texto com a caixinha. O código virava uma sopa de <tr> e <td> enorme, nada amigável para celulares.
A Solução Moderna (Semântica e Responsiva):
Hoje em dia, a regra é clara: tabelas só servem para dados (como planilhas). Para formulários, nós agrupamos cada rótulo e seu input dentro de uma <div> e aplicamos uma pitada de CSS. Além disso, usamos a tag <label> para ligar o texto à caixa de texto. Veja o poder do HTML5 em ação:
<form action="#" method="POST">
<!-- Grupo Nome -->
<div style="margin-bottom: 15px;">
<label for="campo_nome" style="display: block; font-weight: bold;">Nome:</label>
<input type="text" name="nome" id="campo_nome" style="padding: 8px; width: 100%; max-width: 300px;">
</div>
<!-- Grupo Sobrenome -->
<div style="margin-bottom: 15px;">
<label for="campo_sob" style="display: block; font-weight: bold;">Sobrenome:</label>
<input type="text" name="sobrenome" id="campo_sob" style="padding: 8px; width: 100%; max-width: 300px;">
</div>
</form>Simulação do Código Acima:
Reparou no for="campo_nome" dentro do label? Ele faz par com o id="campo_nome" do input. Quando você faz isso, se o usuário clicar na palavra "Nome", o cursor já pisca direto dentro da caixinha! Teste no exemplo acima. Quem acessa pelo celular agradece!
Domine o Front-End Sem Sofrimento! 🚀
Cansado de depender de tutoriais desatualizados e vídeos que dão sono? Estude no seu ritmo, de forma sequencial, sem depender de internet e sem ver um único anúncio.
"Estava travado tentando entender a estrutura moderna do HTML5 e CSS Grid, mas a didática dessa apostila salvou meus projetos no trabalho. Recomendo de olhos fechados!"
— Carlos M., Desenvolvedor Front-End.
O Atributo maxlength: Impondo Limites no Formulário
No exemplo antigo, mencionei o atributo size. Hoje, ele está praticamente aposentado. Para definir a largura da caixa na tela, nós usamos CSS (como no exemplo acima, onde usei width: 100%).
Porém, se você deixar a caixa livre, o usuário pode escrever um romance ali dentro. Para limitar a quantidade de caracteres permitida, entra em cena o poderoso maxlength.
Imagine que você está pedindo a idade do usuário. Qual o sentido de ele digitar 4 números ali? Nenhum (a não ser que tenhamos elfos acessando o site). Vamos limitar para no máximo 3 caracteres!
<label for="idade_user">Idade:</label>
<input type="text" id="idade_user" name="idade" maxlength="3">O maxlength é maravilhoso para evitar erros de digitação (UX). Mas lembre-se: qualquer usuário com conhecimento básico pode usar a ferramenta "Inspecionar Elemento" do Chrome e remover essa trava. Portanto, sua linguagem de servidor (como PHP ou Node) sempre precisará validar esse tamanho de novo no Back-End.
Exercício Prático: Formatando o CEP
Faça um site que exiba duas caixas de texto para o leitor inserir o número do CEP. Lembrando que o CEP brasileiro tem 8 dígitos (5 antes do hífen, 3 depois).
<form>
<label for="cep_p1">Digite seu CEP:</label>
<!-- Primeiros 5 digitos -->
<input type="text" id="cep_p1" name="cep_parte1" maxlength="5" style="width: 60px; text-align: center;">
<span style="font-weight: bold; margin: 0 5px;">-</span>
<!-- Últimos 3 digitos -->
<input type="text" id="cep_p2" name="cep_parte2" maxlength="3" aria-label="Fim do CEP" style="width: 40px; text-align: center;">
</form>Tente digitar mais que 5 números na primeira caixa. O navegador te bloqueia na hora! O atributo aria-label ali serve para os leitores de tela de pessoas com deficiência visual saberem do que se trata aquela segunda caixa sem rótulo.
Como dar dicas no Input: Adeus value, Olá placeholder!
No início da internet, se o programador quisesse colocar uma dica pré-escrita na caixa ("Digite seu nome aqui"), ele usava o atributo value.
O problema do value é que ele é um valor real. Se você deixasse lá um value="aaaa" pedindo o ano de nascimento, o usuário era obrigado a clicar na caixa, apagar o "aaaa" manualmente, e só depois escrever o próprio ano. Chato, né?
Para resolver isso, o HTML5 introduziu o atributo definitivo para dicas visuais: o glorioso placeholder (texto de espaço reservado). Ele insere um "texto fantasma" cinza na caixa, que some magicamente assim que o usuário digita a primeira letra.
<label for="ano_nasc">Ano de Nascimento:</label>
<!-- Jeito Moderno com Placeholder -->
<input type="text" id="ano_nasc" name="ano" maxlength="4" placeholder="Ex: 1995">Simples, lindo e direto ao ponto! Estudar formulários modernos é fascinante porque o ganho na experiência do usuário final (o tal do UX - User Experience) é imediato.
Para se aprofundar na documentação oficial dos inputs, você pode consultar as fontes abertas como o MDN Web Docs (Mozilla).
O que estudar a seguir?
Seu conhecimento não pode parar por aqui. Nos próximos tutoriais, nós vamos evoluir a complexidade dos formulários abordando:
- Como esconder caracteres usando
<input type="password">para criar sistemas de login. - Como criar botões de Enviar e Limpar dados com o
type="submit"etype="reset". - A diferença crucial entre usar requisições GET e POST no atributo action do seu formulário.
Perguntas Frequentes (FAQ) sobre o <input type="text">
1. Qual a diferença entre os atributos 'name' e 'id' na caixa de texto?
Resumindo a treta de forma simples: o atributo id conversa com o Front-End (o navegador do usuário). Ele serve para você mudar a cor da caixa com CSS ou ligá-la ao rótulo. Já o name conversa com o Back-End (o servidor, banco de dados). Ele cria a variável que carrega o texto digitado pelo usuário quando ele clica no botão "Enviar".
2. Posso usar <input type="text"> para criar campos de Senha?
Definitivamente não! O type="text" expõe os caracteres digitados em tela cheia, deixando a senha visível para qualquer pessoa perto do usuário. A tag correta para criar campos sigilosos e seguros é o <input type="password">, que automaticamente transforma as letras em "bolinhas" ou asteriscos na renderização do DOM.
3. Como faço para a caixa já carregar com o cursor piscando para o usuário começar a digitar logo?
Essa é uma excelente técnica de usabilidade! Para focar automaticamente no campo assim que a página terminar de carregar (igual à caixa de pesquisa na tela inicial do Google), basta adicionar o atributo booleano nela: autofocus. A sintaxe ficaria: <input type="text" name="busca" autofocus>.
