Daniele V Silva - Webdesigner, desenvolvedor front-end, programador de interfaces, Gerente de projetos web, consultora e freelancer

via Instagram http://ift.tt/1LDeteY

Como criar formulários – Dicas e truques de Usabilidade e layout

Publicado em , por , na categoria Elementos e técnicas, Webdesign

Desenvolver formulários para web pode ser divertido ou frustrante e exige uma grande dose de persistência e determinação.

O modo como você estiliza e formata seus formulários é crucial para torna-lo aparentemente útil pois na maioria das vezes é preciso convencer o visitante a preencher as informações. Para formulários pequenos, basta adapta-los ao site, mas quando se trata de formulários mais complexos onde uma grande quantidade de informações é exigida ter um estilo bem elaborado e fácil de usar se torna o principal motivo de sucesso ou fracasso.

Antes de tudo é preciso entender a importância e o significado de um formulário: eles são hoje a forma mais usada de interação entre usuário e o site, é o modo pelo qual o visitante transmite para o site (ou para os responsáveis) tudo aquilo que ele desejar ver ou fazer. Mesmo quando não aparenta exatamente o tipo de formulário convencional, em algum lugar deve haver uma tag “input” escondida. A palavra “input” tem exatamente esse significado: passar, enviar informações.

Tags fundamentais

Form

A tag <form> cerca um formulário, ela que vai conter os parâmetros que garantem o seu funcionamento. Você pode colocá-la em qualquer lugar dentro do <body>, e todas as tags “input“, “selects“, “textareas“, etc devem ficar dentro dela

Seu atributo principal é o “action“, ele é o responsável por linkar o seu formulário ao arquivo que contem a programação responsável pelo envio dos dados quando o botão de envio for acionado. Ele deve conter o link para um arquivo cgi, php, asp ou outra linguagem de programação capaz de processar esses dados.

Outro parâmetro importante é o “method“, que é a forma como os dados são enviados. Se seu formulário envia resultados com mais de 100 caracteres ou acentuação fora do código ASCII, você deve usar pelo método “post“, pois o método “get” adiciona o resultado do formulário ao endereço da página e isso pode causar problemas. Ex.: danielevsilva.com.br/?name=value&name=value

A tag “form” pode receber “Classes” ou “ID“, por isso você pode usá-la como uma div para formatar seu formulário e reduzir o código.

De acordo com a especificação do HTML 4.0, a Tag <form> é obrigatória para formulários. Não esqueça que ela deve ser fechada no final “</form>

<form id=”form1″ name=”form1″ method=”post” action=”form.php”>
Aqui devem ficar os campos do seu formulário
</form>

Input

O <input> tag principal para um formulário. É a responsável por receber as informações que serão enviadas.

Seu atributo principal é o “type” que determina qual o tipo de campo que será usado e quais dados ele poderá receber. Existem 10 tipos de campos “input

Button

<input type=”button” name=”daniele” id=”daniele”value=”botão” />

É o tipo que deve ser usado para criar botões que não tenham o efeito de enviar ou limpar um formulário. Normalmente usamos quando é necessário chamar um javascript sem enviar as informações até que seja processado pelo JS. Por padrão o campo ficará em branco, você pode usar o atributo “value=” se quiser escrever algo.

Checkbox

<input type=”checkbox” name=”daniele” id=”daniele” />

Cria uma lista de opções de múltipla ou única escolha. Se você tiver um grupo de checkboxes, deve relacioná-los através da tag “name=

File

<input name=”daniele” type=”file” id=”daniele” />

É o tipo usado para fazer upload de arquivos, ele adiciona um input com propriedade de texto e um botão de envio com um padrão automático.

Hidden:

<input name=”daniele” type=”hidden” id=”daniele” />

Campos ocultos são usados para passar alguma informação sem que ela seja visível na tela.

Image

<input name=”daniele” type=”image” id=”daniele” src=”imagem.gif” />

Permite que você uma imagem como botão, isso dá muita flexibilidade ao layout. No entanto, não é possível acessar um botão com tipo “image” através da tecla “tab“, o que diminui a usabilidade.

Password

<input name=”daniele” type=”password” id=”daniele” />

Funciona exatamente como um campo de texto, mas os caracteres digitados ganham o aspecto de senha usando asteriscos *****

Radio

<input name=”daniele” id=”daniele” value=”sim” type=”radio” />

São conjuntos de opções que permitem apenas uma seleção. Para criar um grupo devemos colocar o mesmo “name=” para todos eles com “value“especifico para cada um:

<input type=”radio” name=”radio” value=”sim” />
<input type=”radio” name=”radio” value=”não” />

