Formatando formulários com CSS

Publicado em: Artigos | Tutoriais | Com 32.762 visitas e atualmente com 38 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!

Voltar à página anterior!

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

Hospedagem excelente!

Os melhores cursos você encontra aqui!

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

Atenção: os comentários, antes de serem publicados, passar por um processo de "moderação". Obrigado!

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

  • Disponha Tulio!!

    Abraços meu velho!

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

  • Que isso cara!!

    Valeu pela visita e pelo comentário!!

    Abraços!

  • 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é!

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

  • Valeu Kelven!!

    É simples mas quebra um galhão!! rs

    Abraços!

  • Obrigado Milton!!!

    Valeu pela visita!!

    Abraços!

  • 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!

  • É isso … acessibilidade sempre!! rs

    Abraços!

  • 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

  • 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!

  • 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 !!!!!

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

  • Fala Guilherme!!

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

    Abraços!

  • 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 ???

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

    Abraços!

  • 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

  • Eu que agradeço meu velho!!

    Abraços!

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

  • Fala Edson!!

    Obrigado meu velho!!!

    Abraços!

  • Em resposta ao Guilherme Costa!!

    você deverá colocar no css….

    input:focus {
    outline: none;
    }

  • Fala Marcelo!

    Obrigado pela participação meu amigo!

    Abraços!

  • 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

  • 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!

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

  • Fala Domingos!

    Eu espero que sim meu velho!!

    Abraços!

  • 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”

  • 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!

  • Bom demais, valeu mesmo kara

  • Opa Cícero!

    Disponha!

  • [...] formatassem um formulário via CSS. Uma das pessoas que estudam com ela encontrou meu artigo sobre a formatação de formulários, e o indicou. Quando ela viu meu nome, ela pensou conhecer um cidadão com o mesmo [...]

  • 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

  • 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!

  • Ajudou muito, vlw!

  • Olá Samara!

    Fico feliz em poder ajudar!

    Abraços!

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

  • Faaaaaaaaaaaaala Marcelo!

    Bem fácil não é mesmo?

    Abraços!

Poste um comentário!