Acorda pra Web!

Tecnologia que vai mudar nossas vidas, depois do café.

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!

5 Respostas para “Formulários totalmente semânticos com HTML e CSS”

  1. Thalis Valle diz:

    Também escrevi um artigo sobre o asunto, um tempo atrás:
    http://www.thalisvalle.com/formulario-semantico-e-acessivel

    Abração

  2. Alexandre diz:

    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

  3. adriana diz:

    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

  4. Alexandre diz:

    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

  5. Leonardo S. R. diz:

    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.

Deixar um Comentário

XHTML: Você pode usar essas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>