Reset

<input name=”daniele” id=”daniele” type=”reset” />

É um tipo de botão que ao ser pressionado, limpa todos os campos que foram preenchidos pelo usuário. Por padrão o botão aparecerá como “reset”, você pode usar o atributo “value=“se quiser escrever algo.

Submit

<input name=”daniele” id=”daniele” type=”submit” />

Essa tag gera o botão responsável por enviar os dados para o servidor. Por padrão o botão aparecerá como “submit“, você pode usar o atributo “value=“se quiser escrever algo.

Text

<input name=”daniele” id=”daniele” type=”text” />

É o tipo mais comum de campo de formulário em html. Permite que os usuários digitem qualquer tipo de informação textual.

Textarea

<textarea name=”daniele” id=”daniele”></textarea>

A tag <textarea></textarea> cria um campo formado por múltiplas linhas. Ou seja, é possível enviar um texto maior mais facilmente.
Seus atributos mais comuns são:
Cols” – indica quantas colunas serão visíveis (qual a largura do campo)
Rows“- Indica quantas linhas serão visíveis (altura do campo)

Select

<select name=”daniele” id=”daniele”>

A tag “select” é responsável por criar uma lista de muitos itens ocupando um espaço pequeno. Cria uma espécie de “menu de Salto”, mantendo as opções ocultas até ser acionado com um click. É composta pelas tags: <select> e <option>

A etiqueta seleta tem vários atributos, e o fechamento </select> A etiqueta é exigida.

A tag select, assim como os botões de rádio, permitem que se escolha uma ou mais de uma opção.

Deve ser inicado sempre com a tag <select> e cada opção disponível deve ser colocada dentro de uma tag <option>, dessa forma:
<select name=”1″>
<option>sim</option>
<option>não</option>
</select>

Coisas que você deve saber para deixar seus formulários mais legais

A semântica

Eu ainda me surpreendo com a quantidade de pessoas que procuram motivos mais diversos para aumentar a quantidade de opções de tags que podemos usar para de formatar e organizar os campos de seus formulários, já vi pessoas que usam, <div></div>, <p></p>, <span></span>, até mesmo as tags <ul><li></li></ul> alegando que formulários podem ser considerados uma lista de informações. Bem eu não concordo. Formulários devem ser vistos como formulários, não são listas, nem tabelas, nem nada parecido, apenas formulários. São individuais e possuem suas próprias tags especificas. É uma categoria própria de conteúdo, assim como as tabelas e as próprias listas, não acho correto tentar colocá-los dentro de uma dessas duas categorias. Assim como uma tabela possui suas <tr>, <td>, <thead> etc, o formulário possui seus <fieldsets> e <labels>, que usados de forma correta são capazes de organizar todo tipo de dados de formulários.

Vamos conhecer melhor essas tags

Label

<label for=” “></label>

A função principal do label é rotular os campos. Quando usada corretamente ajuda a resolver problemas de usabilidade em campos muito pequenos, como botões de Radio e Checkboxes, esses campos não tem mais do que 10px de largura e altura, e através da tag label conseguimos expandir a área do clique para a região do label. Por exemplo, no final desse artigo, no formulário de comentários, clicando na palavra “nome“, o campo input “nome” é imediatamente ativado e você pode escrever. Isso acontece pois o atributo “for=” da tag <label> está relacionada a tag <input> pelos atributos “name” e ou “id“, ou seja:  o atributo “for=” da tag <label> deve ser igual ao atributo “name” ou “id” do input.

<label for=”author”>Nome:</label><input name=”author” type=”text”>

A tag label também auxilia a navegação para deficientes visuais (leitores de tela) pois cria uma relação entre o rótulo e o campo que não existe normalmente.

Além disso, a tag “label” também pode receber “class” ou “Id“, sendo assim, ela pode receber qualquer tipo de formatação. Pode ser usada para alinhar os rótulos de um formulário sempre ao lado direito, por exemplo, criar margens, etc…

O input pode ser colocado dentro ou fora da Tag label.

<label for=”author”>Nome:</label><input name=”author” type=”text”>
<label for=”author”>Nome:<input name=”author” type=”text”></label>

O resultado é o mesmo, o que muda é a formatação. Eu prefiro trabalhar com o primeiro modo, pois tenho mais flexibilidade podendo trabalhar a tag label e a tag input individualmente. Isso ajuda na composição dos meus layouts.

Fieldset

<fieldset></fieldset>

A tag fieldset cria um caixa agrupando elementos de um formulário. Você não precisa usar uma div sempre que quiser separar os campos de dados pessoais e as informações de pagamentos, basta colocá-los dentro de um fieldset e ele insere uma caixa que contorna os campos.

