Formatando formulários com CSS

Publicado em: Artigos | Tutoriais | Com 39.130 visitas e atualmente com 48 comentários

Fala pessoas!

Tem bastante gente me perguntando nos e-mails como formatar uma caixa de “Pesquisa” no site, como eu acabei deixando aqui no meu:

Formatando formulários com CSS - André Buzzo Webdesign

Não é tão complicado assim não! Basta utilizarmos as formatações corretas no CSS para as partes corretas do HTML que será utilizado na criação do formulário!

Esses passos servem tanto para o desenvolvimento de sites “normais”, quanto para o desenvolvimento no Worpdress (que é meu caso!)!

Primeiramente, precisamos entender a marcação do HTML em um formulário em si:

Formatando formulários com CSS - André Buzzo Webdesign

Sua marcação ficaria dessa maneira:



E seu resultado seria, nesse momento, algo parecido com isso:

Formatando formulários com CSS - André Buzzo Webdesign

Tendo em vista que sabemos quais as partes no HTML precisaremos estilizar no CSS, fica muito fácil de formatarmos para atenda nossos desejos e necessidades! Vamos atacar primeiramente, a tag LABEL do nosso HTML via CSS:

estilo.css

form label {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#036;
    font-weight:bold;
    float:left;
}

Seu resultado, agora, é esse:

Formatando formulários com CSS - André Buzzo Webdesign

Já atacamos a tag LABEL via CSS, e agora, vamos partir para a próxima! Vou postar um exemplo aqui que vai ajudar e muito na hora de separamos os tipos de INPUT que temos no formulário! Você já vai entender!

estilo.css

form label {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#036;
    font-weight:bold;
    float:left;
}
form input {
    background-color:#f2f2f2;
    border:1px solid #000;
    padding:5px;
}

O problema é esse! Você quer apenas atacar o campo INPUT onde a pessoa vai inserir o termo para sua pesquisa, e não o botão também! Veja como ficou agora nossa formatação:

Formatando formulários com CSS - André Buzzo Webdesign

Tanto o INPUT TYPE TEXT quanto o SUBMIT incorporaram as regras que determinamos via CSS, mas não queremos isso! Queremos que apenas o campo do TEXT seja afetado por nossas regras! E como proceder? Simples! Confira abaixo:

estilo.css

form label {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#036;
    font-weight:bold;
    float:left;
}

form input[type="text"] {
    background-color:#f2f2f2;
    border:1px solid #000;
    padding:5px;
}

Colocando entre “chaves” o tipo do campo que precisamos, ele vai se adequar àquilo que necessitamos! Veja agora como ficou:

Formatando formulários com CSS - André Buzzo Webdesign

O botão do formulário voltou ao normal, e agora, podemos alterá-lo sem maiores complicações! Mas para tanto, precisamos voltar ao nosso código HTML e fazer uma pequena alteração nesse item:



Precisamos inserir uma classe no botão! Vamos criar, agora, via CSS, a classe correspondente ao estilo que aplicamos na nossa marcação HTML:

estilo.css

