Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Mudanças nos estados do campos de texto

    Falae pessoal.

    Estou aqui mais uma vez, agora pra mostrar uma técnica simples e muito interessante de ser utilizada em sites. Não chega a ser uma grande utilizadade, mas em relação a estilo, layout, dá um diferencial, um detalhe a mais pro seu site/blog.

    Mostrarei aqui como mudar a aparência dos campos de textos ao estar digitando algum texto e ao sair do modo de edição. Existem vários sites, blogs que utilizam isso. A nova versão do meu blog também está com esse recurso.

    Explicarei em três partes: HTML, CSS e JS. O código é bem curto, no exemplo online, está tudo incorporado no html, mas logicamente, que o melhor jeito é separando o css e o js do html, para ficarmos com tudo organizado e separado.

    Código HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Inputs</title>
    </head>
    <body>
    <form action="" method="post">
    <fieldset>
    <legend>Teste</legend>
    <label for="nome">Nome:</label>
    <input type="text" name="nome" id="nome" class="textbox" onfocus="textOn(this.id)" onblur="textNormal(this.id)" />
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" class="textbox" onfocus="textOn(this.id)" onblur="textNormal(this.id)" />
    </fieldset>
    </form>
    </body>
    </html>

    Nesta parte, falarei somente de algumas linhas, pois outras são extremamente básicas e não convém ficar ensinando HTML básico neste post.

    Utilizei um form, pois é um formulário, dentro dele, coloquei um fieldset, que no doctype do xhtml 1.1 é obrigatório a sua utilização. Dentro do fieldset, coloquei um legend, que serve como legenda para o formulário específicado. Temos os labes e os inputs. Não coloquei nenhum botão pois não é importante neste caso, estou apenas querendo mostrar o truque com os campos de texto.

    Primeiro vamos ver este exemplo online.

    Nos labels, eu utilizei um atributo chamado for, que define, dentro de um formulário, o elemento que ele se refere. No caso atual, o label que contém o texto Nome, tem um for=”nome” e o que contém o texto Email, tem um for=”email”. O atributo for, se refere ao elemento que conter o atributo id igual ao valor do seu valor.
    Ex:
    <label for="nome">Nome:</label>
    <input type="text" name="nome" id="nome" />

    No caso citado, o valor do FOR eh igual a “nome” e dentro do input, o valor do ID eh igual a “nome”, portanto o label se refere a este campo de texto.

    Mas pra que que isso serve Bruno?

    É bom pra arquitetura do site, identificação mais clara dos elementos. Um curiosidade também, que alguns não conhecem, eh que ao clicar no label, o elemento com o mesmo valor de id que o valor do for, ficará selecionado, ou seja, como eh um campo de texto, esse campo ganhará foco. É só testar.

    E o input? Tem uns códigos ali que nunca vi.

    Ok, ok, vamos lá. Segue abaixo a listagem dos atributos que utilizei no input, para melhor compreensão:

    • type=”text”

      Tipo do input. Nem preciso explicar não é? Text eh igual a campo de texto.

    • name=”nome”

      Nada de novidade. O name serve como nome do campo e funciona para o método utilizado no formulário e as linguagens server-side, para o envio dos dados.

    • id=”nome”

      O id serve para “linkar” o campo ao label referente à ele

    • class=”textbox”

      Classe textbox que iremos declarar no css, para estilizar o campo.

    • onfocus=”textOn(this.id)”

      O onfocus serve para vc definir uma ação, evento quando o foco estiver no elemento em que foi setado. No nosso caso, esse atributo chama a função textOn, que está declarada no js que irei comentar mais abaixo e passa como parâmetro, o próprio id.

    • onblur=”textNormal(this.id)”

      Mesma função do onfocus, mas só que ao invés de ser para quando estiver com o foco, serve para quando perder o foco, ou seja, o usuário não estiver digitando texto dentro do campo. E neste atributo, passamos a função textNormal e passamos o próprio id como parâmetro.

    HTML Finalizado

    Nada de surreal no HTML certo? Coisas básicas e simples que utilizei, tirando os atributos onblur e onfocus, que na verdade, também não tem nada demais.

    Código CSS

    Agora iremos pro código CSS, que também não tem nada de avançado, nada demais sendo usado, somente propriedades básicas e simples.
    body {
    background-color: #F5F6F6;
    color: #666666;
    font: 75% "Trebuchet MS";
    }

    fieldset {
    border: 1px solid #999999;
    padding: 5px;
    width: 350px;
    }

    legend { padding: 2px 4px; border: 1px solid #999999; }
    label { display: block; margin: 7px 0 0 7px; cursor: pointer; font-weight: bold; }
    .textbox, .textboxOn {
    display: block;
    margin-left: 7px;
    border: 2px solid #999999;
    background-color: #EFEFEF;
    color: #333333;
    padding: 2px 4px;
    font: 100% "Trebuchet MS";
    width: 150px;
    }

    .textboxOn { border-color: #FF6600; background-color: #F5F6F6; }

    Explicarei cada classe e tag declarada no CSS. Não vou explicar cada linha, pois são coisas básicas. Darei uma passada somente no css, para vocês entenderem.

    Mas antes, vejam este exemplo online.

    Farei uma listagem aqui com as tags e classes:

    • body

      No body, setei somente uma cor de fundo, cor do texto e tamanho e tipo da fonte

    • fieldset

      No fieldset do fomulário, coloquei uma borda cinza sólida com 1px de espessura, um padding de 5px para todos os lados e setei 350px de largura.

    • legend

      Para o legend, coloque um padding de 2px para o topo e a base e 4px para as laterais e coloquei uma borda cinza sólida com 1px de espessura

    • label

      No label, coloquei um display: block, pra ter quebra de linha logo depois dele e pro input ficar abaixo, margem de 7px para o topo e a lateral esquerda, cursor pointer, que eh u cursos da mãozinha/link, porque como ao clicar no label ele da foco para o campo de texto que ele estiver setado no for, entaum mostro isso pro usuário com o cursor e deixei o texto em negrito.

    • .textbox

      Essa classe é a classe no estado normal do campo de texto, quando ele não está com foco. Coloquei um display: block também, para ele quebrar linha antes e depois dele, margem de 7px na lateral esquerda, borda cinza, sólida e com 2px de espessura, um cinza claro para a cor de fundo, um cinza escuro para a cor do texto, um padding de 2px para o topo e base e 4px para as laterais, tamanho e tipo da fonte e tamanho de 150px d largura pro campo de texto.

    • .textboxOn

      Vcs podem perceber que ele foi setado, juntamente, com a classe textbox, porque ela recebe praticamente todas as propriedades da classe textbox. E para naum ficar repetindo tudo novamente, declaro somente o que eh necessário, que nesse caso foi a cor da borda que ficou laranja e a cor de fundo que ficou um cinza mais claro.

    CSS Finalizado

    Podemos perceber que não utilizamos nada de muito especial correto? Declaramos mais tags do que classes. As únicas classes foram para os estados de “on” e “off” do campo de texto.

    Código JS

    Vamos pro javascript agora. Não estou usando nada demais também, nada avançado, nada com muita complexidade. Estou somente utilizando o getElementById.
    <script type="text/javascript">
    function textOn(txt){
    document.getElementById(txt).className="textboxOn";
    }

    function textNormal(txt){
    document.getElementById(txt).className="textbox";
    }
    </script>

    Neste exemplo temos duas funções: textOn e textNormal. Vimos as chamadas dessas funções no html, dentro dos inputs correto? Agora iremos ver o que elas fazem:

    textOn(txt) e textNormal(txt)

    Como podem perceber, essas funções enviam como parâmetro, o txt. Para quem não sabe, uma função passa os parâmetros que estão dentro dos parênteses. Ele pode ficar vazio também, mas ae você teria que setar dentro do javascript o elemento que sofreria a mudança.

    document.getElementById(txt).className="textboxOn";

    Nessa linha, eu pego do html o ID passado no parâmetro txt. Isso varia de acordo com a chamada da função. No nosso formulário, temos duas chamadas nessa função, dentro do onfocus nos inputs. Vamos vê-los novamente?

    • id="nome" class="textbox" onfocus="textOn(this.id)"

      Setamos o ID como “nome” e dentro da chamada, setamos o ID dele próprio. O this significa que ele chama a si mesmo o .id significa “meu ID”.

    • id="email" class="textbox" onfocus="textOn(this.id)"

      Setamos o ID como “email” e dentro da chamada, setamos o ID dele próprio. O this significa que ele chama a si mesmo o .id significa “meu ID”.

    Vamos pegar o primeiro caso, o “nome”. Irei mostrar abaixo o código javascript e o próprio “traduzido”:

    Normal

    function textOn(txt){
    document.getElementById(txt).className="textboxOn";
    }

    “Tradução”

    function textOn(nome){
    document.getElementById(nome).className="textboxOn";
    }

    Prestaram atenção na parte em negrito? Eh bem fácil essa passagem de parâmetro, nada complexo, tudo bastante fácil.

    Boa Bruno… E esse .className?

    Essa eh a parte mais fácil. O nome já diz tudo. Entre as aspas duplas, vc seta o nome da classe que vc quer que o elemento obtenha no evento.

    Tah pronto?

    Sim está. Veja como ficou.

    Legal neh? Com isso, vc pode fazer outras várias coisas. Eh soh explorar, estudar e meter a cara… 😉

    Bom, espero que tenham gostado. Foi um efeito bem simples, mas q pode ser útil para alguns. Qualquer dúvida, sugestão, crítica, eh soh comentar…

    Akele abraço.

    [ 13/jul/2006 às 12:23hrs ] [ Por Bruno Dulcetti ] Comentários 21 Comentários |

    Categorias: CSS,Webstandards

    21 Comentários no Post "Mudanças nos estados do campos de texto"

    Postar no Rec 6

    1. Diogo Chaves | 13/jul/2006 às 13:36

      Gostei muito da explicação, bem didática; o resultado apesar de simples é muito legal. Valeu pela dica!

    2. Muito bom esse código. Num mundo perfeito, nos usaríamos o pseudo-elemento focus, mas nesse mundo perfeito não existe o Internet Explorer… Nesse caso, temos que apelar para o javascript mesmo.

      Aliás, aproveitando o assunto, você saberia me dizer qual a função semântica do FIELDSET? Será que eu posso colocar mais de um deles em um único formulário?

    3. Mais um ótimo artigo Bruno!!
      Parabéns!!!

      Aquele abraço!

    4. Olá Marcus. O Fieldset serve como separador de assuntos dos campos de texto. Por exemplo: Dados Pessoais, Endereço, Dados Complementares, etc…

      Vc pode sim ter mais de um, ele serve para isso mesmo… 😉

    5. Boa Nobru, apesar de eu ter te perguntado isso a um tempo atras e vc naum ter me indicado isso. Maldito seja. Hahahaha to zuando…mandou bem. Bjs!

    6. excelente!

    7. Mto bom. Sempre me perguntei como alterar os classNames. Mto boa a solução.

      Sorte Bruno, parabéns pelo site/blog.

    8. Tem um jeito melhor de fazer isso, digo, sem precisar colocar os handlers nas tags. Estou postanto o meu jeito de fazer isso. Ainda estou arrumando a função pois tá meio esquisita, mas ainda funciona. 😀
      É có chamar o form_focus() no onload da tag BODY. O foco vai pra qualquer elemento INPUT (exceto HIDDEN e BUTTON) mudando a cor de acordo com o CSS.

      function form_focus(){
      frm = document.forms[0];
      var txtBox = frm.getElementsByTagName(“input”);
      if(frm.elements[0] != null && frm.elements[0].getAttribute(“type”) != “hidden”){
      frm.elements[0].focus();
      }
      for(var i=0;i

    9. Putz… O comentário foi cortado… Poxa Bruno, eu não sabia que tinha limite nos comentários… 🙁

    10. nem eu sabia… 😀

      Davidson, o exemplo q vc postou, eh para quando carregar o site, o foco ir para um campo… naum foi isso q quis dizer…

      meu exemplo eh para mudar quando, em qq tempo, qnd o cara clicar em um campo, mudar… independente do carregamento da página ou não…

      entendeu? 😉

    11. Sim, mas eu tinha tentado mandar duas funções (seu blog foi cruel comigo e cortou 🙁 ).

      Vou te mandar por e-mail pra você dar uma olhada.

    12. show de bola!
      by the way: pergunta de css
      e se eu quisesse q a borda fosse arredondada?

      abração

    13. Bruno, bem legal a sua dica. Realmente dá um novo visual ao site e com relação ao preenchimento dos formulários fica super pratico caso o usuário “se perca” no preenchimento !! eheheheh Legal mesmo.
      Agora tenho uma dúvida cara e gostaria de saber se vc pode me ajudar.
      Qdo coloco o onBlur para chamar a função que vai tirar (por exemplo) a cor da borda do campo, como faço para utilizar outra função que tem, por exemplo, que validar esse campo ??
      Se puder me ajudar, te agradeço cara !!
      Abs
      André

    14. Dannyrooh | 06/fev/2007 às 12:10

      Bruno, muito legal a técnica.
      Parabéns
      Abs

    15. Parabéns broder, sem dúvida sao blogs como o seu que constroem uma rede de qualidade. Informações objetivas e diretas.
      😉

    16. Olá Bruno, interessante, mas da para se resover o Onfocus e o Onblur de maneiras mais descomplicado.

      Veja só:

      onfocus=”this.className=’xxxx'” onblur=”this.className=’yyyyy'” alt=””/>

      Onde,

      xxxx é a classe formatada no css, onde vai haver o efeito que irá atender o Onfocus
      yyyy é a classe do proprio input sem ação formatado, isso significa, volte para o estado original.

      Nâo acha menos complicado? Tudo bem que Javascript fica mais elegante e quem sabe até mais bem estruturado, mas evita conflitos com navegadores.

      Abraços.

      Michael

    17. E ae Michael. Concorda que se eu tiver que mudar a classe, vou mudar várias vezes por ter vários campos?
      É melhor deixar separado que ae, mudando uma vez, todo mundo já aceita. 😉

      Eu prefiro assim, vai vai do gosto de cada um né 😀
      Aquele abraço

    18. É uma pena que a pseudo-classe :focus não funcione corretamente no IE, seria bem mais simples do que implementar uma solução em javascript. Parabéns pela explicação.

    19. Jefferson Rafael | 05/maio/2008 às 13:12

      Muito esclarecedor o tutorial, minha duvida é a seguinte. Ao utilizar o fiedset no ie(6.x) uma ‘margem’ é colocada em torno do legend, vc sabe como retirar esta ‘margem’ ? Pois quero criar um formulario onde a “borda top” do fieldset deve ser continua.

    20. Queria um help meninos, queria algo parecido com isso, por exemplo, tenho que criar 3 text box com os seguintes campos meta, desafio e resultado; Criar também um “label” com o farol. Aí por exemplo, se o valor (inteiro) )que eu colocar em meta for resultado exibir o farol da cor azul …
      gostaria de saber como eu faço para fazer isso?! quero dicas, nao sei por onde começar !!
      abrçs e aguardo contato!!

    21. Ola, to com dificuldade de fazer esse formulario de cadastro http://www.webthi.com.br/cadastro.html, passar em css, os campos ficam todos do mesmo tamanho, sera que alguem pode me ajudar?

    Tá esperando o quê? Comenta logo.

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com