Formulários totalmente semânticos com HTML e CSS
Acabei de bolar uma nova versão de um velho CSS para formulários semânticos em HTML. A nova versão é muito, muito mais bacana. O HTML é puríssimo e o CSS mínimo, funciona em todos os navegadores modernos e valida! E tem gente que ainda usa tabelas ou -pior ainda- listas pra formulários
O grande truque é colocar os controles do formulário dentro das labels, chamado de label implícito, você sequer precisa declarar um atributo for=”" para especificar o controle relacionado à aquela label. Encontrei a solução desenhando o novo sistema de templates do meu micro-framework, o Base Cube.
Fiz ele em HTML4, mas é facilmente transformável em XHTML, basta apenas mudar pequenos detalhes na sintaxe.
Portanto, recomendo darem uma olhada no meu formulário semântico em HTML e CSS, pode poupar bastante tempo na hora de desenvolver!


30/11/2007 às 6:43 pm
Também escrevi um artigo sobre o asunto, um tempo atrás:
http://www.thalisvalle.com/formulario-semantico-e-acessivel
Abração
30/11/2007 às 7:18 pm
Bacana seu formulário Thalis. Minha primeira versão era muito parecida com a que você fez, usando <br> e tal, mas acredito que a nova versão seja muito mais limpa
Abraços
16/12/2007 às 7:48 am
ok mas nao eh semantico utilizar a label pegando a propria label e o input.. correto? a tag label deve ser usada realmente e somente para a label.
me parece muito legal como fez. mas e esse lance do label?
nao vai ‘contra’ a semantica?
[]s
Adriana
17/12/2007 às 8:51 am
Adriana, é completamente válido e semântico. Segue o link da especificação do HTML, há alguns exemplos do uso de labels, entre eles o uso de labels implícitos (da maneira que eu utilizei no exemplo).
http://www.w3.org/TR/REC-html40/interact/forms.html#edef-LABEL
Abraços
2/6/2008 às 11:41 am
A unica razão pela qual eu acho valido usar listas é a questão dos leitores de tela, com listas ele indica ao usuario o quantidade total de itens e o numero do item em que eles esta, e isso é um grande passo no quesito acessibilidade.