Formulários: coletando dados do usuário
Crie formulários simples com caixas de texto, botões e muito mais
Formulários: coletando dados do usuário é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 2 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 HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 4 aulas no total.
Formulários: coletando dados do usuário
Boas-vindas à próxima lição! Hoje, aprenderemos a criar formulários em HTML. Os formulários permitem que os usuários insiram dados, como nome ou endereço de e-mail, na sua página da Web.
O que são formulários?
Os formulários são usados para coletar informações dos usuários. Por exemplo, quando você cria uma conta, preenche um formulário com campos como nome e endereço de e-mail.
Os formulários em HTML são criados usando a tag <form>.
Criando um formulário básico
Um formulário é criado usando a tag <form>. Dentro dessa tag, você adiciona campos de entrada, botões e muito mais.
Exemplo:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<button type="submit">Submit</button>
</form>
Tipos de entrada de formulário
Os formulários HTML são compatíveis com diferentes tipos de campos de entrada. Veja alguns tipos comuns:
text: Para entradas de texto curtoemail: Para endereços de e-mailpassword: Para senhasnumber: Para números
Exemplo:
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
</form>
Adicionando botões de opção e caixas de seleção
Você pode usar botões de opção para escolhas únicas e caixas de seleção para escolhas múltiplas.
Exemplo:
<form>
<p>Favorite Color:</p>
<input type="radio" id="red" name="color" value="red" />
<label for="red">Red</label>
<br />
<input type="radio" id="blue" name="color" value="blue" />
<label for="blue">Blue</label>
<br />
<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading" />
<label for="reading">Reading</label>
<br />
<input type="checkbox" id="sports" name="hobby" value="sports" />
<label for="sports">Sports</label>
</form>
Adicionando menus suspensos
Você pode usar a tag <select> para criar menus suspensos nos quais os usuários escolhem uma opção de uma lista.
Exemplo:
<form>
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
</form>
Botões de formulário
Os botões permitem que os usuários enviem ou redefinam o formulário. A tag <button> é usada com frequência.
Exemplo:
<form>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
Estilizando seu formulário
Você pode estilizar seu formulário usando CSS para deixá-lo mais atraente. Por exemplo, pode ajustar o tamanho dos campos ou alterar suas cores.
Exemplo:
<style>
form {
width: 300px;
margin: 20px auto;
}
input, select, button {
width: 100%;
padding: 10px;
margin: 5px 0;
}
</style>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>
Muito bem!
Parabéns! Você aprendeu a criar formulários, usar diferentes tipos de entrada e estilizar formulários. Os formulários são essenciais para coletar dados dos usuários e tornar suas páginas da Web interativas. Na próxima lição, exploraremos como usar recursos multimídia, como vídeos e áudio, para tornar suas páginas mais dinâmicas. Prepare-se para usar ainda mais a criatividade!
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 16
- Aulas
- 35
Perguntas Frequentes
A aula “Formulários: coletando dados do usuário” é grátis?
Sim — o texto completo de “Formulários: coletando dados do usuário” é 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 HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 4 aulas no total.
O que vou aprender em “Formulários: coletando dados do usuário”?
Crie formulários simples com caixas de texto, botões e muito mais Você pratica HTML for Kids 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 HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids 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 2 de 4.
Quanto tempo leva a aula “Formulários: coletando dados do usuário”?
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 HTML for Kids?
Sim. Cada aula de HTML for Kids 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
- Tabelas: organizando dados
- Formulários: coletando dados do usuário
- Atributos do HTML
- Multimídia: adicionando vídeos e áudio