· · 40

HTML e CSS para Formulários: Sugestões

Torne-se um profissional web freelancer

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;
}

Veja o exemplo final aqui

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.

Torne-se um profissional web freelancer

Novo curso: Seja um freelancer!
Clique aqui para mais informações


40 Comentários

  1. Gravatar
    Mateus

    Olá Guilerme..te enviei email solicitando um apoio para uma pequena customização de um página em html que estou criando..caso vc pudesse dar uma olhada te agradeceria.

  2. Gravatar
    Jéfferson Casagrande

    Não consegui ajustar o CSS com HTML, ficou muito bagunçado a tela, poderia me auxiliar?

    Att,

    1. Gravatar Guilherme Müller

      Olá, Jéfferson, por favor, envie-me uma mensagem (e-mail na seção Contato deste site).

      Obrigado

  3. Gravatar
    Hellen

    Opa, tudo bem? Estou começando na programação e seu formulário me ajudará muito, agradeço!

    Me tira uma dúvida, na primeira linha do HTML &quot;&lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;&lt;/form&gt;&quot; . Eu queria saber sobre esse action, o por que do # (se tiver um por quê rsrsrs) , se todo formulário tem esse action=&quot;#&quot;.

    1. Gravatar Guilherme Müller

      Hellen, o atributo "action" serve para direcionar o formulário, quando enviado, a um destino, como uma outra página, por exemplo. Usamos esse atributo para indicar qual URL vai fazer o processamento dos dados. Neste exemplo, como não estou usando nenhuma linguagem como PHP para operacionalizar o formulário, coloquei "#" para fazer com que o formulário não "vá para lugar nenhum" quando enviado.

  4. Gravatar
    Fernando

    Boa tarde Guilherme!
    Desculpe, não conheço nada em programação e gostaria se vc pudesse me ajudar; eu estou começando a elaborar um site para eu prestar serviço e estou usando template pronto da html5up.net e precisarei de um formulário...
    O GoogleForms funciona muito bem, mas ao invés de usar a página original do Google eu gostaria de manter o form do template que bem mais bonito e profissional, apenas enviando os dados para o formulário do Google, mas não estou acertando linkar os campos correspondentes (nome, e-mail, fone, texto, etc) ...
    Desde já, muito obrigado.
    Fernando.

    1. Gravatar Guilherme Müller

      Olá, Fernando,
      Para isso você precisará usar alguma linguagem que faça a comunicação com o servidor. O mais comum é usar PHP. Caso queira mais informações, podemos marcar uma aula Skype para que eu te explique como fazer isso, além de explicar um básico da linguagem também. Fico à disposição.

  5. Gravatar
    Marcio Nugas

    Perfeito! Muito bem explicado.
    Valeu!

  6. Gravatar
    Erick Nishimoto

    Muito bom e didático, obrigado!

  7. Gravatar
    Keisy Avila

    Oi!Adorei seu post,ajudou muito a fazer meu formulario,porém para o meu trabalho do curso precisava que o label ficasse do lado do input, como esse código ficaria no CSS?
    Precisava para amanha isso...Obrigada desde já!

  8. Gravatar
    nathali

    show adorei, só queria centralizar ele na pagina, como faço? Ja tentei e nao consigo centralizar tudo!

  9. Gravatar
    AFRANIO MORAIS

    Muito bom o formulário, já adotei. Só não entendi porque tentei usar ele externo e não pegou algumas propriedades do .css. O que pode ter acontecido?

    1. Gravatar Guilherme Müller

      Olá Afranio, recomendo que você use as ferramentas de desenvolvedor do seu navegador (geralmente F12 ou Ctrl + Shift + I) para verificar quais estilos não estão sendo aplicados e para diagnosticar o problema. Pode ser uma série de fatores, mas o fato do CSS ser externo é muito normal.

  10. Gravatar
    Flávio

    Parabésns pelo trabalho! Sou iniciante, como faço pra adicionar uma tag para redirecionar pra outro link depois do envio?

    1. Gravatar Guilherme Müller

      Obrigado! Sobre a sua pergunta, faça uma busca sobre "http meta refresh" e você verá uma forma de redirecionamento que você pode usar apenas com HTML.

  11. Gravatar
    Wesley Amorim

    Brother, que formulário interessante man, já troquei o do meu projeto por este, muito bom, e meu muito obrigado parceiro, ajudou pacas... att

  12. Gravatar
    paulo manhani

    parabéns, estou em aprendizado, super explicado, parabéns mesmo

  13. Gravatar
    Arimatea Lafayette

    Ficou claro a explicação.

  14. Gravatar
    ARIMATEA LAFAYETTE

    Os dois códigos estão em arquivos distintos em CSS e o formulário em HTML, como fazer a junção dos dois?

    1. Gravatar Guilherme Müller

      Olá Arimatea, para isso, consulte esta lição do meu curso: http://guilhermemuller.com.br/pt/elearning/html_css_basico/licao/1/inserindo-css

  15. Gravatar
    Eduardo

    Cara valeu pela ajuda só me tira uma duvida aonde coloco o e-mail que ao clicar em enviar vá para esse e-mail ?

    1. Gravatar Guilherme Müller

      Olá Eduardo,

      Neste post apenas trato da parte de HTML e CSS. Caso queira que este formulário funcione, com envio de e-mail e tudo o mais, você precisará utilizar uma linguagem de back-end (por ex.: PHP, ASP.NET, Ruby, Python) que irá fazer o envio. Porém, isso está fora do escopo deste post e do blog, pois aqui apenas trato de questões de front-end (HTML, CSS e JavaScript). Buscando no Google, você consegue encontrar várias dicas sobre como fazer um formulário funcionar. Espero que tenha ajudado a esclarecer a questão!

  16. Gravatar
    Daniel

    Muito obrigado, cara. Eu estava procurando por alguns tutoriais na internet acerca do assunto e o seu até agora foi o que mais me ajudou a compreender melhor o assunto. Continue com o bom trabalho!

  17. Gravatar
    ALEXANDRE

    Parabéns. Isso só nos estimula a aprender a desenvolver de forma coerente e dinâmica nossas páginas.

  18. Gravatar
    Willian

    Nesse formulário funciona no blogger?

    1. Gravatar Guilherme Müller

      Olá Willian,

      Nesse post apenas apresento algumas ideias para fazer o HTML e CSS de um formulário. Você pode aplicar estas dicas como quiser. O formulário, só com HTML e CSS, não faz nada. É preciso ter uma linguagem de programação por trás, como PHP, para que os campos funcionem de fato.

  19. Gravatar
    Felipe Gomes

    Meu amigo, que aula!!!

  20. Gravatar
    Jose Augusto Faria

    VELEU, OBRIGADO, MUITO BOM !!

  21. Gravatar
    Carlos

    Obrigado pelo auxílio. Ótima explicação.

  22. Gravatar

    Ótimo post, parabéns.

    1. Gravatar Guilherme Müller

      Obrigado, que bom que foi útil para você!

  23. Gravatar

    vai me ajudar muinto obrigado ese manual vai me tirara dum burraco negro

  24. Gravatar
    Paulo da Paz

    como selecionar uma valor no select option de um formulario em html pra o pho?

    1. Gravatar Guilherme Müller

      Olá Paulo,

      Acredito que esse seria um bom assunto para um outro post. De qualquer forma, a seleção se dá pelo array $_POST, como o utilizamos para qualquer outro campo. O valor que vem no $_POST['campo'] sempre vai ser o que o usuário selecionou dentro de um campo select.

  25. Gravatar
    Leandro Basso

    Ótimo post, simples, claro e objetivo!

    1. Gravatar Guilherme Müller

      Obrigado!

  26. Gravatar
    Marcelo

    Show! obrigado.
    Achei esse essa opção de usar divs muito melhor do que usar ul li.
    Esse e o melhor post que achei sobre forms com css. simples e objetivo.

    só uma outra dúvida: achei estranho o botão de submit ficar ali "perdido".
    se eu tivesse mais um botão, tipo "Cancelar", o ideal seria colocar uma div no mesmo esquema dos campos?

    obrigado!

    1. Gravatar Guilherme Müller

      Obrigado!

      Sobre o botão, ele está sozinho ali, mas uma alternativa que uso às vezes é fazer um fieldset com a classe "controles"ou algo assim, para conter os botões. Você pode aí configurar para que botões dentro deste fieldset flutuem à esquerda ou à direita.

  27. Gravatar
    Marcelo

    Bom dia! ótimo post, ja esta no meus favoritos

    Por favor, se não for pedir muito, podia colocar um exemplo de como ficaria o css com o label e o input lado a lado, e não com o label acima do input.

    se possivel comentando o ajuste para configurar o espçamento entre o label e o input.

    sempre apanho nessas configurações, ate porque só usava tables para fazer essas coisas... e dava muita dor de cabeça.

    Obrigado!

    1. Gravatar Guilherme Müller

      Olá Marcelo,

      Obrigado pela sugestão. Na verdade o processo é relativamente simples. Estou desenvolvendo o meu novo site e assim que ele estiver publicado, trabalharei em um novo post sobre o assunto.

  28. Gravatar
    Humberto Guimarães

    Show de bola!
    Parabéns... ajudou muito!!

  29. Gravatar
    Emerson

    Vlw ajudou muito

  30. Gravatar
    Janailson

    Bom dia amigo. Achei show de bola seu formulário. Tentei usar no meu projeto só que o botão de envio não está aparecendo customizado é como se ele não pegasse a formatação. Já olhei bastante para ver se estava faltando algo mais até copiei o código todo e nada.

    1. Gravatar Guilherme Müller

      Olá Janailson,

      Neste caso, verifique atentamente o código CSS e use também uma ferramenta como o Firebug para ver o que está afetando o botão. Às vezes, um erro simples como escrever errado o nome da classe já compromete a aplicação dos estilos.

  31. Gravatar
    Jean

    Show..perfeito..

  32. Gravatar
    Marcelo Mori

    Parabéns pelo tutorial, muito bem explicado e detalhado de forma simples.

    Me ajudou muito. Obrigado.

  33. Gravatar
    marllon ramos

    Muito bem explicado. Simples e objetivo.
    Parabéns!

    1. Gravatar Guilherme Müller

      Obrigado!

  34. Gravatar
    Diego

    Muito bom.
    Devido ao bootstrap que uso no meu projeto,os input se tornaram, digamos rebeldes.

    Mas tua dica no formulario me salvou \o/

    Valeu mesmo.

    1. Gravatar Guilherme Müller

      Valeu! A montagem de formulários pode tornar o código uma bagunça mesmo. O importante é ter um padrão de HTML e CSS para seguir e que consiga cobrir as principais situações.