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.
26 Comentários
26 Comentários
Alexandre 02/06/2008 às 10:39
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 02/06/2008 às 12:00
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 02/06/2008 às 12:42
minha empresa bloqueia youtube e não consigo ver o vídeo
verei em casa, se lembrar.
Elyézer Mendes Rezende 02/06/2008 às 21:24
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 03/06/2008 às 15:56
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 04/06/2008 às 10:46
Nossa.. kara… muito bom esse video.. ate entendi umas coisinhas qu enao sabia.. ^^
boa.. + desses tipo seram bem vindos.. ;}
Fernando 04/06/2008 às 12:17
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 04/06/2008 às 20:24
[...] Diego Eis, o formulário depois do link é o elemento mais utilizado pelos usuários para interagir com o [...]
Alexandre 04/06/2008 às 20:39
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 05/06/2008 às 01:26
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 05/06/2008 às 01:28
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 05/06/2008 às 22:45
EXCELENTE VIDEO, também entendi algumas coisas q não tinha bom dominio, parabens cara!
Diego Pessoa 08/06/2008 às 05:12
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!
Julio Luiz 09/06/2008 às 14:46
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 14/06/2008 às 19:37
Gostei.
sou novato e naum consegui fazer funcionar, ficou tudo bunitinho mais naum funcionou ;(
Luc 22/06/2008 às 18:41
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 01/08/2008 às 15:38
Muito bom este Tutorial, esta de parabens, irei usua-lo concerteza! espero que continue postando otimos tutoriais!
Marcio Toledo 02/08/2008 às 04:42
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 02/08/2008 às 04:46
Não deu… agora vai..
[label for="nome"]Nome:[/label]
[input type="text" id="nome" /]
Alex 04/08/2008 às 21:26
legal o vídeo
Rangel 23/08/2008 às 14:48
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 23/08/2008 às 14:50
isso ae marcio tbm uso nesse modo q vc.
Tópicos Avançados » Formulários 01/10/2008 às 12:53
[...] Diego Eis, o formulário depois do link é o elemento mais utilizado pelos usuários para interagir com a [...]
Tabelas semânticas » Tableless.com.br - CSS e Práticas com Padrões Web 27/10/2008 às 07:01
[...] em entender melhor os diversos objetos que compoem um determinado elemento. Um caso bastante comum, além dos Formulários, é a formação das TABLES. Normalmente, escrevemos uma tabela mais ou menos [...]
Tabelas semânticas 31/10/2008 às 11:19
[...] em entender melhor os diversos objetos que compoem um determinado elemento. Um caso bastante comum, além dos Formulários, é a formação das [...]
icommercepage 19/11/2008 às 04:44
O vídeo merece ser visto com um certo tempo, o tema é bastante oportuno.