Tableless - Desenvolvimento inteligente com Padrões Web

02/06/2008
CSS

Formulário Básico em 8 minutos – Tableless form

update: Se você quiser mais vídeos e em alta-resolução, visite o

Por

update: Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio.

O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid.

Direto pelo YouTube: Construindo o XHTML e CSS de um formulário. Se quiser ver o código fonte, clique aqui.

O Coda não é tão bom quanto pensam. Percebam que quando eu fecho as tags de input, ele coloca um /input. Embora haja algumas destas “tosquices”, o acabamento visual e outras características matam os outros editores. Mesmo assim, vou experimentar melhor outros editores como o TextMate.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://gaigalas.net Alexandre

    Excelente vídeo. Talvez seria melhor colocar as medidas no CSS em “ems”, pra manter proporção ao aumentar/diminuir o zoom. Ultimamente faço isso até com bordas.

    A Técnica é similar a que eu coloquei em meu blog uns 6 meses atrás.

  • http://juliovedovatto.wordpress.com Julio Luiz

    Interessante o vídeo, dá para se montar um formulário acessível em poucos minutos e com poucas tags.

    Agora que empresas estão começando a se importar com esta área do site, pensando no usuário. Infelismente são POUCAS que vejo.

    Só não gostei da utilização de LABEL como container para os campos, considero que seja uma maneira errada de se utilizar este elemento.

    Apesar de alguns documentos da própria W3C utilizam exemplos de como container, para mim a definição dele é apenas “um atalho para um campo” (a grosso modo).
    Eu utilizaria tag P como container, para mim teria mais semãntica.

    []’s

  • http://blog.gustavoribeiro.net Gustavo Ribeiro

    minha empresa bloqueia youtube e não consigo ver o vídeo :(

    verei em casa, se lembrar.

  • http://elyezer.com Elyézer Mendes Rezende

    A tag label não é somente para a etiqueta do campo? Percebi que a usou para colocar alem do label do campo o campo de texto, e com isso facilitar o posicionamento. Mas relacionado a semântica do documento não seria “correto” somente abrigar o label do campo?

    Costumo fazer esse mesmo tipo de técnica pra posicionamento, porém pensando na semântica do documento que tenho dúvida se é “correto” fazer.

    Muito bom o video!

    Obrigado

  • http://alexandre.gaigalas.net Alexandre

    Chama-se “label implícito” usá-lo como container, e tá semanticamente correto sim.

    Imagine o label como uma caixa e o campo como um brinquedo. Você pode tanto etiquetar o brinquedo e a caixa com o mesmo nome (usar o label com atributo for separado do campo) ou colocar o brinquedo dentro da caixa. Nos dois casos, dá pra saber que aquela caixa é daquele brinquedo.

  • Ricardo

    Nossa.. kara… muito bom esse video.. ate entendi umas coisinhas qu enao sabia.. ^^
    boa.. + desses tipo seram bem vindos.. ;}

  • Fernando

    Gostei muito do vídeo, eu percebi que esse Coda não é muito bom mesmo, na minha opinião o PDT (plugin para o Eclipse) dá um show nele e o Aptana então bota ele no chinelo… :)
    Com relação ao label implícito eu o uso em check e radios… e pra falar a verdade em ambas as formas de aplicação ele irá conter a funcionalidade de “rótulo”, pelo menos com os testes que realizei no FF.
    Eu gosto de usar um parágrafo dentro do fieldset, mania de usar parágrafos em várias partes do HTML, isso é semântico?

  • Pingback: Formulários

  • http://gaigalas.net Alexandre

    Eu usaria parágrafo dentro do formulário apenas quando há necessidade de informar o usuário alguma coisa, como instruções de preenchimento de campos. Do contrário, não há motivo.

    Formulários são estruturas de inserção de dados, não há motivo semântico para utilizar tags de exibição de dados (como table, p, ul, dl e demais).

  • http://www.pauloeduardo.com Paulo Eduardo

    Gostei muito do video,
    Realmente acho que os formulários são partes importantíssimas dentro de um site/sistema, alem de ser uma parte onde muitas pessoas tem duvidas quanto ao desenvolvimento

    Quanto ao label, eu prefiro utilizar o , ate mesmo por questões de estilização.

    Pois assim consigo estiliza-los separadamente e tenho mais controle dos dois, utilizando o label como container não conseguiria por exemplo definir uma largura exata para o texto e colocar o input ao lado dele.

    Mas Diego, talvez fosse o caso de você disponibilizar o código junto no artigo (só uma sugestão)

  • http://www.pauloeduardo.com Paulo Eduardo

    Ihh, acho que eu não devia ter usado html no comentário ele foi cortado.

    mas eu queria dizer:
    Quanto ao label, eu prefiro utilizar o label for=”nomedocampo”, ate mesmo por questões de estilização.

    Só pra permitir o entendimento da coisa

  • Sérgio Bezerra

    EXCELENTE VIDEO, também entendi algumas coisas q não tinha bom dominio, parabens cara!

  • http://diegopessoa.com Diego Pessoa

    Seguinte, usar a tag “p” no lugar de label não é nem um pouco semântico, muito pelo contrário, o exemplo dele está certinho, sobre o que o Paulo falou que com o label ele não consegue botar uma largura fixa, toda tag html é igual, o que você põe na tag p, coloca também na label, a diferença é que algumas tags podem vir setadas de alguns estilos por default, então, experimenta botar um float: left ou right no seu label e uma largura qualquer, pode ter certeza que ele vai te obedecer e você estará fazendo um código bem mais semântico!
    Valeu!

  • http://juliovedovatto.wordpress.com Julio Luiz

    Achei mais semântico o formulário deste artigo aqui: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

    ;D

  • Italo

    Gostei.
    sou novato e naum consegui fazer funcionar, ficou tudo bunitinho mais naum funcionou ;(

  • Luc

    Cara, esse tutorial só demonstra como fazer a “cara” do form. Depois vc vai precisar procurar como se faz um formmail.

    Eu tava usando o TopStyle e o EditPlus como editores… Alguem conhece um melhor aí?

  • http://www.infomaniaco.com.br Guilherme

    Muito bom este Tutorial, esta de parabens, irei usua-lo concerteza! espero que continue postando otimos tutoriais!

  • http://www.marciotoledo.com Marcio Toledo

    Diego, bacana seu video-tutorial, mas tenho uma curiosidade e já não é de agora.

    Já ví outros códigos seus e você geralmente coloca os inputs dentro de labels, ficou claro que é mais fácil assim pra diagramar, usar float, etc. Mas isso seria semântico?

    O correto não seria usar:

    Nome:

    Obrigado.

  • http://www.marciotoledo.com Marcio Toledo

    Não deu… agora vai..

    [label for="nome"]Nome:[/label]
    [input type="text" id="nome" /]

  • http://www.ctrlndesign.com.br Alex

    legal o vídeo

  • http://rangelweb.site88.net Rangel

    nesse caso do formulário eu acho mais fácil assim.

    Nome:

    E-mail:

    Mensagem:

    depois é mão na massa no CSS, vi o video de vcs mas acho que mais fácil entendimento nesse modo q crio. mas é isso ai valeu!!!

  • http://rangelweb.site88.net Rangel

    isso ae marcio tbm uso nesse modo q vc.

  • Pingback: Tópicos Avançados » Formulários

  • Pingback: Tabelas semânticas » Tableless.com.br - CSS e Práticas com Padrões Web

  • Pingback: Tabelas semânticas

  • http://www.icommercepage.com/artigos_programacao.php?id=1211264425&page=2 icommercepage

    O vídeo merece ser visto com um certo tempo, o tema é bastante oportuno.

  • Pingback: Formularios « Luciano Larrossa Blog

  • http://www.manyfesta.com.br Eduardo Henrique Cavalcanti

    Ainda estou aprendendo, mas fiquei impressionado com sua velocidade. Pena que os vídeos que vi não tem dialogos.

    BRAVO!
    BRAVO!
    BRAVO!
    Estou apanhando em fazer caixa com texto e fotos juntos.
    Pois procuro fazer um site sem muita ajuda do fireworks.
    Emfim, Parabéns.