Tudo o que você queria saber sobre formulários para web – Parte 1
Iniciando mais uma série aqui no blog e dessa vez vou falar sobre formulários. Como você deve codificar seu formulário, definir quais atributos necessários nos elementos, deixar seus formulários acessivéis a pessoas que tenham algum tipo de incapacidade (visual, motora, etc). Código apenas com label e input? Envolver esses elementos com dt, dd e dl ou listas (ordenadas ou não) seria a melhor solução?
Você ainda não utiliza “fieldset”, “legend” e o atributo “for” no elemento “label”??
Você vai rever seus conceitos e melhorar a estrutura HTML dos seus formulários, depois ainda vai aprender como utilizar seletores complexos específicos para formulários e fazer com que o IE6 não resmungue com esss técnicas super avançadas para ele. Aí você fala: E as campanhas #semie6, iedeathmatch e outras? Eu apoio essas campanhas sim, mas temos clientes/trabalhos que o pessoal ainda insiste em suportar esse navegador… Paciência…
Nesse primeiro episódio eu vou montar o markup de um formulário simples, sem me preocupar com acessibilidade e outras opções interessantes, deixando para o segundo episódio a inclusão de labels e outras explicações.
Mostrei também um Sketch do site Vimeo feito pelo Soxiam para demonstrar que antes de iniciar qualquer projeto ou tarefa precisamos de planejamento em primeiro lugar e com certeza sketches/wireframes são ótimos para alcançar melhores resultados.
Confira o Screencast!
Código do Formulário utilizado nesse Screencast
Aprenda mais!
- Ótimo artigo sobre Acessibilidade em formulários [en]
- Formulários Acessíveis – Tutorial do Maujor
- Best Practices for Form Design [en] – Via Slideshare
- Formulário Básico em 8 minutos – Via Tableless
Gostou? Ajude dando suas sugestões logo abaixo, assinando o Feed ou divulgando para seus amigos. :)
4 comentários
links for 2009-04-03 « sySolution em abril 3rd, 2009
[...] Tudo o que você queria saber sobre formulários para web – Parte 1 | Entusiasta web + podcaster + s… (tags: css webstandards forms) [...]
Beto em abril 10th, 2009
Tem esse aqui também:
http://www.thalisvalle.com/formulario-semantico-e-acessivel
Jaíne em agosto 28th, 2009
Olha adorei sua bela explicação sobre formulario mais odeio esse assunto rsrs.
Chris Benseler em março 31st, 2009
Eu absolutamente odeio formatar formulários. Tanto html quanto CSS.
Ainda mais quando a designer faz usando os componentes iguais ao do Mac OS, onde o select é redondinho bonitinho por exemplo, e não tem como fazer tais coisas nos outros browsers :-/
Mto bom teu blog, cara!
[]s!