Como projetar Forms amigável no HTML5
desenho útil formulários em HTML é um empreendimento diferente de desenhar fácil de usar formas. Sua forma pode reunir os dados que você precisa, mas se o formulário é difícil para os visitantes a usar, eles podem abandoná-lo antes que eles são feitos.
Como você usa os elementos de marcação e outros elementos que impulsionam o layout da página, mantenha as seguintes diretrizes:
Fornecer pistas textuais para todas as suas formas. Seja claro sobre as informações que você quer e o formato que você precisa.
Por exemplo, dizer detalhes de usuários, como se
As datas devem ser inseridas como mm / dd / aa (contra mm / dd / aaaa).
O número de caracteres de um campo pode tomar é limitado.
Você pode limite de caracteres usando a comprimento máximo atributo.
Use largura de campo e os limites de caracteres para fornecer pistas visuais. Por exemplo, se os usuários devem digitar um número de cartão de crédito como xxxx-xxxx-xxxx-xxxx, considerar a criação de quatro campos de texto - um para cada parte do número.
Grupo campos semelhantes. Um agrupamento lógico de campos faz com que preencher um formulário mais fácil. É confuso se você perguntar para o primeiro nome do visitante, em seguida, aniversário, e, em seguida, sobrenome.
Quebrar formulários longos em seções fáceis de gerenciar. Formas em pedaços curtos são menos intimidante e mais propensos a ser concluída.
Grandes varejistas on-line (como Amazon.com) Usar esse método para obter os detalhes que eles precisam para encomendas sem tornar o processo muito doloroso.
Mark campos obrigatórios claramente. Se algumas partes do seu formulário não pode ser deixado em branco quando os usuários enviar o formulário, marcar os campos de forma clara.
Você pode identificar os campos obrigatórios por
Fazê-los em negrito
Usando uma cor diferente
Colocar um asterisco ao lado deles
Escrever mensagens de erro útil, amigável. Verifique se o seu retorno validação de formulário faz sentido para os visitantes do site (consulte-os com um grupo de testadores só para ter certeza). Nada gira visitantes longe como uma mensagem codificada, inúteis. (# 147-Type 42 erro # 148- pode significar algo para um programador, mas não para qualquer outra pessoa.)
Informar aos usuários que tipo de informação de que necessitam para o formulário. Se os usuários precisarem de alguma informação em suas mãos antes de preencher o formulário, um gateway de forma A página pode detalhe tudo usuários devem ter antes de começar a preencher o formulário.
A série de formas que RateGenius usa para reunir informações para empréstimos de carro e empréstimo de refinanciamento são excelentes exemplos de formulários longos que coletam uma variedade de diferentes tipos de dados usando todos os elementos forma de marcação disponíveis.