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