Formulário também precisam ser readaptáveis

Formulários sempre exigem um pouco de atenção quando são construídos, por terem diferentes tipos de campos que tem tamanhos e formatos variados, mas quando falamos de aplicar design responsivo em um formulário, não é algo assim tão complicado. Caso você tenha lido o post anterior sobre aplicar media queries junto com porcentagem para aproveitar o espaço da tela (que pode ser lido clicando aqui), esse post vai ser bem fácil também.
Primeiro vamos ver o código abaixo e o resultado que ele gera ao ser acessado:

HTML:
<section class='colunas'>
<form>
<div class='linha'>
<div class='label'><label>Nome</label></div>
<div><input type='text' /></div>
<div class='label'><label>Sexo</label></div>
<div>
<select>
<option value=''>Feminimo</option>
<option value=''>Masculino</option>
<option value=''>Outro</option>
</select>
</div>
</div>

<div class='linha'>
<div class='label'><label>Observações</label></div>
<div><textarea></textarea></div>
<div class='label'><label>Idade</label></div>
<div><input type='text' /></div>
</div>
<div class='linha'>
<div>&nbsp;</div>
<div><input type='submit' /></div>
</div>
</form>
</section>

CSS:
.colunas div > div {
width: 15%;
float: left;
padding: 1px 5px;
box-sizing: border-box;
}

.colunas div.linha {
clear: both;
}

input[type='text'],
input[type='submit'],
select,
textarea {
width: 100%;
}

Resultados:

Como podemos ver, sempre baseado nos nossos exemplos anteriores, o formulário ficará bem aplicado num navegador no desktop ou notebook, mas num celular, por exemplo, tanto na vertical quanto na horizontal o espaço será mal aproveitado e desalinhado. Como podemos fazer um melhor uso desse espaço então? Fácil: media queries e porcentagem. Vamos ver o código, mas usando eles dessa vez:

.colunas div > div {
width: 15%;
float: left;
padding: 1px 5px;
box-sizing: border-box;
}

.colunas div.linha {
clear: both;
}

input[type='text'],
input[type='submit'],
select,
textarea {
width: 100%;
}

@media screen and (max-width: 640px) {
.colunas div > div {
width: 49%;
}

div {
vertical-align: top;
}
}

@media screen and (max-width: 360px) {
.colunas div > div {
width: 100%;
padding: 0px;
}
input[type='text'],
input[type='submit'],
select,
textarea {
margin-bottom: 5px;
}

.label  {
background: orange;
}
}

Vendo o resultado, temos um layout mais fluído e melhor aproveitado:

Como sempre reforçado nesse blog, a ideia não é criar um padrão único de formatação, afinal, qual seria a utilidade disso? Teríamos sempre sites acessíveis de qualquer dispositivo, mas sempre com a mesma cara, não teria a mínima graça.
Nossa ideia é sempre mostrar algumas técnicas que podem fazer nossos sites serem mais acessíveis, tanto mostrando coisas que o HTML junto com CSS nos permitem fazer, tanto mostrar que o Design Responsivo está aí com o intuito de facilitar nossa vida como programadores e desenvolvedores web.

Espaçamento de textos

Muitas vezes quando estamos desenhando o layout de um site para desktops pensamos bastante no espaço entre objetos, principalmente entre os textos e as bordas dos blocos onde eles estão contidos, e isso é bom, pois impede que todo o conteúdo do nosso site fique muito próximo, às vezes até colado, ficando com uma cara que não seja agradável de mexer.
Entretanto, como estamos aqui aprendendo a pensar em design responsivo, temos que também pensar nas pessoas que acessarão nosso site em dispositivos móveis, certo? Exato!
Primeiro, vamos considerar o código abaixo:

