WDD 130 | Atividade Guiada de Programação

S05 Atividade Guiada de Programação: Formulário de Questionário

Visão Geral

Para esta atividade, você criará código junto com um vídeo do instrutor que terá orientações para cada etapa da atividade abaixo. Não se esqueça de pausar o vídeo ou assistir a algumas seções, se necessário, para conseguir concluir a atividade inteira.

Seu instrutor publicará um link para o vídeo no Microsoft Teams.

Siga o vídeo com a atividade guiada de programação para criar um novo arquivo HTML que seja um formulário de questionário.

Instruções

Configuração de Arquivo e Pasta

Crie uma nova página HTML na semana05, chamada questionario.html.
Crie um novo arquivo CSS chamado questionario.css na pasta estilos.

HTML

Em questionario.html, crie um formulário HTML válido que seja um questionário online sobre HTML e CSS com pelo menos 4 (quatro) perguntas sobre HTML e/ou CSS.
Seu documento HTML deve ser válido e conter um título <h1> apropriado para o conteúdo.
Cada elemento de formulário (por exemplo, <input>, <textarea>, <select>, etc.) deve ser acoplado a um elemento label associado.

Lembre-se de que há duas maneiras de associar rótulos (labels) a elementos de formulário. As duas são apropriadas, mas use o mesmo método para manter a consistência.
Os seguintes elementos de entrada e configurações são necessários no questionário:
1. Uma entrada do tipo text. (pergunta de preencher a lacuna)
  - Atribua os valores dos atributos name e id como "q1".
2. Um elemento textarea. (pergunta de resposta curta)
  - Atribua os valores dos atributos name e id como "q2".
3. Um elemento select. (caixa suspensa ou combobox)
  - Atribua os valores dos atributos name e id como "q3".
  - O elemento selecionado deve ter pelo menos 3 (três) options (opções) com values (valores).
    Se você quiser que a primeira opção seja rotulada e não selecionável, pode adicionar um elemento option com um atributo value vazio e os atributos selected e disabled, assim:
```
<option value="" selected disabled>Escolha uma...</option>
```
4. Um elemento de entrada do tipo number. (resposta de número inteiro)
  - Atribua os valores dos atributos name e id como "q4".
O formulário requer um botão, button, do tipo type submit com o texto "Enviar Questionário".

Captura de tela de um exemplo de questionário com estilo. — Exemplo de Questionário
Isto é apenas um exemplo. Personalize seu formulário usando seu próprio design e conteúdo.

CSS

Estilize o formulário usando CSS, seguindo as práticas recomendadas para criar uma única coluna e layout uniforme.

Teste

Certifique-se de salvar e testar frequentemente sua página no local, usando a extensão Live/Five Server no VS Code.
Valide seu HTML e CSS e verifique seu trabalho usando a lista de verificação de padrões de desenvolvimento como guia.
Confirme (commit) e sincronize sua página com sua conta wdd130 remota do GitHub.
Publique suas perguntas no Microsoft Teams, usando o canal da Semana 05.

Link de Vídeo Alternativo

Além do link que seu instrutor publicou, você também pode assistir ao seguinte passo a passo do código ou usar a transcrição:

Vïdeo: ▶️ Atividade Guiada de Programação: Formulário de Questionário

Envio

Por favor, pause e assista novamente a quaisquer partes do vídeo do instrutor necessárias até que você tenha concluído toda a atividade e sua página da mesma forma que o do instrutor. Quando tiver terminado:

Volte ao Canvas para responder ao questionário.