Tableless - Padrões Web com Pastel e Caldo de Cana

por Diego Eis Junho 2nd, 2008

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

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.

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.

Se ainda estiver interessado, leia também:

22 Comentários

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.

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

Gustavo Ribeiro

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

verei em casa, se lembrar.

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

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?

Formulários

[…] Diego Eis, o formulário depois do link é o elemento mais utilizado pelos usuários para interagir com o […]

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).

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)

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!

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!

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í?

Guilherme

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

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.

Marcio Toledo

Não deu… agora vai..

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

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!!!

Rangel

isso ae marcio tbm uso nesse modo q vc.

Voltar para o topo

Histórico