Como Construir um Formulário Responsivo com Flexbox

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse tutorial, aprenderemos como lançar mão do flexbox para criar um formulário responsivo. O interessante (e excitante ao mesmo tempo) é que o flexbox permite construirmos nosso formulário sem usar media queries.

Antes de começarmos, vejamos o que construiremos (veja a versão maior e perceba como o layout muda):

Estrutura do Formulário

Certo, primeiro as coisas primeiras: a estrutura do formulário. Nós codificaremos da seguinte forma:

Usaremos a lista não ordenada .flex-outer para agrupar os vários elementos do formulário
e a lista não ordenada .flex-inner para agrupar as caixas de seleção.
Quase todos controles de formulário tem rótulos associados.

É isso! Ao definir duas listas não ordenadas (poderiam ser ordenadas também), criamos um formulário bem consciso. Eis como ele parece:

<form>
  <ul class="flex-outer">
    <li>
      <label for="first-name">First Name</label>
      <input type="text" id="first-name" placeholder="Enter your first name here">
    </li>
    <li>
      <label for="last-name">Last Name</label>
      <input type="text" id="last-name" placeholder="Enter your last name here">
    </li>
    <li>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your email here">
    </li>
    <li>
      <label for="phone">Phone</label>
      <input type="tel" id="phone" placeholder="Enter your phone here">
    </li>
    <li>
      <label for="message">Message</label>
      <textarea rows="6" id="message" placeholder="Enter your message here"></textarea>
    </li>
    <li>
      <p>Age</p>
      <ul class="flex-inner">
        <!-- list items here -->
      </ul>
    </li>
    <li>
      <button type="submit">Submit</button>
    </li>
  </ul>
</form>

Nota: usamos o elemento p ao invés do label antes da lista .flex-inner . Porque, nesse caso, não faz sentido usar o elemento label. Ele deve ser usado, apenas, para associar um texto de rótulo com um controlador de formulário.

Eis o código para as caixas de seleção:

<ul class="flex-inner">
  <li>
    <input type="checkbox" id="twenty-to-twentynine">
    <label for="twenty-to-twentynine">20-29</label>
  </li>
  <li>
    <input type="checkbox" id="thirty-to-thirtynine">
    <label for="thirty-to-thirtynine">30-39</label>
  </li>
  <!-- more list items here -->
</ul>

Com o código pronto, o formulário não estilizado está assim:

Não será o formulário mais bonito que você já viu, mas funciona! Ele é semântico, acessível e fluido: aspectos mais importantes que qualquer outra coisa.

Agora, já estamos prontos para aplicar alguns estilos nele.

Estilos do Formulário

Comecemos adicionando o normalize e o autoprefixer às configurações de nossa pen:

Depois, identifiquemos os recipientes flex. Em nosso caso, serão os elementos a seguir:

Cada um dos itens da lista .flex-outer .
A lista .flex-inner, que contém todas as caixas de seleção.

Adicionalmente, queremos centralizar verticalmente os itens flex em relação ao cruzamento dos eixos.

Para obter isso, devemos preparar algumas regras CSS iniciais:

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

O próximo passo é especificar as larguras dos items flex. Começaremos com os items flex da lista .flex-outer .

Os requisitos principais:

A largura dos rótulos devem estar entre 120px e 220px.
A largura dos elementos do formulário que vem depois dos rótulos devem ter, pelo menos, 220px.

O que obtemos com isso? Cada rótulo, junto ao seu elemento do formulário, será apresentado em uma única linha vertical quando a largura total do formulário for, no mínimo, 340px. Em outros casos, os elementos do formulários (fora as caixas de seleção, como veremos adiante), empilharão verticalmente.

Nota: os valores mencionados anteriormente são arbitrários–você pode modificá-los de acordo com suas necessidades.

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

Botão de Submissão

Por último, para o botão de submissão, que também é um item flex, definiremos alguns estilos básicos:

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

Caixas de Seleção

Estilizemos as caixas de seleção. Lembre-se que o recipeinte deles tem largura mínima de 220px.

Primeiro, estabelecemos a largura em 100px, dos itens flex que são parentes imediatos das caixas de seleção:

1	.flex-inner li {
2	width: 100px;
3	}

Então, lançamos mão da propriedade justify-content para alinhá-los em relação ao eixo principal. Note que essa propriedade possui valores diferentes, agora, porém, estamos interessados no space-between:

1	.flex-inner {
2	justify-content: space-between;
3	}

Ele funciona bem e permite-nos alcançar um alinhamento consistente para as caixas de seleção e seus respectivos rótulos. Algo que devemos mencionar é que esse valor pode distribuir os elementos da última linha estranhamente. Em algumas larguras de áreas de exibição, você verá algo assim:

Note o alinhamento dos dois últimos itens flex. Se, por algum motivo, você não gostar desse layout e prefere que eles apareçam um do lado do outro, pode tentar algo assim:

Removas a propriedade justify-content do recipiente flex.
Use percentuais para adicionar largura fixa aos elementos flex (por exemplo, width: 50%).
Use media queria para sobrescrever essa largura. Por exemplo, quando a área de exibição for maior que 992px, atribua width: 25% para os items flex ao invés de width: 50%.

Acima de tudo, o importante é entender duas coisas:

Flexbox nos dá grande flexibilidade para construir rapidamente formulários bonitos
e todos os valores espepecificados anteriormente funcionam bem para esse exemplo. Em seus próprios projetos, talvez precisará de valores diferentes. Por exemplo, os rótulos das caixas de seleção são pequenos e, por isso, estabelecemos uma largura fixa aos pais (100px). Entretanto, se tiverem larguras diferentes, pode ser melhor dá-los flex: 1 100px.

Estilos Finais

Antes de terminarmos, embelezemos um pouco mais o formulário. Selecione a aba CSS da demonstração abaixo e veja onde adicionamos cores e espaçamentos:

Conclusão

Como podemos ver, com um código mínimo e o poder da flexbox, fomos capazes de construir um formulário responsivo. Espero ter conseguido ajudar você a entender e a como criar seus próprios formulários flexbox.

Próximos Passos

Se quiser melhorar mais esse formulário, tenho dois desafios para você:

Aprimore sua aparência, sobrescrevendo os estilos padrões (por exemplo: adicione caixas de seleção customizadas)
e torne-o dinâmico. Por exemplo, se tiver conhecimento de WordPress, tente criar um formulário do Contact Form 7 ou do Ninja Form que preserve a estrutura e estilo desse formulário.