Wiki Cursos IFPR Foz:Sobre
Aula CSS
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 um código fonte Usando a Tag <INPUT>
<html>
<head> <meta charset="utf-8"> <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"> - Aqui um exemplo de RadioButton com a tag do tipo 'radio'.
</form>
<form name="form2" method="post" action="">
<input type="checkbox" name="checkbox"
value="checkbox"> - Aqui um exemplo de checkbox .
</form>
<form name="form3" method="post" action="">
<input type="text" name="textfield"> - Aqui um exemplo de caixa de diálogos usando a tag 'text'.
</form>
<form name="form4" method="post" action="">
<input type="submit" name="Submit"
value="Enviar"> - Aqui um exemplo do comando 'submit' .
</form>
</body>
</html>
Compile este código e terá o resultado .
Estilo CSS na tag <select>
<html>
<head>
<style type="text/css">
select {
background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
} </style>
</head>
<body>
TAG SELECT
<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>
Compile o código fonte e terá o resultado
Estilo CSS na tag <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>
Compile o códito e terá o resultado.
Estilo CSS na tag <form>
<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>
Compile o código e terá o resultado.