form label {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#036;
    font-weight:bold;
    float:left;

form input[type="text"] {
    background-color:#f2f2f2;
    border:1px solid #000;
    padding:5px;
}
.botaoForm {
    padding:5px;
    background-color:#036;
    border:1px solid #000;
    color:#fff;
    font-weight:bold;
	}

E vamos ver qual foi nosso resultado:

Formatando formulários com CSS - André Buzzo Webdesign

Vamos incrementar um pouco esse botão, criando uma classe para o estado “HOVER”, quando o nosso usuário passar o mouse por cima do botão antes de clicá-lo para realizar a ação:

estilo.css

form label {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#036;
    font-weight:bold;
    float:left;

form input[type="text"] {
    background-color:#f2f2f2;
    border:1px solid #000;
    padding:5px;
}

.botaoForm {
    padding:5px;
    background-color:#036;
    border:1px solid #000;
    color:#fff;
    font-weight:bold;
}

.botaoForm:hover {
    padding:5px;
    background-color:#000;
    border:1px solid #036;
    color:#fff;
    font-weight:bold;
	}

E quando o usuário passar o mouse por cima:

Formatando formulários com CSS - André Buzzo Webdesign

Para facilitar ainda mais a vida do nosso usuário, vamos também atender algumas boas práticas sobre ACESSIBILIDADE, e deixar o campo onde nosso visitante irá digitar seus termos para pesquisa de uma forma mais coesa e explicativa:

estilo.css

form label {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#036;
    font-weight:bold;
    float:left;

form input[type="text"] {
    background-color:#f2f2f2;
    border:1px solid #000;
    padding:5px;
}

form input[type="text"]:hover {
    background-color:#e1e1e1;
    border:1px solid #333;
    padding:5px;
}

.botaoForm {
    padding:5px;
    background-color:#036;
    border:1px solid #000;
    color:#fff;
    font-weight:bold;
}

.botaoForm:hover {
    padding:5px;
    background-color:#000;
    border:1px solid #036;
    color:#fff;
    font-weight:bold;
	}

Vejamos agora nossas modificações:

Formatando formulários com CSS - André Buzzo Webdesign

Quando o usuário passar o mouse também sobre o campo onde digitará seus termos, o campo mudará de cor para dar a impressão de que “é um campo interativo”, e que pede para que alguma ação seja tomada/realizada!

E para ajudar mais na ACESSIBILIDADE, enquanto ele digita o termo, podemos dar mais destaque ainda, usando o “:focus” para realizar isso:

estilo.css

form label {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#036;
    font-weight:bold;
    float:left;

form input[type="text"] {
    background-color:#f2f2f2;
    border:1px solid #000;
    padding:5px;
}

form input[type="text"]:hover {
    background-color:#e1e1e1;
    border:1px solid #333;
    padding:5px;
}

form input[type="text"]:focus {
    background-color:#6cf;
    border:1px solid #900;
    padding:7px;
}

.botaoForm {
    padding:5px;
    background-color:#036;
    border:1px solid #000;
    color:#fff;
    font-weight:bold;
}

.botaoForm:hover {
    padding:5px;
    background-color:#000;
    border:1px solid #036;
    color:#fff;
    font-weight:bold;
	}

Veja como o mesmo ficou:

Formatando formulários com CSS - André Buzzo Webdesign

É isso aí!

Espero que isso ajude na hora de formatar determinados campos de um formulário para melhorar a experiência do seu usuário/visitante assim que chegar ao seu site! Pode parecer uma coisa simples, sem muita importância, mas na realidade, faz uma grande diferença na hora de sem montar algo para interagir com todos!

Forte abraço e usem os comentários para dúvidas, críticas ou sugestões!

Se você gostou, clica no “Tweetar” e passe para seus contatos!
Se não gostou, indique à seus inimigos ou desafetos!!! rsrs

Até a próxima!

Sou desenvolvedor web especializado na criação de sites gerenciáveis com WordPress.

Sou também colunista da Abraweb – Associação Brasileira de Webdesigners – e tutor na instituição MX Cursos.

Voltar à página anterior!

ERRAR FAZ PARTE! APRENDER TAMBÉM!
Sistema de comentários com PHP - Parte 1

Atualização de conteúdos em mídias digitais é na KR Comunicação!

Os melhores cursos você encontra aqui!

Receitas de Hambúrgueres! Um mais gostoso que o outro!

Participe da discussão! Deixe seu comentário!

  • http://www.lojascarisma.com.br Lojas Carisma

    Olá André, nao estou conseguindo deixar o campo pesquisa em modo responsivo, no chrome ele aparece de um jeito e no firefox aparece de outro, pode me ajudar?

    Digite o Nome do Produto

    <form method="get" class="searchform" action="” >

    <input size=90 type="text" class="s" name="s" placeholder="”/>

    <input type="submit" id="searchsubmit" value="”>

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Lojas Carisma!

      Remova o “size=90″ do seu formulário …. prefira sempre utilizar valores em % para se adequar quando a tela diminuir … e sempre use isso formatando via CSS … como:

      .searchform input[type=”text”]{width:70%}

      Aí você consegue o efeito desejado, visto que se sua div tem 100px ele ocupará 70px desse total …

      Abraços e até mais!

      • http://www.lojascarisma.com.br Lojas Carisma

        Obrigado por me responder André, quando removo o size=90 o campo pesquisa fica pequeno, aí sobra muito espaço vazio, não entendo muito de computador, este codigo que me sugeriu devo inserir onde? Eu fiz da seguinte maneira: acessei a aba aparencia/editor no wordpress, fui em search-form copiei o codigo e inseri em modelo de pagina principal

        • http://www.andrebuzzo.com.br André Buzzo

          Não por isso!

          Vamos lá: dentro do editor do WordPress, existe a página de estilos (style.css).

          Copie e cole esse código que te enviei nesse arquivo e mande salvar. Qualquer coisa, me envia um e-mail com os códigos da “modelo de página inicial” que eu dou uma olhada pra ti … meu email é contato@andrebuzzo.com.br!

          Abraços!

          • http://www.lojascarisma.com.br Lojas Carisma

            André lá vai eu novamente, por um acaso seria em alguns destes aqui para eu inserir o codigo?

            /* 4.2 Specific Widgets */

            /* SEARCH FORM */

            .widget_product_search,

            .widget_woo_search {

            position: relative;

            }

            .widget_product_search label,

            .widget_woo_search label {

            display: none;

            }

            • http://www.andrebuzzo.com.br André Buzzo

              Olha … eu não aconselho você a mexer no CSS caso não sabia bem o que está fazendo meu caro … rs

              Abraços!

  • Pedro Soares

    Oi, gostaria que vc ensinasse como se faz aquela legenda que aparece quando se sobe o mouse em cima do seu menu. É uma legenda fixa o google tbm usa uma dessa. Pode fazer um tutorial explicando como se faz ??

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Pedro!

      Cara, esse é um recurso que existe na biblioteca Bootstrap … na documentação dela tem uns exemplos bacanas!

      Abraços!

  • Stholen

    Ola,
    gostaria de uma ajuda em uma enorme duvida,
    tenho um formulario onde formatei via css as bordas com border-radius.
    o problema e que quando dou foco a este formulario, vejo que a borda arredondada e envolvida por outra borda como uma sombra ativa, como se forsse relusente,
    que nao esta arredondada, e sim quadrada. como formatar esta borda para envolver o mesmo arredondamento que fiz?

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Stholen!

      Cara … você fez alteração também do focus no CSS?

      Abraços!

  • marcelo macorim

    show de bola! e muito simples e bem facim de entender

    • http://www.andrebuzzo.com.br André Buzzo

      Faaaaaaaaaaaaala Marcelo!

      Bem fácil não é mesmo?

      Abraços!

  • Samara

    Ajudou muito, vlw!

    • http://www.andrebuzzo.com.br André Buzzo

      Olá Samara!

      Fico feliz em poder ajudar!

      Abraços!

  • Joemil

    ola pessoal, sou programador Desktop (Delphi) e to entrando no mundo web tb.

    adorei este post. nao achei q era tao facil assim kakaka

    valeu Andre, ja vou colocar o blog nos favoritos. t+

    uma dica (ainda nao procurei no site): teria como vc postar um input text pra datas, com calendario? tem posts sobre JQuery?

    se ja tiver, so informe q assim q tiver mais tempo vou “vasculhar” o blog hehehe

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Joemil!

      Vamos lá meu amigo: o esquema para os calendários já existem nativamente em HTML5; pena que alguns navegadores ainda não o entendem. Quando cito “alguns navegadores”, quero deixar claro que é o Internet Explorer ok?

      Nesse site tem um belo exemplo sobre quais navegadores suportam determinadas entradas nos campos inputs: http://www.w3schools.com/html/html5_form_input_types.asp

      Em relação a jQuery, infelizmente, eu não tenho material disponível aqui no site não..vergonhosamente eu não tenho…

      Abraços!

  • Pingback: Balanço 2011 | André Buzzo()

  • http://www.cjpcturbo.blogspot.com Cícero Joceilton

    Bom demais, valeu mesmo kara

    • http://www.andrebuzzo.com.br André Buzzo

      Opa Cícero!

      Disponha!

  • Henrique Congo

    Muito obrigado.

    Sou angolano, estudante do curso de engenharia informatica é a primeira vez que visito o site e é muito útil.
    Ajudou-me mesmo muito, no meu projecto da Faculdade.

    Valeu “como voces dizem”

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Henrique!

      O meu amigo, eu que fico feliz em poder lhe ajudar de alguma maneira! Seja sempre bem-vindo!

      Forte abraço pro povo angolano!

      Até mais!

  • Domingos Gabriel de Lemos

    Olá pessoal estou entrando na onda de HTML e acredito que estou no site certo…

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Domingos!

      Eu espero que sim meu velho!!

      Abraços!

  • Genival

    Olá, amigo, estou com um problema. Tô criando um site via wix e eles ainda não tem uma caixa de busca e o problema é que não dão o html pra gente editar. Eu to precisando muito de uma caixa de busca. Essa que você esplicou estaria ótima, mas não consigo colocar la. Tem uma opçao de colocar um html no site, ja fiz colocando a caixa simples, nem testei se funciona nada. Mas ao usar o código css editado não dá certo (logico).
    Poderia me ajudar a implantar essa caixa de busca no site.
    Genival
    Desde já agradeço

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Genival.

      Meu amigo, aí é o caso de entrar em contato com a Wix e tentar resolver o problema. Para ser bem sincero, eu acho que os sites deles são em flash. Por isso que você não consegue editar “html” ou “css” do mesmo!

      Abraços!

  • marcelo everson

    Em resposta ao Guilherme Costa!!

    você deverá colocar no css….

    input:focus {
    outline: none;
    }

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Marcelo!

      Obrigado pela participação meu amigo!

      Abraços!

  • Edson Oliveira

    Eu tava procurando isso faz um tempo e não achava que era tão simples.
    Valeu Cara pela ajuda,otima explicação.

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Edson!!

      Obrigado meu velho!!!

      Abraços!

  • Guilherme Costa

    nao tenho nao cara, mas tudo bem, com a enorme ajuda q vc me deu em como estilizar formularios, já sou muito grato !!!!
    valew abraço

    • http://www.andrebuzzo.com.br André Buzzo

      Eu que agradeço meu velho!!

      Abraços!

  • Guilherme Costa

    na verdade nao é brilho e sim borda, todo formulario possue por padrão, e mesmo colocando uma borda “no formulario”, quando o seleciono e clico para escrever essa borda aparece sobrepondo a que coloquei ( para entender melhor clique em um formulario ai vc vai entender kkk)
    ficou meio confusso minha explicação mas é isso ai kkk, espero q tenha intendido !!!

    mas então caso tenha entendido, vc sabe como tirar essa borda ???

    • http://www.andrebuzzo.com.br André Buzzo

      Hahahahaha…. não entendi não meu velho…tem algum link para me enviar?

      Abraços!

  • Guilherme Costa

    só mais uma pergunta, como tiro aquele brilho amarelo no canto dos formularios ??

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Guilherme!!

      Fico feliz em poder lhe ajudar, mas que brilho amarelo meu velho?

      Abraços!

  • Guilherme Costa

    valew em andre por ter me indicado esse “pequeno tutorial, mas de grande ajuda” me ajudou e muito, agradeço infinitamente, tiro uma enorme duvida minha, agora posso fazer formularios mais proficionais para meus projetos !!!!!

  • Thiago Cardoso

    Fala André? Amigão.

    td beleza?
    Super legal esse conceito de Formulário em CSS.
    Nem sabia que isso era possivel. até eu ver seus videos Tutoriais, muito locos.
    Espero poder ver mais….

    abraços

    • http://www.andrebuzzo.com.br André Buzzo

      Fala Waterboy!!

      Ô meu velho!! Fico feliz em saber que lhe ajudou e isso quebra um galho legal também para o usuário!! É uma troca justa!

      Ajudamos designers que ajudam usuários!!! rs

      Abraços!

  • Jacson Leite

    Legal André, não conhecia essa formatação: focus fica muito bonito e ajuda na acessibilidade mesmo. É só saber combinar com o site.
    Abraços!

    • http://www.andrebuzzo.com.br André Buzzo

      É isso … acessibilidade sempre!! rs

      Abraços!

  • Milton

    Muito bom, muito bem explicado, impossível não entender.
    Voce está de parabens.
    Obrigado

    • http://www.andrebuzzo.com.br André Buzzo

      Obrigado Milton!!!

      Valeu pela visita!!

      Abraços!

  • KelvenColares

    Hehe, gostei desse post, por aí tão faltando esses posts de Css mesmo e esse é muito bom, simples de fazer mas muito legal, além de ser bem prático. Vlw ae André!

    • http://www.andrebuzzo.com.br André Buzzo

      Valeu Kelven!!

      É simples mas quebra um galhão!! rs

      Abraços!

  • Guilherme F.

    Como sempre ajudando o pessoal, valeu pela explicação André!

    • http://www.andrebuzzo.com.br André Buzzo

      Que isso cara!!

      Valeu pela visita e pelo comentário!!

      Abraços!

  • Tulio

    OPAAA!, Mais uma vez ajudou Muito ai Cara, Vlw!

    • http://www.andrebuzzo.com.br André Buzzo

      Disponha Tulio!!

      Abraços meu velho!