Banner propaganda da DevMedia - Cursos de desenvolvimento web

Estilos CSS em controles de formulários

Publicado em: 15/12/2003

As tags HTML para formulários e sua estilização com CSS

Os diferentes tipos de formulários que você insere em seu documento HTML são apresentados com um formato e cores padrão, que nem sempre estão de acordo com o projeto visual da sua página.

Com uso de CSS você pode alterar a apresentação dos diferentes objetos de formulário.

Neste tutorial mostrarei as regras CSS, básicas que permitem o controle sobre a apresentação dos formulários.

As tags HTML para formulários abordadas são as listadas abaixo:

  • input;
  • select;
  • textarea;
  • form;

E um exemplo completo:

  • E como exemplo prático de aplicação de estilo em formulários veremos como estilizar um formulário para login.

Como estudar e entender os exemplos

Para cada tag a estilizar, apresento as regras CSS para um elemento HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

Estilo CSS na tag <input>

Abaixo os objetos de formulário do tipo input com sua apresentação (visual) default.

As tags input dos formulários, sem estilização

A seguir a folha de estilo incorporada e o código HTML, para os objetos input.

<html>
<head>
<style type="text/css">
input { 
background-color: #B0E0E6; 
font: 12px verdana, arial, helvetica, sans-serif;
color:#003399;
border:2px solid #000099;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input type="radio" name="radiobutton"
 value="radiobutton">
</form>
<form name="form2" method="post" action="">
<input type="checkbox" name="checkbox"
 value="checkbox">
</form>
<form name="form3" method="post" action="">
<input type="text" name="textfield">
</form>
<form name="form4" method="post" action="">
<input type="submit" name="Submit" 
value="Enviar">
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, nos objetos de formulário:

As tags input do formulário, com estilização

Estilo CSS na tag <select>

Abaixo o objeto de formulário do tipo select com sua apresentação (visual) default.

A tag select sem estilização

A seguir a folha de estilo incorporada e o código HTML, para os objeto select

<html>
<head>
<style type="text/css">
select { 
background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
}
</style>
</head>
<body>
<form name="form5" 
method="post" action="">
<select name="select">
<option value="item_1">
item_1 da lista</option>
<option value="item_1">
item_2 da lista</option>
<option value="item_1">
item_3 da lista</option>
<option value="item_1">
item_4 da lista</option>
</select>
</form>

</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário select

A tag select estilizada

Nota: Até esta data, não há como estilizar com CSS, a setinha do select.

Estilo CSS na tag <textarea>

Abaixo o objeto de formulário do tipo textarea com sua apresentação (visual) default.

A tag textarea sem estilização

A seguir a folha de estilo incorporada e o código HTML, para os objeto textarea

<html>
<head>
<style type="text/css">
textarea { 
background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
}
</style>
</head>
<body>
<form name="form6" method="post" action="">
<textarea name="textarea" rows="9"></textarea>
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário textarea

A tag textarea estilizada

Estilo CSS em formulário para LOGIN

O formulário login padrão

Abaixo o código HTML e o objeto de formulário do tipo login padrão, com sua apresentação (visual) default.

<form name="login"method="post" action="#"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15"/> 
<input type="submit" name="Submit" value="OK" tabindex="3"> 
</label> 
</form>
Formulário de login sem estilização

1o. passo: Dimensionar e aplicar um fundo no formulário

Vamos assumir que nosso formulário terá 380 pixels de largura total e um fundo na cor bege (#FFFFCC).

Para estilizar o formulário criamos uma classe (vamos denominá-la .login) a ser aplicada na tag form e em consequência teremos um seletor de classe com esta sintaxe: form.login

Observe o código a seguir:

<html>
<head>
<style type="text/css">
form.login { 
background-color: #FFFFCC; 
width:380px;}
</style>
</head>
<body>
<form name="login"method="post" action="#" class="login"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15"> 
<input type="submit" name="Submit" value="OK" tabindex="3"> 
</label> 
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário login

Formulário de login com estilização no fundo

2o. passo: Estilizar as letras e aplicar uma borda no formulário

Vamos definir tipo e cor de letra, colocar uma borda e um espaçamento a esquerda.

Observe estas novas regras acresentadas no código a seguir:

<html>
<head>
<style type="text/css">
form.login { background-color: #FFFFCC; 
width:380px;
font: 11px Verdana, sans-serif;
color: #003399;
border: 2px solid #0000FF;
padding-left:10px;
}
</style>
</head>
<body>
<form name="login"method="post" 
action="#" class="login"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15"> 
<input type="submit" name="Submit" value="OK" tabindex="3"> 
</label> 
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário login

Formulário de login com estilização no fundo e nas fontes

3o. passo: Estilizar as tags <input> "usuário" e "senha"

Vamos assumir que estes campos terão um fundo em tom azul médio (#B0E0E6) e as letras tom azul claro (#0033CC).

Uma margem direira de 20 px irá separar o campo senha do botão OK.

Para estilizar estes campos criamos uma classe (vamos denominá-la .campos) a ser aplicada na tag input do usuário e da senha.

Observe estas novas regras acresentadas no código a seguir:

<html>
<head>
<style type="text/css">
form.login {
 background-color: #FFFFCC; 
width:380px;
font: 11px Verdana, sans-serif;
color: #003399;
border: 2px solid #0000FF;
padding-left:10px;
}
.campos {
background-color:#B0E0E6;
font: 11px georgia, sans-serif;
color:#0033CC;
margin-right: 20px;
}
</style>
</head>
<body>
<form name="login"method="post" action="#" class="login"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15" class="campos"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15" class="campos"> 
<input type="submit" name="Submit" value="OK" tabindex="3"> 
</label> 
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário login

Formulário de login com estilização no fundo, fontes e campos

4o. passo: Estilizar a tag <input> "botão OK"

Vamos assumir que o botão terá uma cor em tom avermelhado escuro (#CC3300) e as letras tom azul claro (#CCFFFF).

Observe estas novas regras acresentadas no código a seguir:

<html>
<head>
<style type="text/css">
form.login {
 background-color: #FFFFCC; 
width:380px;
font: 11px Verdana, sans-serif;
color: #003399;
border: 2px solid #0000FF;
padding-left:10px;
}
.campos {
background-color:#B0E0E6; 
font: 11px georgia, sans-serif;
color:#0033CC;margin-right: 20px;
}
.botao {
background-color: #CC3300;
font: 10px Arial, sans-serif;
color: #CCFFFF;
}
</style>
</head>
<body>
<form name="login"method="post" action="#" class="login"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15" class="campos"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15" class="campos"> 
<input type="submit" name="Submit" value="OK" tabindex="3" class="botao"> 
</label> 
</form>
</body>
</html>

Este é o efeito final da aplicação de estilo, no objeto de formulário login

Formulário de login com estilização final

Neste tutorial mostrei as linhas gerais da técnica pra estilizar formulários

O entendimento do que foi exposto propiciará a você, criar uma série de outros efeitos bastante interessantes na estilização de formulários.

Como seu primeiro exercício, sugiro estilizar este mesmo formulário de login de modo a que ele fique disposto na vertical. Usuário na primeira linha, senha na segunda linha e botão na terceira linha.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo