HTML e CSS para Formulários: Sugestões
Novo curso: Seja um freelancer!
Clique aqui para mais informações
Formulários fazem parte da vida de todos os designers e desenvolvedores web. Não necessariamente uma parte interessante.
Os formulários podem ser mais simples e rápidos de serem construídos. Esse post visa dar algumas dicas úteis no desenvolvimento de formulários variados, usando uma base versátil de HTML e CSS, com base na minha experiência no desenvolvimento de sites para clientes.
Começando com o código HTML
Todo formulário comeca com uma tag form:
<form action="#" method="post"></form>Dentro de form, costumo colocar uma tag fieldset (grupo de campos) para agrupar todos os campos do formulário, desta forma:
<form action="#" method="post">
<fieldset>
<!-- campos -->
</fieldset>
</form>Agora vamos aos campos em si. Para mais versatilidade e facilidade na criação das CSS, é recomendável englobar o rótulo do campo (label) e o campo com um outro elemento. Há desenvolvedores que usam listas para criar formulários, entre outros métodos, mas eu pessoalmente prefiro uma tag genérica de bloco, a famosa div, com a classe "campo". Exemplo:
<div class="campo">
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome">
</div>Para quem não conhece, a tag label é a tag mais apropriada para justamente "rotular" os campos de um formulário. O seu atributo for serve para associar o rótulo ao campo desejado. Assim, ao clicar no label, muitos navegadores tem como comportamento padrão focar no campo associado. A vantagem de ter as divs com a classe "campo" ficará mais evidente quando fizermos a estilização CSS do formulário.
A tag fieldset que vimos antes também será utilizada para agrupar campos lado a lado, através da classe "grupo":
<fieldset class="grupo">
<div class="campo">
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome">
</div>
<div class="campo">
<label for="snome">Sobrenome</label>
<input type="text" name="snome" id="snome">
</div>
</fieldset>Para botões tipo "radio" e "checkbox", uso um label com a classe "checkbox". Assim, todo o campo, incluindo o rótulo e o botão, fica automaticamente clicável, melhorando a sua usabilidade (neste caso não precisamos do atributo for):
<label class="checkbox">
<input type="radio" name="sexo" value="masculino"> Masculino
</label>
<label class="checkbox">
<input type="radio" name="sexo" value="feminino"> Feminino
</label>Finalmente, para botões de envio, gosto de usar a um pouco desconhecida tag button. Ela é mais fácil de trabalhar e de aplicar estilos que, por exemplo, uma tag input tipo "submit". Suas vantagens incluem uma aparência mais consistente entre navegadores e a possibilidade de inserir conteúdo variado entre as tags de abertura e fechamento (ex: texto e imagens). Exemplo de um botão de envio:
<button type="submit" class="botao submit">Enviar</button>Com isso, temos o HTML completo do nosso formulário:
<form action="#" method="post">
<fieldset>
<fieldset class="grupo">
<div class="campo">
<label for="nome">Nome</label>
<input type="text" id="nome" name="nome" style="width: 10em" value="">
</div>
<div class="campo">
<label for="snome">Sobrenome</label>
<input type="text" id="snome" name="snome" style="width: 10em" value="">
</div>
</fieldset>
<div class="campo">
<label>Sexo</label>
<label>
<input type="radio" name="sexo" value="masculino"> Masculino
</label>
<label>
<input type="radio" name="sexo" value="feminino"> Feminino
</label>
</div>
<div class="campo">
<label for="email">E-mail</label>
<input type="text" id="email" name="email" style="width: 20em" value="">
</div>
<div class="campo">
<label for="telefone">Telefone</label>
<input type="text" id="telefone" name="telefone" style="width: 10em" value="">
</div>
<fieldset class="grupo">
<div class="campo">
<label for="cidade">Cidade</label>
<input type="text" id="cidade" name="cidade" style="width: 10em" value="">
</div>
<div class="campo">
<label for="estado">Estado</label>
<select name="estado" id="estado">
<option value="">--</option>
<option value="PR">PR</option>
</select>
</div>
</fieldset>
<div class="campo">
<label for="mensagem">Mensagem</label>
<textarea rows="6" style="width: 20em" id="mensagem" name="mensagem"></textarea>
</div>
<div class="campo">
<label>Newsletter</label>
<label>
<input type="checkbox" name="newsletter" value="1"> Gostaria de receber a Newsletter da empresa
</label>
</div>
<button type="submit" name="submit">Enviar</button>
</fieldset>
</form>Veja um exemplo apenas do HTML aqui
Aplicando CSS ao formulário
Aplicar CSS a formulários não é muito diferente de trabalhar com outros elementos. Geralmente considerada uma tarefa chata, ela pode ser mais agradável desde que se tenha um padrão.
Começamos pelos estilos reset. Isso varia conforme a preferência. Eu gosto de zerar margens e paddings, além de retirar a borda padrão dos fieldsets. Também padronizo a fonte e o tamanho de fonte dos campos. Além disso, já transformo a classe grupo em uma classe padrão para finalizar floats (conhecido como clearfix). Basicamente adicionamos um espaço após o elemento com a propriedade clear, assim finalizando qualquer flutuação dentro do container em questão:
* {
margin: 0;
padding: 0;
}
fieldset {
border: 0;
}
body, input, select, textarea, button {
font-family: sans-serif;
font-size: 1em;
}
.grupo:before, .grupo:after {
content: " ";
display: table;
}
.grupo:after {
clear: both;
}Agora as divs campo e as tags label. Como todos os campos estão agrupados dentro destes elementos, podemos aplicar estilos como margens de forma uniforme:
.campo {
margin-bottom: 1em;
}
.campo label {
margin-bottom: 0.2em;
color: #666;
display: block;
}A vantagem da classe grupo que fizemos aparece agora. Com apenas alguns estilos, já flutuamos os campos lado a lado sem muita dificuldade e sem a necessidade de marcação adicional:
fieldset.grupo .campo {
float: left;
margin-right: 1em;
}Em seguida colocarei alguns estilos nas tags input tipo "texto" (e similares), textarea e select. Os estilos incluem alguns detalhes decorativos, além de colocar a disposição como bloco (assim como os labels) para que o layout fique mais ordenado. Os estilos :focus entram em ação quando o usuário preenche os campos, ou seja, quando eles entram foco:
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="url"],
.campo input[type="tel"],
.campo select,
.campo textarea {
padding: 0.2em;
border: 1px solid #CCC;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
display: block;
}
.campo select option {
padding-right: 1em;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
background: #FFC;
}Para os inputs tipo "radio" e "checkbox", precisaremos de mais alguns estilos para que os campos se comportem conforme desejado:
.campo label.checkbox {
color: #000;
display: inline-block;
margin-right: 1em;
}Por fim, alguns estilos para a tag button, incluindo estilos decorativos, :hover (quando o mouse passa em cima) e uma mudança de cursor:
.botao {
font-size: 1.5em;
background: #F90;
border: 0;
margin-bottom: 1em;
color: #FFF;
padding: 0.2em 0.6em;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.botao:hover {
background: #FB0;
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: none;
}
.botao, select, label.checkbox {
cursor: pointer;
}Assim, temos o código CSS completo para o nosso formulário:
* {
margin: 0;
padding: 0;
}
fieldset {
border: 0;
}
body, input, select, textarea, button {
font-family: sans-serif;
font-size: 1em;
}
.grupo:before, .grupo:after {
content: " ";
display: table;
}
.grupo:after {
clear: both;
}
.campo {
margin-bottom: 1em;
}
.campo label {
margin-bottom: 0.2em;
color: #666;
display: block;
}
fieldset.grupo .campo {
float: left;
margin-right: 1em;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="url"],
.campo input[type="tel"],
.campo select,
.campo textarea {
padding: 0.2em;
border: 1px solid #CCC;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
display: block;
}
.campo select option {
padding-right: 1em;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
background: #FFC;
}
.campo label.checkbox {
color: #000;
display: inline-block;
margin-right: 1em;
}
.botao {
font-size: 1.5em;
background: #F90;
border: 0;
margin-bottom: 1em;
color: #FFF;
padding: 0.2em 0.6em;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.botao:hover {
background: #FB0;
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: none;
}
.botao, select, label.checkbox {
cursor: pointer;
}Você pode aplicar este simples padrão de formulários para vários sites e sistemas e, conforme necessário, ir adicionando novos estilos. Na sua simplicidade acredito que também há flexibilidade.
Novo curso: Seja um freelancer!
Clique aqui para mais informações
