Como domar formulários em web design
Os formulários são geralmente considerados um dos elementos HTML mais difíceis de serem programados. Mas o design e o desenvolvimento de formulários progrediram aos trancos e barrancos; não é tão difícil quanto antes.
Dito isto, enquanto a indústria fez um enorme progresso, alguns obstáculos ainda estão em vigor. No final, formas domesticadas são possíveis; apenas leva algum trabalho.
Neste post, vamos dar uma olhada em alguns dos controles de formulários mais usados e em diferentes ferramentas e plugins que devem ajudá-lo com a implantação de formulários em seus sites.
Se você tiver outras dicas ou links para outros recursos úteis, sinta-se à vontade para publicá-los nos comentários.
Quebrando os controles
Vamos começar dividindo-os em dois blocos, porque alguns controles de formulário nunca foram muito difíceis de se trabalhar.
Controles amigáveis
Os controles mais fáceis de trabalhar são a caixa de entrada básica, a área de texto e o botão. Eles funcionam bem com CSS padrão e, felizmente, são os elementos de formulário mais comuns. Se você não precisa usar os mais difíceis, então você tem sorte.
Com o progresso de cantos arredondados CSS3, sombras e gradientes, muitos dos estilos mais comuns são agora ainda mais fáceis. Você não tem nada a temer com esses controles.
Controles problemáticos
Alguns outros controles de formulário podem ser uma dor enorme no pescoço. Por exemplo, se você criar um controle suspenso extremamente estilizado, o desenvolvedor provavelmente desejará conversar com você. Suas opções de estilo serão bastante limitadas: cor da borda, preenchimento, cor de fundo, esse tipo de coisa. Se você precisar de mais estilo do que isso, sugiro que consulte o desenvolvedor para garantir que você não esteja criando um grande problema para eles.
Os controles de formulários problemáticos incluem:
- selecione vários
- selecione o menu suspenso
- caixas de seleção,
- botões do rádio,
- upload de arquivos.
Ferramentas modernas para formulários
Como mencionado, várias ferramentas incríveis estão disponíveis para ajudá-lo a criar controles de forma.
Formalizar é a sua arma secreta para obter controles básicos de formulário e estilos para se comportar de forma consistente em todos os navegadores. E seus estilos padrão são limpos e bonitos. Essa incrível biblioteca também funciona perfeitamente com uma ampla variedade de bibliotecas JavaScript, como jQuery , Dojo e MooTools .
Substituição de controle de formulário
Se você quiser fazer algumas coisas radicais em um formulário, estão disponíveis ferramentas úteis. Uma tática brilhante para domesticar os formulários da web é ocultar o controle real e substituí-lo completamente por um fabricado. Isso lhe dá muito mais controle sobre como o formulário é processado.
Um ótimo exemplo disso é Uniforme , um plug-in do jQuery para criar formulários sofisticados. Ele vem em três temas diferentes. E se você quiser criar um tema personalizado, basta usar o serviço Gerador de CSS para descascar facilmente o plug-in.
Outro plug-in do jQuery Niceforms . Embora não tenha a funcionalidade de re-skinning da Uniform, oferece um estilo básico que pode muito bem atender às suas necessidades.
Finalmente, há a extensão jQuery comercial Wijmo . O módulo que nos interessa aqui é o decorador de formulários , que é realmente livre para usar. Ele aborda alguns dos controles mais problemáticos: caixas de seleção, botões de opção e menus suspensos. Fazendo parte de uma biblioteca comercial maior, esta ferramenta traz alguns benefícios, os principais dos quais são fortes documentação e pago Apoio, suporte . Finalmente, adoro o modo como lida com a pele; usa o jQuery UI ThemeRoller , facilitando o trabalho de projetos personalizados.
Controles de formulários inventados
Finalmente, se não houver um controle de formulário que faça o que você precisa, você pode inventar um! Algumas pessoas muito inteligentes já fizeram muito isso, e talvez uma de suas ferramentas já atenda às suas necessidades.
Sliders
Uma coisa que está faltando no HTML padrão (mas é uma parte do HTML5) é um controle deslizante básico. Há muitas respostas para isso, incluindo um de Wijmo , que é baseado no controle deslizante de jQuery UI .
Uploaders
Embora você possa usar o controle de entrada de arquivo para permitir que os usuários selecionem um arquivo para upload, talvez você queira algo um pouco mais sofisticado, especialmente se os uploads de arquivos forem essenciais para seu website. Uma das melhores soluções é Uploadify . Ele permite que os usuários selecionem vários arquivos e visualizem o progresso. Ele vem com uma variedade de opções de layout e funcionalidade.
Caixas de seleção de estilo deslizante e botões de opção
Um elemento popular da interface do usuário (graças ao iPhone) é o botão liga / desliga que desliza de um lado para o outro. Com este prático plug-in jQuery , você pode transformar uma caixa de seleção básica ou um botão de opção em um. Quer você chame isso de controle de formulário inventado ou de ferramenta de substituição de formulário, é uma ótima maneira de permitir que os usuários ativem e desativem as opções.
Botões criativos
IU do jQuery é outra abordagem interessante sobre controles básicos. O que ele identifica como botões também pode ser usado para criar conjuntos de opções com base em botões, botões de opção e caixas de seleção. Ao fazer isso, você transforma esses controles em uma forma visual diferente. Na imagem abaixo, há um conjunto de botões de opção com a forma de uma fileira de botões.
Formulários HTML5
O HTML5 trouxe muitas possibilidades interessantes para formulários da web. Embora esteja além do escopo deste artigo, ainda é relevante. Aqui estão alguns recursos importantes para ajudá-lo a entrar:
- “ Uma forma de loucura , “Mergulhe no HTML5;
- “ Diversão com formulários HTML5 ”, Richard Shepherd;
- “ Formulários HTML5 ”, Wufoo;
- “ Tenha um dia de campo com formulários HTML5 Inayaili de León.
Em conclusão, os controles de formulário são um dos obstáculos mais críticos no desenvolvimento de um site básico.
Um designer que entende as limitações, conhece as ferramentas e reconhece oportunidades para ajustes fáceis será capaz de tomar decisões informadas que, finalmente, melhorar o resultado final.