Ficha de Trabalho - Continuação
Utilização de Formulários HTML e Cascading Style Sheets (CSS)
Exercícios Práticos e Aplicações
Esta ficha de trabalho dá continuidade aos conteúdos abordados anteriormente sobre formulários HTML
e CSS. Através de exercícios práticos, irá consolidar os seus conhecimentos e desenvolver competências
na criação de formulários interativos e estilizados.
1. Formulários HTML - Exercícios Práticos
EXERCÍCIO 1 - Formulário de Registo
Crie um formulário de registo de utilizador com os seguintes elementos:
• Campo de texto para Nome Completo
• Campo de texto para Email (type="email")
• Campo de password para Palavra-passe
• Campo de password para Confirmar Palavra-passe
• Checkbox buttons para Género: Masculino, Feminino, Outro
• Checkbox para aceitar os Termos e Condições
• Botões de Submeter e Limpar
Requisitos:
• Use a tag <fieldset> para agrupar os campos relacionados
• Adicione <legend> com o título "Dados de Registo"
• Todos os campos devem ter o atributo name apropriado
EXERCÍCIO 2 - Formulário de Inquérito
Desenvolva um formulário de inquérito sobre preferências de estudo com:
• Campo de texto para Nome do Aluno
• Dropdown (<select>) para Ano de Escolaridade: 10º, 11º, 12º
• Checkboxes para Disciplinas Favoritas: Matemática, Português, Inglês, Informática, História
• Textarea para Comentários (5 linhas, 50 colunas)
• Botão de submissão com o texto "Enviar Inquérito"
Dica: Use o atributo selected para definir uma opção pré-selecionada no dropdown.
EXERCÍCIO 4 - CSS Inline
Utilizando CSS inline (atributo style), estilize os seguintes elementos:
1. Um parágrafo com texto em cor azul (color: blue) e fonte Arial
2. Um título <h2> com cor de fundo amarela (background-color: yellow) e texto centrado
3. Um botão com cor de fundo verde (#28a745), texto branco e padding de 10px
Exemplo de código para o primeiro item:
<p style="color: blue; font-family: Arial;">Este é um parágrafo estilizado.</p>
EXERCÍCIO 5 - CSS Interno com Selectores
Crie uma página HTML com estilos CSS internos (dentro da tag <style>) que aplique:
• A todos os parágrafos (p): fonte Verdana, tamanho 14px, cor cinza escuro (#333)
• A todos os títulos h1: cor laranja (#ff6600), texto centrado, margem inferior de 20px
• A todos os títulos h2: cor azul (#0066cc), margem superior de 15px
• Ao elemento body: cor de fundo cinza claro (#f5f5f5), margem de 20px
3. Questões de Consolidação
QUESTÃO 1
Explique a diferença entre os métodos GET e POST no atributo method de um formulário. Quando deve
usar cada um?
____________________________________________________________________________________________________
____________________________________________________________________________________________________
QUESTÃO 2
Qual é a diferença entre usar uma classe CSS e um ID CSS? Dê exemplos de situações apropriadas para
cada um.
____________________________________________________________________________________________________
____________________________________________________________________________________________________
QUESTÃO 3
Liste três vantagens de utilizar CSS externo em vez de CSS inline ou interno.
____________________________________________________________________________________________________
____________________________________________________________________________________________________
4. Tabela de Referência Rápida
Elementos de Formulário HTML
Elemento Tag/Código Descrição
Campo de Texto <input type="text"> Caixa de texto simples para
entrada de dados
Email <input type="email"> Campo específico para
endereços de email
Password <input type="password"> Campo que oculta os caracteres
digitados
Radio Button <input type="radio"> Opção única entre várias
alternativas
Checkbox <input type="checkbox"> Permite múltiplas seleções
Dropdown <select><option> Lista suspensa de opções
Textarea <textarea> Área de texto multilinha
Botão Submit <input type="submit"> Envia os dados do formulário
Botão Reset <input type="reset"> Limpa todos os campos do
formulário
Ficha de Trabalho - Formulários HTML e CSS (Continuação)
Material de apoio pedagógico | Tecnologias Web