HTML:
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed accumsan justo. Mauris non pellentesque leo. Nulla orci ipsum, posuere a euismod ut, auctor eu mauris. Suspendisse facilisis ipsum ex, quis ultricies arcu hendrerit eget. Aenean eget placerat eros. Praesent rutrum tincidunt velit, nec posuere urna lobortis sit amet. Cras metus erat, pellentesque vitae eleifend non, gravida eu urna. Nulla dictum vel nunc in ullamcorper. Mauris a odio est. Maecenas dictum orci massa, in dictum neque feugiat sed. Ut ut arcu dictum odio fermentum sagittis.
</div>
</body>

CSS:
div {
border: 1px solid #000000;
padding: 25px;

}

Ele gera o seguinte resultado dos dispositivos:

O resultado fica desalinhado ou desregulado nos dispositivos móveis? Na verdade não, tudo está até que bem no lugar. Entretanto, quando pensamos em design responsivo, é sempre bom aproveitarmos ao máximo o tamanho da tela para darmos o máximo de informação ao usuário na tela sem que ele precise rolar o site (SEMPRE NA VERTICAL, sempre temos que evitar a existência de qualquer barra horizontal nos nossos sites.)
Vamos analisar o código abaixo:

CSS:
div {
border: 1px solid #000000;
padding: 25px;
}

@media screen and (max-width: 640px) {
div {
padding: 20px 10px;
}
}

@media screen and (max-width: 360px) {
div {
padding: 15px 0px;
}

}

E o resultado que isso gera:

Sutil, certo? Sim, a diferença parece pouca, mas às vezes, dependendo do conteúdo ou do texto que temos num bloco, essa diferença pode fazer com que todo o nosso conteúdo seja apresentado de uma vez, facilitando a leitura e diminuindo a necessidade de o usuário rolar o site, o que facilita a navegação.
Essa diminuição de distanciamento nem sempre precisa existir, ou ser tão diminuída a ponto do texto quase tocar as bordas, tudo é relativo e depende de como você quer que seu site seja apresentando, o que queremos reforçar aqui é a ideia de que, se queremos fazer um site que possa ser acessado mais facilmente de qualquer lugar, temos que pensar nos diferentes dispositivos que podem ser usados para acessá-los, e como facilitar o acesso ao seu conteúdo.

Se reajustando a larguras menores

Hora de continuar nossa pequena "aula" sobre a importância da porcentagem no design responsivo. Caso queira entender um pouco do que estou falando antes de continuar, você pode entender num antigo post clicando aqui.
Bem, sem mais delongas, vamos ao código:

HTML:
<section class='colunas'>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat sagittis velit et vestibulum. Fusce semper diam ligula, ac consequat purus accumsan quis. Aliquam sed tristique lorem, at viverra nunc.
</div>

</section>

CSS:
div {
border: 1px solid #000000;
margin-bottom: 2px;
}

.colunas div {
width: 24%;
display: inline-block;

}

Quando abrimos nos navegadores temos os seguintes resultados:

Tudo bem no desktop, ainda aceitável num celular segurado na horizontal e péssimo se virarmos ele na vertical.
Para corrigir isso, podemos fazer uso do nosso conhecimento de media queries (neste link) e a ideia de porcentagem pra deixar o site mais bonito. Vamos ver o código abaixo:

.colunas div {
width: 24%;
display: inline-block;
}

@media screen and (max-width: 640px) {
.colunas div {
width: 49%;
}
}

@media screen and (max-width: 360px) {
.colunas div {
width: 100%;
}
}

Vamos ver como isso fica ao ser aberto:

Aproveitamos melhor o espaço, e o nosso site não fica mais desalinhado independente de como e onde abrimos. Também podemos fazer com que nos celulares e tablets os blocos ocupem 100% da largura independente da posição em que eles fiquem da seguinte forma:

div {
border: 1px solid #000000;
margin-bottom: 2px;
}

.colunas div {
width: 24%;
display: inline-block;
}

@media screen and (max-width: 640px) {
.colunas div {
width: 100%;
}
}

E como resultado temos:

