Aplicando automáticamente Eventos Js e CSS em seus formulários
Veremos como deixar um formulário HTML um pouco mais agradável de se ver, a idéia é fazermos isso de forma simples sem perder produtividade.
Penso eu que é simples criar um formulário HTML e definir no CSS como ele será apresentado na página, por outro lado vejo que levaria muito tempo caso tenhamos ‘N’ formulários para defini-los em CSS e mesmo assim queremos colocar algum tipo de efeito do tipo:
- mudar cor da borda ao selecionar o campo
- mudar cor/tom da fonte ao selecionar ou tirar o foco de campos
- padronizar os campos com imagens de fundo e bordas
- padronizar botoes do tipo submit e reset entre outros possíveis
Bem, esses são alguns exemplos que podemos aplicar…
Lembrando que a idéia é tornar produtivo, fácil e um pouco agradável de se ver, mas isso vai depender do gosto de cada um. não é ?
Certo, a proposta é a seguinte:
- Criar um formulário HTML e deixar o código puro, sem chamadas de eventos JS ou definição de classes CSS no HTML, ou seja, você escreve o formulário HTML e pronto, esqueça os efeitos CSS e JS para eles.
E como é isso?
Bem, pensei no seguinte, uma função JavaScript que lê o código HTML localiza e aplica os eventos e definições CSS em todo o código, independente da quantidade de elementos no formulário.
Isso pode ser feito apenas aplicando uma configuração padrão para formulários no CSS?
Algumas coisas sim, outras não!
O que pode ser feitos apenas aplicando CSS para todos os formulários?
- Penso eu que podemos aplicar fundo, bordas e tudo relacionado ao CSS, mas não eventos.
Então para ter uma idéia do que estamos falando veja esse exemplo e imagine você escrevendo ’N’ formulários e essas propriedades, definições e eventos sendo aplicados automáticamente à todos os novos formulários que criar.
O Formulário HTML
<html>
<head>
<title>Niceforms</title>
<script src=”js/niceform.js“ type=”text/javascript“></script>
<link href=”css/niceform.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<form name=”f” id=”f“>
<fieldset>
<legend>Dados do usuário</legend>
<label for=”nome“>Nome:</label>
<input type=”text” name=”nome” id=”nome” />
<label for=”email“>E-mail:</label>
<input type=”text” name=”email” id=”email” />
<p> </p>
<input type=”submit” name=”cad” id=”cad” value=”Cadastrar” />
<input type=”reset” name=”res” id=”res” value=”Limpar” />
</fieldset>
</form>
</body>
</html>
A definição CSS – Arquivo niceforms.css
p
{
margin:0px;
}
label
{
display:block;
font:12px verdana;
color:#666;
margin:2px;
margin-top:10px;
cursor:pointer;
}
fieldset
{
width:250px;
padding:15px;
}
legend
{
width:70%;
background-color:#dde;
border:0px solid #dcdcdc;
padding:5px;
margin:0px;
font:14px ‘Trebuchet MS’;
color:#666;
text-align:center;
}
.out
{
border:1px solid #dcdcdc;
padding:2px;
font:16px verdana;
color:#666;
background:url(../images/l-r.png) no-repeat 0 0;
}
.in
{
border:1px solid #93C7DA;
padding:2px;
font:16px verdana;
color:#000;
background:url(../images/i-r.png) no-repeat 100% 0;
}
.btnsub
{
border:1px solid #dcdcdc;
padding:2px;
font:12px verdana;
color:#333;
background:url(../images/i-r.png) no-repeat 99% 0;
}
Funções Javascript – o arquivo niceforms.js
function niceForms()
{
// Obtendo os elementos input do documento
inputs = document.getElementsByTagName(‘input‘)
// Recuperando o total de tags input
total= inputs.length;
for(i=0; i<=total-1; i++)
{
// Verificando o tipo para cada input encontrado
tipo = inputs[i].type
// Recuperando o id de cada input
this.id = inputs[i].id
// Verificando se o input é do tipo text ou password
if(tipo == ‘text‘ || tipo == ‘password‘)
{
// Armazenando em obj as propriedades de cada input do tipo text
obj = document.getElementById(this.id)
// Aplicando a classe CSS em cada input text
obj.className = ‘out‘
// Adicionando evendo onclick em cada input text
obj.onclick = function()
{
// Comandos que serao executados no onclick
obj = document.getElementById(this.id)
// Aplicando a classe CSS no envento
obj.className = ‘in‘
}
// Adicionando evendo onblur (perder foco) em cada input text
obj.onblur = function()
{
// Comandos que serao executados no onblur
obj = document.getElementById(this.id)
// Aplicando a classe CSS no envento
obj.className = ‘out‘
}
} // Fim da verificacao do tipo text
// Inicio da verificacao dos tipos submit ou reset
if(tipo == ‘submit‘ || tipo == ‘reset‘)
{
obj = document.getElementById(this.id)
obj.className = ‘btnsub‘
}
} // Fim da verificacao do tipo submit ou reset
} // Fim do laco FOR
// Apos o carregamento total da pagina a funcao sera chamada
window.onload = function()
{
niceForms()
}
Um ponto importante a ser reparado no JavaScript é o this.id, com a referência ‘this’ estamos dizendo que é para aplicar à cada id encontrado, se não houvesse a referência ‘this’ o laço terminaria e aplicaria apenas ao último id encontrado.
Ok, temos os 3 arquivos necessários para exibir formulários como no exemplo acima, vamos falar um pouco sobre isso.
Resumidamente a idéia é que possamos criar formulários como no código HTML do exemplo sem nos preocupar em como ele irá aparecer, o que temos que fazer é apenas incluir/fazer a chamada aos arquivos CSS e JS em cada página que contiver um formulário.
Por exemplo eu dedico mais meu tempo na programação PHP (modelo, visao e controle) ao mesmo tempo que quero testar meus códigos em um ambiente com o mínimo agradável possível, por isso utilizo esse método para não ficar perdendo tempo na hora errada com CSS, não que possamos abandonar essa etapa mas podemos pensar menos nela no momento do desenvolvimento do código principal.
Outra intenção nesse exemplo é deixar o HTML o mais limpo possível sem chamadas à métodos js ou classes css. Pense nesse exemplo associado ao um outro post (veja aqui) onde mostramos exemplos simples de como adicionar eventos em elementos HTML sem fazer a chamada à eles no próprio HTML, ou seja, deixando-o limpo e puro.
Use sua imaginação e criatividade para explorar ao máximo os recursos do JS e CSS sem precisar poluir o HTML.
Não esqueça, a idéia é criar formulários e deixar que o JS e CSS aplique suas definições de aparência de forma automática tentanto aumentar sua produtividade, melhorando seu ambiente de testes e projeto final.
Exemplo do formulário | Download dos fontes
É isso pessoal, um post enorme para uma coisa tão simples mas estão aí minhas visões de melhorias. ha-ha
Espero que gostem do resultado!
Abraços,
