Embedded Files
🌟 Validação e Responsividade em Formulários HTML e CSS
📝 Introdução
Na aula anterior, aprendemos a criar formulários criativos e estilosos. Hoje vamos aprofundar mais um pouco, abordando a validação de dados nos formulários e garantindo a responsividade, ou seja, fazendo com que os formulários funcionem bem em qualquer dispositivo, como computadores, tablets e celulares.
🎯 Objetivos
Ao final desta aula, você deverá ser capaz de:
Validar campos de formulário utilizando HTML.
Utilizar técnicas visuais de CSS para destacar validações.
Tornar formulários responsivos usando Media Queries.
🚩 Parte 1 – Validação HTML (Exemplos)
🔸 Atributos básicos de validação:
required: campo obrigatório.
minlength e maxlength: tamanho mínimo e máximo de caracteres.
type: validação específica (email, number, date, etc.).
pattern: expressão regular para validações específicas.
Exemplo prático: Um formulário simples para validar cadastro de usuário.
<form>
<input type="text" placeholder="Usuário" required minlength="3" maxlength="15">
<input type="email" placeholder="E-mail" required>
<input type="password" placeholder="Senha (mínimo 6 caracteres)" required minlength="6">
<button type="submit">Cadastrar</button>
</form>
🔎 Explicação detalhada de cada atributo:
1️⃣ required
Significado: Obrigatório.
Função: Torna o campo obrigatório, impedindo que o formulário seja submetido se o campo estiver vazio.
2️⃣ maxlength
Significado: Comprimento máximo.
Função: Limita a quantidade máxima de caracteres que o usuário pode digitar. Útil para dados específicos como números de telefone, documentos, etc.
3️⃣ minlength
Significado: Comprimento mínimo.
Função: Determina o número mínimo de caracteres necessários para o campo ser considerado válido. Muito usado em campos como senhas e nomes de usuário.
4️⃣ pattern
Significado: Padrão.
Função: Valida a entrada do usuário contra uma expressão regular. Pode ser usado para formatos específicos como telefone (XX)XXXXX-XXXX, CPF, ou qualquer outra formatação específica.
5️⃣ min
Significado: Mínimo numérico.
Função: Define o valor mínimo aceito em campos numéricos. Muito útil em campos como idade, quantidade ou valores monetários.
6️⃣ max
Significado: Máximo numérico.
Função: Define o valor máximo permitido em campos numéricos. Muito útil para restringir valores que têm um limite superior lógico, como idade, estoque, etc.
🚩 Parte 2 – Estilizando Validações com CSS
Você pode estilizar visualmente campos inválidos utilizando CSS pseudo-classes:
:valid para campos válidos.
:invalid para campos inválidos.
input:invalid {
border: 2px solid #e74c3c;
}
input:valid {
border: 2px solid #2ecc71;
}
🚩 Parte 3 – Formulário Responsivo com Media Queries
Com as Media Queries podemos adaptar o formulário para dispositivos móveis facilmente.
Exemplo prático:
.form-container {
width: 600px;
margin: auto;
}
@media (max-width: 768px) {
.form-container {
width: 90%;
}
input, button {
width: 100%;
box-sizing: border-box;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Cadastro de Alunos</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #ecf0f1;
display: flex;
justify-content: center;
padding: 30px;
}
.form-container {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
width: 600px;
}
h2 {
text-align: center;
color: #34495e;
margin-bottom: 20px;
}
input, textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border-radius: 5px;
border: 2px solid #bdc3c7;
box-sizing: border-box;
}
input:invalid, textarea:invalid {
border-color: #e74c3c;
}
input:valid, textarea:valid {
border-color: #2ecc71;
}
button {
width: 100%;
padding: 10px;
border: none;
background: #2980b9;
color: white;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background: #1f6690;
}
@media (max-width: 768px) {
.form-container {
width: 90%;
}
}
</style>
</head>
<body>
<div class="form-container">
<h2>formulário</h2>
<form>
</form>
</div>
</body>
</html>
Hora do exercício! 🏋️🔥
✅ Exercício 1: Nome do Herói 🦸♂️
Crie um formulário com dois campos:
Nome do herói (obrigatório, com no mínimo 3 letras)
Apelido (limite máximo de 10 caracteres)
Adicione um botão "Enviar".
✅ Exercício 2: Idade do Explorador 🌍
Crie um formulário para um explorador fictício com:
Nome (obrigatório)
Idade (entre 18 e 65 anos, obrigatório)
Inclua um botão "Enviar".
✅ Exercício 3: Código Secreto 🔐
Monte um pequeno formulário para autenticação com:
Nome de usuário (obrigatório)
Código secreto (obrigatório, deve ter exatamente 5 caracteres)
Finalize com um botão "Confirmar".
✅ Exercício 4: Telefone Mágico ☎️
Construa um formulário contendo:
Nome completo (obrigatório)
Telefone (obrigatório, no formato (XX)XXXXX-XXXX)
Adicione um botão "Enviar".
✅ Exercício 5: Animal Fantástico 🐉
Crie um cadastro para criaturas mágicas:
Nome do animal (obrigatório, até 12 caracteres)
Espécie (obrigatório)
Adicione um botão "Salvar".
✅ Exercício 6: Senha do Cofre 🔒
Simule um login com:
Nome de usuário (obrigatório)
Senha (mínimo de 8 caracteres, obrigatória)
Confirmação da senha (mesma regra)
Adicione um botão "Acessar".
✅ Exercício 7: Ano da Descoberta 🧭
Crie um formulário simples para registrar descobertas históricas:
Nome do descobridor (obrigatório)
Ano da descoberta (obrigatório, entre 1500 e 2025)
Finalize com um botão "Enviar".
✅ Exercício 8: Matrícula de Bruxo 🧙♀️
Monte um formulário para a escola de magia:
Nome do aluno (obrigatório)
Número da matrícula (obrigatório, deve conter 7 números)
<input type="text" required pattern="\d{7}"><br><br>
Inclua um botão "Registrar".
✅ Exercício 9: Apelido Musical 🎤
Crie um formulário para cadastro de artistas:
Nome completo (obrigatório)
Apelido artístico (entre 4 e 10 caracteres, obrigatório)
Gênero musical preferido (opcional)
Adicione um botão "Cadastrar".
✅ Exercício 10: Poção Especial 🧪
Monte um formulário com os seguintes campos:
Nome da poção (obrigatório)
Quantidade de gotas (obrigatório, entre 1 e 50)
Cor da poção (campo de cor)
Finalize com um botão "Finalizar Receita".
Desafio! 👺
🚀 Exercício Completo: Cadastro de Alunos (Responsivo + Validação)
📝 Crie um formulário com os seguintes campos:
Nome (obrigatório, mínimo 3 letras)
Idade (obrigatório, entre 10 e 18 anos)
E-mail (obrigatório, formato email)
Telefone (obrigatório, formato específico usando pattern)
Comentário (opcional, máximo 100 caracteres)
📌 Instruções adicionais:
Estilização clara para indicar erros.
Responsivo para dispositivos móveis.
📌 Dicas adicionais:
Teste em vários tamanhos de tela usando ferramentas do navegador.
Experimente combinações diferentes de cores para indicar erros.
Google Sites
Report abuse