curso html5 e css3

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
<fieldset class="grupo">
<div class="campo">
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome">
</div>

2. 5
6
7
8
9
10
<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):
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
<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>

3. 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
<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"></textar
</div>
<div class="campo">
<label>Newsletter</label>
<label>
<input type="checkbox" name="newsletter" value="1"> Gostaria de receber
</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
* {
margin: 0;
padding: 0;
}
fieldset {
border: 0;
}
body, input, select, textarea, button {
font-family: sans-serif;
font-size: 1em;
}

4. 12
13
14
15
16
17
18
19
20
21
22
.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:
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
.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;
}

5. 14
15
16
17
18
.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
* {
margin: 0;
padding: 0;
}
fieldset {
border: 0;
}
body, input, select, textarea, button {
font-family: sans-serif;

6. 10
11
12
13
14
15
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
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);
}

7. 63
64
65
66
67
68
69
70
71
.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;
}
www. empalamado.com