WDD 130: Fundamentos da Web

S05 – Atividade de Aprendizagem: Estilizando Formulários

Visão Geral

Um formulário HTML é uma interface de usuário que precisa de estilo para ser utilizável e proporcionar uma experiência positiva ao usuário. Nesta atividade, você adicionará CSS ao formulário "Pesquisa de Usuários" criado no último módulo.

Preparação

• Leitura: 📄 Estilizando Formulários Web – MDN
• Revise: 📄 Melhores Práticas para Design de Formulários – Adobe (Conteúdo em inglês)

Instruções da Atividade

Usando o formulário "Pesquisa de Usuários" do último módulo, adicione CSS para deixá-lo em conformidade com as melhores práticas de design de formulários, como um layout de coluna única e padding e espaçamento apropriados dentro e entre os elementos.

Aqui está um exemplo do que você produzirá:

Configuração

1. Na pasta semana05, crie uma pasta estilos, caso ainda não tenha criado.
2. Adicione um arquivo formulario-pesquisa.css na pasta estilos.
3. Abra o arquivo formulario-pesquisa.html na pasta semana05.
4. Adicione o link de referência ao arquivo CSS.
5. Inicie o serviço do navegador localhost do Five Server para que você possa observar as alterações ocorrerem à medida que você adiciona o estilo.

Adicione Estilo

1. Adicione uma ou mais fontes de sua escolha usando a declaração font-family.
2. Estilize a regra do seletor universal * para definir margin como zero, padding como zero e box-sizing como border-box.
   Exemplo

         * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

3. Estilize a regra do corpo (body) para declarar font-family e tudo o mais que você considerar necessário
   Exemplo

   body {
     font-family: Merriweather, Georgia, serif;
     font-size: 1.2em;
     color: #333;
     background: #fff;
   }

4. Personalize o header e h1 como achar melhor.
   Exemplo

   header {
     margin: 0 auto;
     width: 650px;
   }
   
   h1 {
     margin: 1rem;
     font-size: 1.5em;
     color: navy;
     text-align: center;
   }

5. Defina o estilo de form com width, margin centralizada, padding, border, border-radius, background-color e layout de display como grid.
   Exemplo

   form {
     width: 650px;
     margin: 0 auto;
     padding: 1rem;
     border: 1px solid rgb(0 0 0 / 0.1);
     border-radius: 0.5rem;
     background-color: #eee;
     display: grid;
   }

6. Estilize cada fieldset para ser uma grid e forneça uma grid-gap e tudo o mais que você considerar necessário.
   Exemplo

   fieldset {
     display: grid;
     grid-gap: .5rem;
     margin: 1rem;
     border: 1px solid rgb(0 0 0 / 0.2);
     padding: 1rem;
   }

7. Estilize o fieldset legend.
   Exemplo

   legend {
     padding: 0.5rem;
     color: navy;
     font-size: 1.3em;
   }

8. Opção: Estilize todos os elementos do formulário (label, input, button, select e textarea) com uma família de fontes diferente e de qualquer outra forma que você achar adequada que seja diferente dos títulos e legendas.
   Exemplo

   label, input, button, select, textarea {
     font-family: Roboto, Arial, sans-serif;
   }

9. Defina o estilo dos elementos label para text-align à direita e tenha um valor padding-right.
   Exemplo

   label {
     text-align: right;
     padding-right: 1rem;
   }

10. Estilize os elementos input, select e textarea para ter padding e font-size maior. Observe que isso é essencial para fornecer espaçamento dentro dos elementos input do formulário.
    Exemplo

    input, select, textarea {
      padding: 0.5rem;
      font-size: 1.1rem;
    }

11. Defina o estilo do elemento checkbox para que seja maior que o tamanho padrão usando width e height. Altere o alinhamento vertical, vertical-align, para que fique na parte inferior, cabendo no espaço.
    A melhor prática para seletor CSS neste caso é input[type="checkbox"]
    Exemplo

    input[type="checkbox"] {
      width: 22px;
      height: 22px;
      vertical-align: bottom;
    }

12. Dê estilo a button como preferir, usando junto a pseudoclasse button:hover.
    Exemplo

    button {
      margin: 1rem;
      background-color: navy;
      color: #fff;
      border: none;
      border-radius: .5rem;
      padding: .75rem;
      font-size: 1.2rem;
    }
    
    button:hover {
      background-color: darkgreen;
    }

13. Estilize o rodapé, footer
    Exemplo

    footer {
      margin: 1rem auto 0;
      width: 650px;
      text-align: center;
      font-size: 0.8em;
      color: #777;
      border-top: 1px solid #ccc;
    }

Adicione Divs HTML

1. Crie elementos div (divisor) em torno de cada par de label-input/select do formulário no seu documento formulario-pesquisa.html.
   Deve haver cinco deles: nome completo (tipo de entrada "text"), email (tipo de entrada "email"), navegador (tipo de entrada "select"), animal de estimação (tipo de entrada "checkbox"), e lugares onde morou (tipo de entrada "textarea").
2. Dê a cada um desses elementos div um atributo de classe chamado item-formulario. Veja abaixo um exemplo do primeiro item:

   <div class="item-formulario">
     <label for="nomecompleto">Nome Completo:</label>
     <input type="text" id="nomecompleto" name="nomecompleto">
   </div>

3. Dê aos contêineres div nomecompleto e email um nome de classe adicional de coluna2.

   <div class="item-formulario coluna2">
     <label for="nomecompleto">Nome Completo:</label>
     <input type="text" id="nomecompleto" name="nomecompleto">
   </div>
   <div class="item-formulario coluna2">
     <label for="emaildousuario">E-mail:</label>
     <input type="email" id="emaildousuario" name="emaildousuario">
   </div>
   

4. Dê aos contêineres div select (pergunta sobre opções do navegador) e checkbox (pergunta sobre bichinhos de estimação) um nome de classe adicional de coluna1.

Estilo CSS para Seletores de Classe

1. Estilize o seletor de classe .item-formulario para ter display de grid para que você possa alinhar o rótulo e os elementos input/select. Aplique também align-items de centralizado para alinhamento vertical em um layout com várias colunas.
   Exemplo

   .item-formulario {
     display: grid;
     align-items: center;
   }

2. Defina o estilo do seletor de classe .coluna1 para ter grid-template-columns de 3fr 1fr, de modo que a primeira coluna (label) ocupe três vezes o espaço da segunda coluna. Adicione também uma margem, conforme necessário. Você pode ajustar esse valor para obter o espaçamento desejado.
   Exemplo

   .coluna1 {
     grid-template-columns: 3fr 1fr;
     margin: 0.5rem 0;
   }

3. Defina o estilo do seletor de classe .coluna2 para ter grid-template-columns de 1fr 2fr, de modo que a primeira coluna (label) ocupe metade do espaço da segunda coluna. Adicione também uma margem, conforme necessário. Você pode ajustar esse valor para obter o espaçamento desejado.
   Exemplo

   .column2 {
     grid-template-columns: 1fr 2fr;
   }

Teste e Ajuste

1. Não deixe de revisar seu trabalho no navegador usando o Five Server.
2. Adicione regras e declarações CSS adicionais conforme necessário para obter espaçamento consistente e alinhamento uniforme.

Envio

1. Confirme (commit) e envie (push) seu trabalho para seu repositório wdd130 habilitado para o GitHub Pages.