Dicas simples para dar mais usabilidades aos formulários
Desenvolvedores Web detestam criar formulários quase tanto quanto os usuários detestam preenchê-los, são duas tarefas infelizes da Internet, mas um pouco de JavaScript e CSS inteligente podem amenizar a chatice dessas situações. Neste artigo devo mostrar algumas dicas simples de como melhorar a usabilidade dos formulários e esperançosamente, inspirá-lo para que você possa criar seus próprios.
Parte 3: Melhorando os campos de entrada de texto
A forma mais comum de um campo texto é: <input type="text">. Nós já vimos como o auto-foco dos campos no carregamento da página é uma boa melhora. Um truque útil para campos que devem iniciar com um valor padrão que serão posteriormente alterados é o seguinte:
<input type="text" name="myfield" id="myfield" size="30"
value="This should be changed"
onfocus="this.select()">
value="This should be changed"
onfocus="this.select()">
Quando o campo receber o foco automaticamente o texto dentro dele é selecionado; ele deverá ser sobrescrito quando o usuário começar a digitar seu próprio texto.
Temos também um truque muito bom que está sendo usado para criar alguma coisa com o título bem óbvio, tipo um e-mail ou um artigo em um WebSite.
<input type="text" name="title" id="title" size="30"
onkeyup="document.title = 'New item: ' + this.value">
onkeyup="document.title = 'New item: ' + this.value">
Isto cria um efeito similar ao encontrado nos mais populares programas de e-mail, onde o texto da barra de título da janela muda conforma o assunto e digitado. Isso pode ser particularmente útil em ambientes onde se abre várias janelas iguais, alguns clientes de webmail, por exemplo.
Em alguns casos é útil que você tenha um campo de formulário que seja preenchido baseado em outro, por exemplo no cadastro de uma pessoa física onde o campo contato é baseado no campo nome.
<input type="text" name="title" id="title" size="30"
onkeydown="document.getElementById('url').value =
this.value.replace(/[^a-z0-9 ]/ig,
'').replace(/ /g, '_')">
<input type="text" name="url" id="url" size="30">
onkeydown="document.getElementById('url').value =
this.value.replace(/[^a-z0-9 ]/ig,
'').replace(/ /g, '_')">
<input type="text" name="url" id="url" size="30">
POww show o artigo.. gostei principalmente do <label> que já tinha visto ele mais nunca dei muita atenção. O PHP => SMARTY quando vc gera formulários com ele ele taca esse "labels".
vlwwwwwwwww