SlideShare une entreprise Scribd logo
1  sur  7
Télécharger pour lire hors ligne
HTML E CSS PARA FORMULÁRIOS: SUGESTÕES
Formulários fazem parte da vida de todos os designers e desenvolvedores web. Não
necessariamente uma parte interessante.
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. Este estilo de código
você não verá no meu formulário de contato, pois no caso do Wordpress estou utilizando um plugin
(mas em todos os sites de clientes utilizo o modelo descrito aqui).
COMEÇANDO COM O CÓDIGO HTML
Todo formulário comeca com uma tag form:
1 <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:
1
2
3
4
5
<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:
1
2
3
4
<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 o foco no campo escolhido. A
vantagem de ter as divs com a classe "campo" ficará mais evidente quando fizermos as CSS dos
formulário.
A tag fieldset que vimos antes também será utilizada para agrupar campos lado a lado, através da
classe "grupo":
1
2
3
4
5
6
<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>
7
8
9
10
<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):
1
2
3
4
5
6
<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:
1 <button type="submit" class="botao submit">Enviar</button>
Com isso, temos o HTML completo do nosso formulário:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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 New
</label>
</div>
<button type="submit" name="submit">Enviar</button>
</fieldset>
</form>
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
padding, 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
propriedadeclear, assim finalizando qualquer flutuação dentro deste:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
* {
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;
}
17
18
19
20
21
22
.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:
1
2
3
4
5
6
7
8
9
.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:
1
2
3
4
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 alguuns 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 quanto o usuário
irá preencher os campos (quando eles entram em foco):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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 de
comportem conforme desejado:
1
2
3
4
5
.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 mudança de cursor:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
* {
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;
}
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
.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;
}
69
70
71
.botao, select, label.checkbox {
cursor: pointer;
}
www. empalamado.com

Contenu connexe

Tendances (17)

Html Capitulo 12
Html   Capitulo 12Html   Capitulo 12
Html Capitulo 12
 
RCOM 11º Ano - HTML
RCOM 11º Ano - HTMLRCOM 11º Ano - HTML
RCOM 11º Ano - HTML
 
4 si introdução ao desenvolvimento web - formulários (pt 1)
4   si introdução ao desenvolvimento web - formulários (pt 1)4   si introdução ao desenvolvimento web - formulários (pt 1)
4 si introdução ao desenvolvimento web - formulários (pt 1)
 
Curso básico de word - volume 03/04
Curso básico de word - volume 03/04Curso básico de word - volume 03/04
Curso básico de word - volume 03/04
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Html
HtmlHtml
Html
 
Aula1
Aula1Aula1
Aula1
 
Word - separadores - tarefas
Word - separadores - tarefasWord - separadores - tarefas
Word - separadores - tarefas
 
Html aula 15 - CSS, Tabelas e Listas
Html aula 15 - CSS, Tabelas e ListasHtml aula 15 - CSS, Tabelas e Listas
Html aula 15 - CSS, Tabelas e Listas
 
Word Aula 12
Word Aula 12Word Aula 12
Word Aula 12
 
Versao 28668
Versao 28668Versao 28668
Versao 28668
 
E proinfo slide
E proinfo slideE proinfo slide
E proinfo slide
 
Html
HtmlHtml
Html
 
1. manual portal padrao
1. manual portal padrao1. manual portal padrao
1. manual portal padrao
 
1. manual portal_padra_yo
1. manual portal_padra_yo1. manual portal_padra_yo
1. manual portal_padra_yo
 
Manual completo de_procedimentos_broffice
Manual completo de_procedimentos_brofficeManual completo de_procedimentos_broffice
Manual completo de_procedimentos_broffice
 
Curso de html
Curso de htmlCurso de html
Curso de html
 

En vedette

Edición de imágenes con editor en línea
Edición de imágenes con editor en líneaEdición de imágenes con editor en línea
Edición de imágenes con editor en líneatepalomar
 
Los chicos-de-la-callePaul-
 Los chicos-de-la-callePaul- Los chicos-de-la-callePaul-
Los chicos-de-la-callePaul- murs Urs
 
Diã¡logos com marilena chauã
Diã¡logos com marilena chauã Diã¡logos com marilena chauã
Diã¡logos com marilena chauã Vanessa Zaniol
 
LANÇAMENTO IGARAPAVA 53 - LEBLON - RJ - Venda - Apartamentos - (21) 96503 000...
LANÇAMENTO IGARAPAVA 53 - LEBLON - RJ - Venda - Apartamentos - (21) 96503 000...LANÇAMENTO IGARAPAVA 53 - LEBLON - RJ - Venda - Apartamentos - (21) 96503 000...
LANÇAMENTO IGARAPAVA 53 - LEBLON - RJ - Venda - Apartamentos - (21) 96503 000...Soraya Cardoso
 
Navidad 2011
Navidad 2011Navidad 2011
Navidad 2011sanjose1
 

En vedette (8)

Edición de imágenes con editor en línea
Edición de imágenes con editor en líneaEdición de imágenes con editor en línea
Edición de imágenes con editor en línea
 
Los chicos-de-la-callePaul-
 Los chicos-de-la-callePaul- Los chicos-de-la-callePaul-
Los chicos-de-la-callePaul-
 
Diã¡logos com marilena chauã
Diã¡logos com marilena chauã Diã¡logos com marilena chauã
Diã¡logos com marilena chauã
 
Carta raciones Restaurante Manolín Valladolid
Carta raciones Restaurante Manolín ValladolidCarta raciones Restaurante Manolín Valladolid
Carta raciones Restaurante Manolín Valladolid
 
