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.