Embedded Files
📝 Introdução – Aula: Formulários HTML e CSS
Nessa aula, vamos aprofundar nossos conhecimentos sobre formulários HTML, uma das ferramentas mais importantes para interação do usuário com páginas web. Aprenderemos a criar formulários bonitos, intuitivos e organizados, combinando marcação HTML e estilização com CSS, com o nível de dificuldade aumentando gradativamente.
🎯 Objetivos da aula:
Entender como estruturar formulários corretamente utilizando <div>.
Conhecer diferentes tipos de campos para coletar informações do usuário.
Aplicar estilizações variadas com CSS, explorando cores, fontes, imagens e layouts.
Trabalhar com diferentes temas para estimular a criatividade.
Produzir formulários progressivamente mais complexos até o desenvolvimento de um desafio final.
📝 Exercício 1 – Formulário Simples
Crie um formulário bem básico com apenas dois campos simples e um botão. O formulário deverá conter:
Campo para "Nome"
Campo para "E-mail"
Botão "Enviar"
O formulário deverá ser organizado com uma <div> e possuir estilização simples com CSS, alterando apenas a cor de fundo e centralizando o conteúdo.
🖥️ Código Resolvido (HTML + CSS):
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Formulário Simples</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9fafc;
display: flex;
justify-content: center;
padding: 40px;
}
.form-simples {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
width: 300px;
text-align: center;
}
input[type="text"],
input[type="email"] {
width: 90%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="form-simples">
<h3>Cadastre-se</h3>
<form>
<input type="text" placeholder="Nome">
<input type="email" placeholder="E-mail">
<button type="submit">Enviar</button>
</form>
</div>
</body>
</html>
📝 Exercício 2 – Formulário "Pet Amigo" 🐾
Crie um formulário simples para uma clínica veterinária que deseja cadastrar novos pets. O formulário deve conter os seguintes campos:
Nome do Pet
Espécie (cão ou gato - radio buttons)
Nome do Dono
Telefone do Dono
Botão "Cadastrar"
📌 Instruções adicionais:
Inclua uma imagem temática no topo da página, uma estilização diferenciada para o título do formulário, e melhore visualmente o formulário com CSS, como cores suaves que remetam à temática pet.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Cadastro Pet Amigo</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #fffbf2;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
}
.form-pet {
background-color: #ffffff;
padding: 25px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
width: 350px;
text-align: center;
}
.form-pet img {
width: 100%;
border-radius: 10px;
margin-bottom: 15px;
}
h2 {
color: #ff7043;
font-family: 'Comic Sans MS', cursive;
text-shadow: 1px 1px #ffe0b2;
margin-bottom: 20px;
}
input[type="text"],
input[type="tel"] {
width: 90%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ffccbc;
border-radius: 5px;
background-color: #fff3e0;
}
.radio-group {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}
button {
padding: 10px;
background-color: #ff7043;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #f4511e;
}
</style>
</head>
<body>
<div class="form-pet">
<img src="https://www.petz.com.br/blog/wp-content/uploads/2019/10/caes-gatos-3.jpg" alt="Pet feliz" width="200">
<h2>🐾 Cadastro Pet Amigo 🐾</h2>
<form>
<input type="text" placeholder="Nome do Pet" required>
<div class="radio-group">
<label><input type="radio" name="especie">🐶 Cão</label>
<label><input type="radio" name="especie">🐱 Gato</label>
</div>
<input type="text" placeholder="Nome do Dono" required>
<input type="tel" placeholder="Telefone do Dono" required>
<button type="submit">Cadastrar</button>
</form>
</div>
</body>
</html>
📝 Exercício 3 – Formulário "Cinema em Casa" 🎬
Crie um formulário simples para sugerir filmes para uma sessão de cinema caseira. Campos necessários:
Nome do filme
Gênero (select)
Já assistiu? (checkbox)
Botão "Enviar sugestão"
Adicione uma imagem temática no topo, estilize o título e organize com CSS agradável.
📝 Exercício 4 – Formulário "Receita da Vovó" 🍰
Crie um formulário para enviar receitas caseiras:
Nome da receita
Categoria (doce ou salgada - radio buttons)
Ingredientes (textarea)
Foto da receita (campo file)
Botão "Enviar receita"
Utilize imagem e cores temáticas relacionadas à culinária.
📝 Exercício 5 – Formulário "Biblioteca Mágica" 📚✨
Cadastre livros favoritos em uma biblioteca fictícia:
Título do livro
Autor
Ano de publicação (number)
Tipo de livro (físico ou digital - radio)
Cor favorita da capa (campo color)
Botão "Cadastrar"
Inclua uma imagem de biblioteca mágica e estilo literário.
📝 Exercício 6 – Formulário "Aventura Espacial" 🚀
Cadastro para uma viagem fictícia ao espaço:
Nome completo
Idade (number)
Planeta favorito (select)
Deseja viajar em grupo? (radio: sim/não)
Foto do passageiro (campo file)
Botão "Inscrever-se"
Use imagem espacial e cores futurísticas no CSS.
📝 Exercício 7 – Formulário "Música no Ar" 🎧
Cadastro de playlist musical:
Nome da playlist
Gênero musical preferido (select)
Número aproximado de músicas (number)
Playlist pública ou privada? (radio)
Imagem personalizada (campo file)
Botão "Criar Playlist"
Adicione imagem temática musical e estilização criativa.
📝 Exercício 8 – Formulário "Super-heróis em Ação" 🦸♂️
Cadastro fictício para uma equipe de super-heróis:
Nome de herói
Poderes especiais (textarea)
Nível de força (number)
Cores do uniforme (color)
Foto do herói (file)
Botão "Cadastrar Herói"
Imagem heroica estilizada, fontes e cores vibrantes.
📝 Exercício 9 – Formulário "Destino dos Sonhos" 🌎✈️
Formulário de sugestão de viagem:
Nome do destino
País
É internacional? (radio: sim/não)
Data desejada (date)
Duração em dias (number)
Foto referência (file)
Botão "Enviar Sugestão"
Capriche na imagem de fundo com tema turístico.
📝 Exercício 10 – Formulário "Game Master" 🎮
Cadastro para campeonato de videogame fictício:
Nickname do jogador
Jogo preferido (select)
Nível de habilidade (select)
Consoles que possui (checkboxes)
Cor do uniforme (color)
Foto do avatar (file)
Termos e condições (checkbox obrigatório)
Botão "Participar"
CSS elaborado com imagens de games e cores temáticas vibrantes.
Desafio! 👺
🚨 Exercício Desafio – Cadastro Tech Day 🖥️💡
(Formulário com complexidade máxima já criado acima).
✅ Desta forma, você tem agora:
Exercícios evoluindo do mais fácil (nº 1) ao mais difícil (desafio).
Variedade temática.
Crescente complexidade de campos e estilização em CSS.
Uso criativo de imagens, cores e recursos de formulário.
Google Sites
Report abuse