Ba33301306
Ba33301306Ba33301306
Ba33301306
 
Arduino user manual_es
Arduino user manual_esArduino user manual_es
Arduino user manual_es
 
LANÇAMENTO IGARAPAVA 53 - LEBLON - RJ - Venda - Apartamentos - (21) 96503 000...
LANÇAMENTO IGARAPAVA 53 - LEBLON - RJ - Venda - Apartamentos - (21) 96503 000...LANÇAMENTO IGARAPAVA 53 - LEBLON - RJ - Venda - Apartamentos - (21) 96503 000...
LANÇAMENTO IGARAPAVA 53 - LEBLON - RJ - Venda - Apartamentos - (21) 96503 000...
 
Navidad 2011
Navidad 2011Navidad 2011
Navidad 2011
 

Similaire à Html e css para formulários

Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2paulofa
 
SUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilosSUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilosJoão Paulo Barbosa Neto
 
Construindo Sistemas Com Django
Construindo Sistemas Com DjangoConstruindo Sistemas Com Django
Construindo Sistemas Com DjangoMarinho Brandão
 
H T M L Capitulo 12
H T M L    Capitulo 12H T M L    Capitulo 12
H T M L Capitulo 12oseias1993
 
H T M L Capitulo 12
H T M L    Capitulo 12H T M L    Capitulo 12
H T M L Capitulo 12oseias1993
 
Cadastro de clientes em c#
Cadastro de clientes em c#Cadastro de clientes em c#
Cadastro de clientes em c#André Luiz
 
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoCurso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoTiago Antônio da Silva
 
Html - capitulo 12
Html - capitulo 12Html - capitulo 12
Html - capitulo 12Alvaro Gomes
 
Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )Rodrigo Dias
 
Programação web ii aulas 08 e 09
Programação web ii   aulas 08 e 09Programação web ii   aulas 08 e 09
Programação web ii aulas 08 e 09Yuri Bispo
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Marcelo Mattos
 
Django + extjs pelos forms
Django + extjs pelos formsDjango + extjs pelos forms
Django + extjs pelos formsMoacir Filho
 

Similaire à Html e css para formulários (20)

Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2
 
SUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilosSUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilos
 
Construindo Sistemas Com Django
Construindo Sistemas Com DjangoConstruindo Sistemas Com Django
Construindo Sistemas Com Django
 
Aula 09
Aula 09Aula 09
Aula 09
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
H T M L Capitulo 12
H T M L    Capitulo 12H T M L    Capitulo 12
H T M L Capitulo 12
 
H T M L Capitulo 12
H T M L    Capitulo 12H T M L    Capitulo 12
H T M L Capitulo 12
 
Cadastro de clientes em c#
Cadastro de clientes em c#Cadastro de clientes em c#
Cadastro de clientes em c#
 
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoCurso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
 
Ambiente web 12
Ambiente web 12Ambiente web 12
Ambiente web 12
 
Html - capitulo 12
Html - capitulo 12Html - capitulo 12
Html - capitulo 12
 
Introdução ao PHP Parte 1
Introdução ao PHP Parte 1Introdução ao PHP Parte 1
Introdução ao PHP Parte 1
 
Básico PHP: Introdução HTML
Básico PHP: Introdução HTMLBásico PHP: Introdução HTML
Básico PHP: Introdução HTML
 
Formularios
FormulariosFormularios
Formularios
 
Css Curso completo
Css Curso completoCss Curso completo
Css Curso completo
 
Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )
 
Programação web ii aulas 08 e 09
Programação web ii   aulas 08 e 09Programação web ii   aulas 08 e 09
Programação web ii aulas 08 e 09
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
 
Django + extjs pelos forms
Django + extjs pelos formsDjango + extjs pelos forms
Django + extjs pelos forms
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 

Html e css para formulários

  • 1. HTML E CSS PARA FORMULÁRIOS: SUGESTÕES Formulários fazem parte da vida de todos os designers e desenvolvedores web. Não necessariamente uma parte interessante. 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. Este estilo de código você não verá no meu formulário de contato, pois no caso do Wordpress estou utilizando um plugin (mas em todos os sites de clientes utilizo o modelo descrito aqui). COMEÇANDO COM O CÓDIGO HTML Todo formulário comeca com uma tag form: 1 <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: 1 2 3 4 5 <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: 1 2 3 4 <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 o foco no campo escolhido. A vantagem de ter as divs com a classe "campo" ficará mais evidente quando fizermos as CSS dos formulário. A tag fieldset que vimos antes também será utilizada para agrupar campos lado a lado, através da classe "grupo": 1 2 3 4 5 6 <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>
  • 2. 7 8 9 10 <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): 1 2 3 4 5 6 <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: 1 <button type="submit" class="botao submit">Enviar</button> Com isso, temos o HTML completo do nosso formulário: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <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>
  • 3. 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <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 New </label> </div> <button type="submit" name="submit">Enviar</button> </fieldset> </form> 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 padding, 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 propriedadeclear, assim finalizando qualquer flutuação dentro deste: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 * { 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; }
  • 4. 17 18 19 20 21 22 .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: 1 2 3 4 5 6 7 8 9 .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: 1 2 3 4 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 alguuns 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 quanto o usuário irá preencher os campos (quando eles entram em foco): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .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; }
  • 5. Para os inputs tipo "radio" e "checkbox", precisaremos de mais alguns estilos para que os campos de comportem conforme desejado: 1 2 3 4 5 .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 mudança de cursor: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .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: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 * { 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; }
  • 6. 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 .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; }
  • 7. 69 70 71 .botao, select, label.checkbox { cursor: pointer; } www. empalamado.com