Tudo o que você queria saber sobre formulários para web – Parte 3

Finalizando o markup do nosso formulário de exemplo e nesse episódio falo sobre alguns itens:

1. Atributos mais utilizados na tag form: id, action, method, enctype, onsubmit, onreset, etc
2. Explico os tipos input hidden e file
3. Lembro a todos que o tipo password não nos oferece segurança, apenas inibe a visualização dos caracteres digitados. Para adicionar segurança no tráfego de dados você vai precisar implementar outras técnicas, como por exemplo, HTTPS
4. Uso do Tabindex para melhorar a navegação via teclado dos seus visitantes.
5. Mostro as alternativas para o tipo submit para facilitar a aplicação dos elementos de Design. São eles: input do tipo image e o elemento button
6. Selected e checked – Utilizamos esses atributos para melhorar a experiência do usuário ao utilizar os formulários. Imagine que a maioria dos seus usuários mora em Alagoas, então no select de estado do seu formulário você pode deixar selecionado esse valor, outro exemplo é quando você tem um formulário de busca com a opção do usuário procurar no seu site ou na web, nesse você pode deixar marcado (checked) o valor “no site” para aumentar o tempo de navegação do visitante.

Parte 3.1 – Melhorando a marcação do formulário

Parte 3.2 – Finalizando a marcação do nosso formulário de exemplo

Gostou? Ajude dando suas sugestões logo abaixo, assinando o Feed ou divulgando para seus amigos. :)

Tudo o que você queria saber sobre formulários para web – Parte 2

Voltando a série sobre formulários e nesse screencast vou adicionar alguns padrões de acessibilidade ao markup feito no primeiro screencast. Todo poder das tags: fieldset, legend e label, fazendo com que seus formulários fiquem mais elegantes e acessíveis.

Confira o Screencast!

Gostou? Ajude dando suas sugestões logo abaixo, assinando o Feed ou divulgando para seus amigos. :)

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. :)