E mais legal ainda: você pode usar junto com o fieldset a tag “legend“, ela coloca um título no fieldset.

<fieldset><legend>Aqui vai a legenda</legend></fieldset>

Veja aqui um exemplo de formulário simples, formatado com uma semântica correta, observe o código fonte e a forma como usei o a propriedade “float” no css para alinhar as label ao lado dos input.

A formatação

Quando se trata de formatação de formulários, é importante lembrar que algumas vezes os visitante confiam informações secretas como senhas, números de documentos e cartão de credito, por isso modificar completamente o layout de um formulário nem sempre é uma boa idéia, pois pode deixar os visitantes confusos ou desconfiados.

Como falei no inicio, formatar um formulário básico é simples, basta adaptá-lo ao estilo do seu layout, e uma boa forma de se fazer isso é trabalhando com imagens.

O principio é simples: basta cria uma imagem e com css colocá-la atrás de seus campos input, depois mudar a cor de fundo e a borda do campo para a mesma cor de fundo da imagem, o campo ficará disfarçado e vai parecer que o visitante está digitando sobre a imagem.

Um outro jeito interessante de fazer isso é colocar o input dentro do label e trabalhar com uma imagem de fundo no label, como fiz no site www.pontoaponto.com.br. Nesse caso, eu usei a mesma imagem com gradiente no label e no input, ambas alinhadas abaixo, retirei as bordas do input e adicionei bordas no label. Veja como ficou certinho.

Cuidados que você deve ter

Não mudar a forma básica dos elementos!

As pessoas estão acostumadas a preencher os campos padronizadas pelo sistema operacional e já sabem o que fazer com eles, quando se deparam com um formato muito diferente se sentem constrangidos e simplesmente abandonam o preenchimento. E isso é muito comum na verdade, o que é claro pra mim, pode ser estúpido para outro e inutilizado para um terceiro.

Rótulos claros e curtos

Sempre utilize rótulos (label) curtos. Tente resumir a sua pergunta em poucas palavras. Há uma regra que diz que eles não devem exceder 200px depois de estilizados, mas acho que isso vai do bom senso.

Campos maiores, respostas maiores.

Deixe o tamanho dos campos proporcional ao tamanho da informação que você espera receber. As pesquisas mostram que quando usamos campos muito pequenos, as pessoas tendem a escrever respostas bem resumidas, e quando os campos são maiores elas tendem a escrever mais. Então se a sua idéia e estabelecer uma comunicação com o seu visitante, como em comentários de blogs, fóruns e formulários de contato, deixe seus campos de texto maiores e terá respostas maiores e mais detalhadas.

Da mesma forma se um campo exige informações curtas, use campos curtos. Nunca use 300px num campo de senha de 8 dígitos, por exemplo. O visitante certamente vai pensar que não entendeu bem a finalidade do campo.

Sinais de identificação

Lembre de usar o * para classificar um campo como obrigatório. As pessoas estão acostumadas com isso. E o ideal é usá-lo antes do campo do formulário, a direita ou esquerda do label, pois em leitores de tela, é preciso que o programa avise que é obrigatório antes de ler o campo. E não esqueça de explicar o que significa o * antes de sua primeira ocorrência.

Cuidado com o vermelho

Vermelho significa erro. Por isso cuidado ao rotular campos com essa cor ou usá-la em informação textual, pois no final, quando o visitante enviar um formulário incompleto, você vai precisar dessa cor para explicar isso.

Agrupamentos

Agrupe sempre muito. Agrupe informações semelhantes, complementares. Agrupe campos obrigatórios, ou campos opcionais. Agrupe, agrupe agrupe. E use fieldset para isso!

Alinhamentos:

Pesquisas demonstram que o tempo de preenchimento pode aumentar ou diminuir de acordo com a forma que os elementos estão organizados.

Alinhando o label a esquerda do input

A associação do rótulo com o campo é rápida e fácil, mas o tempo de preenchimento aumenta pois o mouse algumas vezes precisa percorrer uma distancia maior

Alinhando label a esquerda do input e alinhando o conteúdo do label a direita

A associação do rótulo com o campo é rápida e fácil, e o tempo de preenchimento é reduzido pela metade

Alinhando o Label acima do input

Essa foi a forma mais eficaz de organizar as informações de um formulário, pois o visitante consegue entender a ordem das informações apenas com uma olhada rápida

E tudo fica mais legal ainda com a JQuery

Bem, agora que eu descobri a Jquery, vejo Jquery em tudo. 🙂

