Passo 1:
As cores de fundo das caixas de texto e algumas outras propriedades se manipulam muitas vezes utilizando folhas de estilo. Neste primeiro passo, será feito de forma bastante simples. Coloque este script no head <head> xxx
</head>
<script>
function
form_um(num_form,num_elem_form,cor_entrada) {
document.forms[num_form].elements[num_elem_form].style.backgroundColor=cor_entrada;
document.forms[num_form].elements[num_elem_form].focus();
}
function form_dois(num_form,num_elem_form,cor_default) {
document.forms[num_form].elements[num_elem_form].style.backgroundColor=cor_default;
}
</script>
Passo 2:
Agregamos o código da seguinte maneira:
<form method="post" action="" name="meuformulario">
<p>
<input type="text" name="campo1" onMouseOver="form_um(0,0,'Lavender');"
onMouseOut="form_dois(0,0,'ffffff');" class="caixa"
>
<br>
<input type="text" name="campo2"
onMouseOver="form_um(0,1,'red');" onMouseOut="form_dois(0,1,'ffffff');"
class="caixa">
<br>
<textarea name="campo3"
onMouseOver="form_um(0,2,'blue');" onMouseOut="form_dois(0,2,'ffffff');"
class="caixa"></textarea>
<br>
<select name="campo4"
onMouseOver="form_um(0,3,'cccccc');" onMouseOut="form_dois(0,3,'ffffff');"
class="caixa">
<option value="1">um</option>
<option
value="2">dois</option>
<option
value="3">tres</option>
<option
value="4">quatro</option>
<option
value="5">cinco</option>
</select>
</form>
| O resultado é o seguinte: |
Até este ponto vemos que nosso formulário se vê bastante convencional, para melhorar um pouco nossa apresentação, deve-se incluir código de estilo, como o que segue:
Passo 3:
Colocar este script no head <head> xxx
</head>:
<style type="text/css">
<!--
.caixa
{
PADDING-RIGHT: 0.1em; PADDING-LEFT: 0.1em; PADDING-BOTTOM: 0.1em; FONT: 9pt
"Verdana, Tahoma, Arial"; MARGIN-LEFT: 0.1em; PADDING-TOP: 0.1em;
BACKGROUND-COLOR: #FFFFF0; TEXT-ALIGN: left
}
.boton {
BORDER-RIGHT:
#000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 11px; BACKGROUND:
#FFFFF0; BORDER-LEFT: #000000 1px solid; COLOR: #000000; BORDER-BOTTOM: #000000
1px solid; FONT-STYLE: normal; FONT-FAMILY: verdana, arial, "trebuchet MS",
helvetica, sans-serif
}
-->
</style>
Passo 4:
O que falta fazer é somente o link dos objetos
do formulário com o respectivo estilo que desejarmos. Então, o código
ficaria assim como segue e o resultado se vê no seguinte quadro.
| O resultado 2 é o seguinte: |
As funções form_um e form2 se explicam a seguir:
function
form_um(num_form,num_elem_form,cor_entrada)
Os 2 primeiros parâmetros correspondem a números que representam a um formulário (num_form), você pode observar que o primeiro formulário se chama meuformulario e o segundo
meuformulario2, ao invés de empregar estes nomes, se empregam valores numéricos, o
seguinte parâmetro representa um objeto de tal formulário (num_elem_form) e
o terceiro parâmetro representa um valor de uma cor ou seu respectivo nome.
O corpo de cada função corresponde à manipulação das propriedades dos objetos dos formulários.
| Referência: Para entender melhor parte do código Javascript, recomenda-se ler o manual Programação em Javascript II. |
