Controles de formulário: tipos de input, select e textarea
Use campos de texto, e-mail, número, data, caixa de seleção, opção, intervalo, arquivo e cor, além de elementos select e textarea.
Controles de formulário: tipos de input, select e textarea é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O conjunto completo de tipos de campos de entrada
O HTML5 introduziu muitos tipos especializados de campos de entrada além do texto. Cada tipo informa ao navegador que tipo de dado deve ser esperado, permitindo validação nativa, teclados apropriados em dispositivos móveis e controles de interface nativos da plataforma.
Campos de texto, pesquisa e URL
type="text" é a alternativa para texto simples. type="search" sugere um teclado otimizado para pesquisa e geralmente exibe um botão para limpar. type="url" valida o formato de URL e exibe um teclado para URL em dispositivos móveis.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">E-mail e telefone
type="email" valida o formato de e-mail e exibe um teclado otimizado para e-mail, com uma tecla @. type="tel" exibe um teclado numérico de telefone (não valida o formato, pois os formatos de telefone variam conforme o país).
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Tipos numérico, de intervalo e de data
type="number" com min/max/step para dados numéricos. type="range" para controles deslizantes. type="date", type="time", type="datetime-local" para dados temporais com seletores nativos.
<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">Caixas de seleção e botões de opção
As caixas de seleção são alternadores independentes. Os botões de opção do mesmo grupo (com o mesmo name) permitem apenas uma seleção. Cada um precisa de um rótulo associado.
<fieldset>
<legend>Notification preferences</legend>
<label><input type="checkbox" name="email_notif" value="1"> Email</label>
<label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Cor, arquivo e oculto
type="color" exibe um seletor de cores nativo. type="file" abre uma caixa de diálogo de arquivos; use o atributo accept para restringir os tipos de arquivo. type="hidden" envia dados sem um controle de interface.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Menus suspensos de seleção
O elemento <select> cria um menu suspenso. Use multiple para permitir várias seleções (raramente proporciona uma boa experiência de uso). Agrupe as opções com <optgroup> em listas longas.
<select name="country">
<option value="">Select a country...</option>
<optgroup label="Europe">
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
</optgroup>
</select>Área de texto
<textarea> cria um campo de entrada de texto com várias linhas. Use rows e cols para definir o tamanho inicial ou use CSS para ter mais controle. A tag de fechamento é obrigatória, e qualquer conteúdo entre as tags será o valor padrão.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — opções de preenchimento automático
<datalist> fornece uma lista de sugestões para um campo de entrada sem restringir o texto livre. Associe o campo de entrada à lista de dados usando os atributos list e id.
<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
<option value="JavaScript">
<option value="TypeScript">
<option value="Python">
<option value="Rust">
</datalist>Os atributos de valor e nome
name é a chave enviada no envio do formulário. value define o valor inicial. Para caixas de seleção e botões de opção, value é o que será enviado quando o controle estiver marcado. Para campos de texto, value é o conteúdo preenchido previamente.
Dimensionamento dos campos de entrada e texto de preenchimento
placeholder exibe um texto de orientação quando o campo de entrada está vazio. Ele desaparece quando o campo recebe foco e não substitui um rótulo visível. size define a largura visível em caracteres; prefira CSS para dimensionar.
Verificação rápida
Qual tipo de campo de entrada exibe um teclado numérico em dispositivos móveis e valida se o valor inserido é um número válido?
Recapitulação: controles de formulário
Use tipos semânticos de campos de entrada: e-mail para endereços de e-mail, número para números e data para datas. Use menus de seleção para escolhas fixas, listas de dados para preenchimento automático sugestivo e áreas de texto para texto com várias linhas. Sempre inclua atributos name para envio e atributos value quando apropriado.
Perguntas Frequentes
A aula “Controles de formulário: tipos de input, select e textarea” é grátis?
Sim — o texto completo de “Controles de formulário: tipos de input, select e textarea” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Controles de formulário: tipos de input, select e textarea”?
Use campos de texto, e-mail, número, data, caixa de seleção, opção, intervalo, arquivo e cor, além de elementos select e textarea. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Controles de formulário: tipos de input, select e textarea”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Controles de formulário: tipos de input, select e textarea
- ARIA e acessibilidade: label, role e aria-*
- HTML5 semântico: semântica versus sopa de divs
- Atributos de validação de formulários