Se você não sabe o que é isso, pode descobrir aqui, e se você não sabe inglês o suficiente para entender então leia isso. E se você já entendeu o que é e quer começar a usar, leia isso aqui (em português)

jNice, styled forms – Modificar os campos dos seus formulários deixando com uma aparência mais interessante. Muito legal

Autocomplete – cria uma lista de opções para todos os campos que serve como um “auto-completar”.

Checkbox ShiftClick – Esse é ótimo. Permite que você marque muitos campos do tipo checkbox usando o shift

Form Validation – Meu sistema de validação favorito

Terminando…

Bom, eu não falei a metade do que gostaria e esse texto já ficou imenso, então, logo logo, eu vou trazer uma segunda parte onde abordarei temas como Validação, Capcha, tabulação,

Exemplos de Uso

35 opiniões sobre “Como criar formulários – Dicas e truques de Usabilidade e layout”

  1. SamuelRit disse:

    мамин малыш пятигорск оптом от производителя – мамин малыш официальный сайт пятигорск, мамин малыш детская одежда официальный сайт пятигорск.

  2. RobertMub disse:

    белорусский чат – чат гомель, беларуский чат.

  3. Williamvem disse:

    дача дизайн участка – ремонт ванной комнаты в хрущевке, работа дизайнер интерьера.

  4. Robertvow disse:

    ландшафтное проектирование участка – ландшафтный дизайн сада, вертикальное озеленение цветами.

  5. waldonyer disse:

    Achei espetacular comi vcs esclarecem, sou iniciante fiz un formulário ligado a um bdados, só que não consigo formatar o lado direito da página qdo imprimo sai uma parte da margem na outra folha..obrigado se puderem me ajudar.

  6. I’m truly enjoying the design and layout of your website. It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did you hire out a designer to create your theme? Excellent work!

  7. Perfeito! a tag era justamente o que eu procurava para o meu sistema! Obrigado!

  8. HPLCurriculos disse:

    Boa tarde !

    Sempre acompanho o fórum para saber das novidades , porem gostaria de saber…..

    Tenho um blog de divulgação de currículos e dicas para o nosso dia a dia….. http://www.hplcurriculos.blogspot.com.br

    Pois bem lá eu tenho um formulário que fiz para as empresas cadastrarem as vagas que serão postadas no blog.

    Porem gostaria de fazer algo semelhante com o cadastro de currículos , onde os dois formulários tenham um campo em comum , para que quando o candidato efetuar o cadastro de seu currículo exemplo , assistente , e uma empresa já tiver feito o cadastro da vaga com esse nome , ele avisasse a mim ou aparecesse algum alerta para que o candidato possa receber essa informação ou mesmo a empresa saber que tem currículo com a vaga que ela preencheu..

    Porem a plataforma do blog é Blogger , e não sei se é possível fazer isso com HTML ?

    Saberia me ajudar?

    Um abraço

    Alexandre
    S.B.Campo – SP

  9. Olá, tudo bom? Hoje, eu e minha equipe do trabalho discutimos sobre a problemática do campo input[type=password] ser zerado quando há um submit no form e há perda da digitação dessa senha quando, por exemplo, algum campo não passou na validação após o carregamento da página (validação backend, com php por exempĺo). A questão da usabilidade vai lá para baixo; Pois, imagina-se uma página com o captcha e digito todos os campos e erro na digitação do captcha e quando vejo tenho que digitá-la novamente. Como pode ser resolvido isto?

    Valeu e parabéns pelo post!!

  10. Gilberto Moraes disse:

    Como fazer para acrescentar mais checkbox no form, tipo no meu form já tenho 8 checkbox cada um com um nome diferente, mas quero deixar um botão para quando o usuario clicar ele poder adicionar mais checkbox com o nome que ele digitou, dessa forma eu não limitaria o usuario a escolher apenas as opções que eu programei.

    Hobbies

    Esporte

    Jardinagem

    Pintura

    Corte & Custura

    Musica

    Meditação

    Leitura

    Jogos Eletrônicos

  11. Mario disse:

    Parabens pelo post, varias dicas legais!!!!

  12. Ricardo Berti disse:

    Muito legal o artigo, muitas pessoas esquecem hoje da usabilidade e da acessibilidade.
    Muitos desenvolvedores e web designers nunca utilizaram um browser para cegos, por exemplo, e não fazem idéia das dificuldades em sites mal escritos.

    O incentivo é válido, parabéns!

    PS: Você informa que a propriedade “for” do label está atrelada a propriedade “name” do input. Na verdade está atrelado a propriedade “id”, que é a identificação única de um elemento na página.

    1. danielevsilva disse:

      Na verdade, a propriedade “name” tem caído em desuso agora, mas a propriedade for é relativa tanto a “ID” quanto a “name” a propriedade “name” é exclusiva para objetos, que é basicamente o assunto do post, e como na época que escrevi esse artigo ela era mais popular, eu optei por citá-la, mas vou fazer a correção conforme vc sugeriu.
      Abraços!

  13. Monique disse:

    Excelentes dicas, são mesmo aulas. Muito bom para quem está iniciando 🙂 Parabéns pelo conteúdo!

  14. Mário Calado disse:

    Olá, Daniele
    Parabéns pelo Seu Site.
    Precisava da sua ajuda.
    Como tirar a BORDA do FORM SELECT no exemplo que deixo em baixo, do género do seu.
    Desde já agradeço o seu Tempo.
    Atentamente
    Mário Calado

    ******Seu EXEMPLO****

    Untitled Document

    Nome:

    e-mail:

    Endereço

    cidade:

    estado:

    mensagem:

    ******Meu EXEMPLO*******

    Mário Calado

    BODY {
    margin:0px; background-color: ;
    color : #000000

        
    © WordLingo
      INFORMAÇÕES

         
    Português</option

    var selectmenu=document.getElementById(“mymenu”)
    selectmenu.onchange=function(){
    var chosenoption=this.options[this.selectedIndex]
    if (chosenoption.value!=”nothing”){
    window.open(this.options[this.selectedIndex].value,’_top’)}}

  15. stensy disse:

    Cara Conteúdo de Formulário 100% aprovado, Gostei muito vo adicionar seu Site nos meus Favoritos! Abraço!

  16. Ricardo disse:

    Dniele , por favor me ajude !
    preciso de um formulário que tenha :

    nome
    endereço
    telefone
    e-mail ( da pessoa que envia )
    assunto
    descrição

    sendo que ao clicar em enviar fosse para meu e-mail :
    suporte.rick@globo.com

    Att.

    Ricardo

  17. ProfisSite disse:

    Olá Dani,

    Parabéns pelo Post, muito esclarecedor e bem didático.

    Obrigado!

  18. Will disse:

    Daniele
    Ta eu sei ce é ocupada a lot mas….
    Queria uma opinião profissional e não conheço ninguém que trabalhe com Web Design…
    Então minha saída é recorrer a blogs e sites do genero.
    Comçei a estudar XHTML e CSS tem duas semanas..
    Tinha um pouco(?) de conhecimento nas tags html (html, head, title, body ^.^)
    Bãoo… Fiz isso:
    http://williamxsp.awardspace.us/
    E sim! Deleta esse enorme coment 😉

    Agradeço desde já

  19. Will disse:

    Deus.. Alguém manda esse link pra esse cara aqui óh!
    http://www.olgstudio.com/

  20. Já foi Twittado e marcado no Del.icio.us!! Ótimo post Daniele!! Perfeito!!
    Me ajudou demais xD

  21. GOSTEI disse:

    gostei do post, parabéns me ajudou bastante

  22. Gostei muito! Bem explicativo o artigo que fez.
    Sempre tive problemas com formulários.
    Obrigado

    Um feliz Ano Novo.

    Adriano mesquita
    Agência Grife M

  23. Farley Rangel disse:

    Acho que na tentativa de colaborar, coloquei meu comentário no post errado. Me confundi um pouco pra dizer que no Firefox o layout está legal. Já no Safari, está desarrumado, o exemplo no site http://www.pontoaponto.com.br.

    Abs,

  24. Excelente post, muito legal mesmo! Parabéns!!

  25. Precisa elogiar seu artigo? Claro que sim, como sempre você tá de parabéns. Só tenho uma resalva a fazer sobre o plugin Form Validation para Jquery, realmente ele bacana, seria perfeito se não usa-se atributos inválidos nos elementos do formulário, o que pra mim impossibilita o seu uso.

    Beijo e parabéns novamente.

    Assunção Jr.

  26. Brugraph disse:

    Olá,
    Gostei muito e ainda me ajudou pois estou começando!!!
    Se quiser depois dá um olhada no meu site e deixa a sua opinião lá!!!
    É sempre bom ter opiniões de quem já entende do assunto…
    Um grande abraço

  27. Neto disse:

    Opa ótimo post, mas só tome cuidado com a frase “Bem, agora que eu descobri a Jquery, vejo Jquery em tudo.” JQuery é fantástico, mas como se trata de Web temos que saber onde devemos ou não usar. []sss

  28. Dani Danczuk disse:

    Muito bom! Vou adicionar essa página no meu del.icio.us 😉
    Beijossss

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *