Criação dinâmica de formulários com MForm
Quando comecei a trabalhar com desenvolvimento web, uma das minhas primeiras funções eram a criação de formulários html para vários propósitos, como páginas de contato, formulário de reservas, etc.
Eu sempre achei um saco ter que fazer todos aqueles formulários um por um, além de ter que validá-los na parte client-side por meio de javascript.
De tanto fazer esses formulários, um dia eu prometi a mim mesmo que criaria um script que fizesse todo esse trabalho braçal de criar os campos, estilizar e validar, de uma forma mais dinâmica e automática.
E eis que esse dia chegou, conheça o MForm! 
O MForm (M, de Marcus! =P) é um script ainda em fase de desenvolvimento mas ele já consegue ter uma série de features que ajudam muito no dia a dia do desenvolvedor client-side.
Você pode ver um exemplo online do MForm clicando aqui.
Funcionalidades
- Criação de um formulário estilizado com css
- Criação de campos inputs do tipo text, radio e hidden
- Criação de campos textarea
- Validação de campos com javascript com jQuery e o plugin FormValidator, com algumas alterações minhas, bem como a tradução para Português (Brasil).
Limitações
Como essa é a versão 1.0 do MForm ela ainda algumas limitações. Nessa versão não tem a opção de criar campos do tipo select que é gerado dinamicamente de uma forma mais complexa. Uma outra limitação é que só consegui gerar um conjunto de campos input do tipo radio.
Porém já disponibilizarei essa primeira versão, que será de ajuda e ao mesmo tempo vocês podem testá-la e até mesmo aprimorá-la.
Como funciona?
Bom, o funcionamento para a criação dos campos se dão de uma forma de arrays. Cada array é um campo que queria adicionar no formulário.
Cada array é criado com 5 componentes:
- name é o valor do atributo name do campo criado
- label é o nome que ficará dentro de uma tag label
- type é o tipo do campo. Pode ser text(inputs do tipo text), radio(inputs do tipo radio), textarea(campos de textarea) e hidden(inputs do tipo hidden)
- valida é o campo que indicará se ele terá validação ou não. 1 para true e 0 para false
- valor é onde entra o valor do atributo value do campo. Ele é muito usado quando temos que mostrar o formulário já com os dados inseridos.
Por fim, todos os campos (que são arrays) são inseridos num array principal (que chamo de campos) e esse array campos é colocado como o primeiro parâmetro da função geraMForm() que é responsável por trazer o formulário gerado dinamicamente. Já o segundo parâmetro da função é pra onde esse formulário desse ser enviado.
Download
O MForm pode ser baixado aqui. Nesse arquivo está a o MForm junto com um arquivo exemplo.
Você também pode estilizar o formulário de acordo com sua vontade. Basta selecionar o arquivo forms.css e modificá-lo de acordo com sua preferência.
Então, o que vocês acharam do MForm? Quanto mais feedback eu obtiver de vocês mais o MForm se tornará mais robusto e ajudará a todos na criação de formulários de uma forma mais ágil e eficiente.
Nossa cara! isso vai ser uma incrÃvel mão na roda para mim, pois assim como você estava eu estou atualmente trabalhando nessa árdua tarefa de criar formulários e é realmente cansativo criá-los do zero.
Ta só faltando a opção de criar os select (normalmente tem selects para o cara selecionar o estado e tal), mas para a versão 1.0 ele ta show!
parabéns!
Muito bom, show de bola!! Estou utilizando o resultado (html) em meus formulários ASP, muito bacana, parabéns