Wiki Cursos IFPR Foz:Sobre

De Wiki Cursos IFPR Foz
Revisão de 17h41min de 15 de agosto de 2013 por Cristian castro (discussão | contribs) (Aula CSS !)
(dif) ← Edição anterior | Revisão atual (dif) | Versão posterior → (dif)
Ir para navegaçãoIr para pesquisar

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.