Qual dos dois fica melhor? Não dá para afirmar, depende do conteúdo geral do site, e como as informações em cada bloco precisam ser mostradas, mas quisemos apresentar aqui formas de como deixar o conteúdo mais harmonioso. Podemos dividir os blocos em uma coluna, duas, três, tudo depende de como usamos isso para uma melhor apresentação do nosso conteúdo.

Trabalhando com porcentagens

Quando trabalhos com design responsivo, uma das primeiras coisas que devemos colocar na cabeça é que vamos trocar, SEMPRE QUE POSSÍVEL, o uso de medidas estáticas (pixels, por exemplo) por medidas dinâmicas, ou seja, por porcentagem, e podemos ver no código abaixo um exemplo de como as meninas estáticas podem ser nossas inimigas:

HTML:
<div class='container'>
<div class='colEsq'>
Texto esquerda 1
<br />
Texto esquerda 2
<br />
Texto esquerda 3
<br />
Texto esquerda 4
<br />
Texto esquerda 5
<br />
</div>
<div class='colDir'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices ultricies tincidunt. Nam eu hendrerit orci. Quisque non ipsum mi. Mauris in vulputate diam. Aliquam erat volutpat. Vivamus cursus volutpat nisi, fringilla sodales quam congue et. Nulla in tellus arcu. Aliquam sagittis placerat feugiat.
<br />
Suspendisse volutpat justo arcu, ac congue urna congue ac. Suspendisse at elementum libero. Nulla sed mi euismod dolor tincidunt vestibulum. Sed nulla nunc, varius in dapibus eget, interdum sed justo. Suspendisse maximus elit nulla, rutrum laoreet metus condimentum id. Phasellus ut justo blandit, euismod libero nec, hendrerit velit. Proin blandit risus eget elit ultricies, non interdum eros pharetra. Praesent lacinia aliquam felis quis pharetra. Donec vitae enim dolor. Curabitur eu commodo nibh.
</div>
</div>

CSS:
.container {
width: 100%;
}

.container div {
float: left;
border: 1px solid #000000;
box-sizing: border-box;
}

.container .colEsq {
width: 420px;
}

.container .colDir {
width: 930px;
}

Esse código gera o seguinte resultado no navegador, e no emulador do Samsung Galaxy S5, tanto na vertical quando na horizontal:

Como podemos ver, num navegador com viewport de 1350px de largura ou mais, a página é totalmente demonstrada e fica harmoniosa, entretando, numa tela menor, seja na horizontal quanto na vertical, os blocos saem da formatação, além de não caberem totalmente na tela, gerando uma barra de rolagem horizontal.
Como resolver esse problema? Exatamente, PORCENTAGEM!
Para esses casos temos que usar um pouco de matemática, mas nada que seja tão difícil de aplicar. Vamos usar as seguintes medidas do exemplo anterior:
Bloco esquerdo: 420px
Bloco direito: 930px
Total: 1350px

Para transformarmos isso em porcentagem vamos utilizar a seguinte fórmula:
(tamanho do bloco/total) * 100

Assim temos os seguintes valores:
(420/1350) * 100 = 31.11%
(930/1350) * 100 = 68.88%

Com esses valores podemos alterar nosso CSS para o seguinte:

.container {
width: 100%;
}

.container div {
float: left;
border: 1px solid #000000;
box-sizing: border-box;
}

.container .colEsq {
width: 31.11%;
}

.container .colDir {
width: 68.89%;
}

E com isso, teremos o seguinte resultado nos navegadores com viewports diferentes:

Como visto no exemplo acima, o conteúdo ainda não ficou num formato totalmente adequado, mas o uso de porcentagem faz nosso código ser mais adaptável a diferentes dispositivos e tamanhos sem perder sua formatação.
Nos próximos posts vamos dar outros exemplos do que pode ser feito com o uso da porcentagem para deixar o site ainda mais organizado em dispositivos menores.