Le forme possono essere uno degli aspetti più complessi del tuo lavoro di sviluppo front-end. Sono molto più complicati della maggior parte degli oggetti con cui lavorerai sia in prospettiva HTML che CSS.
Se sei stato frustrato con le forme in passato, non preoccuparti, c'è speranza! Oggi esamineremo alcuni strumenti e framework che ti aiuteranno a portare a termine il lavoro senza i grattacapi.
Due modi per pelle questo gatto
Daremo un'occhiata a due diversi tipi di strumenti oggi che possono potenzialmente aiutarti a creare forme sorprendenti: framework e app web.
I quadri rappresentano il percorso fai-da-te, ti danno stile e funzionalità pre-costruiti, pur consentendo il tipo di regno libero che solo la codifica a mano può offrire. Il livello di conoscenza e talento qui è ancora abbastanza alto, ma il guadagno è che non pagherai un centesimo e manterrai la completa libertà di fare quello che vuoi.
Al contrario, le app per la creazione di moduli rappresentano una soluzione automatizzata. Questi sono spesso alimentati dai sistemi di progettazione WYSIWYG che impediscono di dover scrivere un singolo carattere di codice. Inoltre, di solito sono raggruppati con un servizio che accetta e cataloga moduli di invio, che è un grande vantaggio. Lo svantaggio è che non sono sempre gratuiti e che le opzioni di personalizzazione sono più limitate rispetto a se si stesse codificando a mano.
Diamo un'occhiata ad alcune delle versioni più popolari ed efficaci di entrambi i tipi di strumenti di forma.
Frameworks
Il primo è la rotta del framework. Tutti questi sono nomi che riconoscerai, ma hai mai dato un'occhiata alle loro caratteristiche del modulo? Tendono ad essere abbastanza estesi e utili.
bootstrap
Twitter Bootstrap è diventato un toolkit estremamente popolare e un punto di partenza per gli sviluppatori. Ti dà una solida base su cui lavorare e può radere ore e ore dalla parte anteriore del tuo flusso di lavoro.
Lo stile del modulo in Bootstrap è straordinariamente ampio. Puoi mettere le etichette del modulo in cima o di lato, i campi possono essere quadrati o arrotondati, aggiungere caselle di controllo e selezionare menu; tutto questo e molto altro in una varietà di stili diversi tra cui scegliere.
Come con tutto ciò che avviene in Bootstrap, estrarre questo è facile come delineare alcuni HTML di base con alcune classi accuratamente posizionate. La documentazione è abbastanza completa, ma ecco un esempio per darti un'idea di come funzionano i moduli con Bootstrap.
Abbastanza semplice! Tieni presente che tutti questi elementi saranno pre-impostati, il che significa che non dobbiamo ora entrare e giocherellare con un mucchio di CSS. Sembrano grandi appena fuori dalla scatola!
Ancora una volta, ci sono abbastanza caratteristiche qui che sarete in grado di costruire qualsiasi tipo di forma che volete con pochissimo sforzo. C'è anche una libreria JavaScript completamente automatica completa chiamata "typeahead".
Ora, diciamo che non vuoi usare Bootstrap per costruire il tuo sito, ma vorrebbe comunque approfittare di queste fantastiche funzionalità, è possibile? Scommetti. Basta andare al builder di download personalizzato e deselezionare tutto tranne il modulo moduli. Questo ridurrà il tuo download solo agli elementi necessari per la creazione del modulo.
Fondazione
Foundation di Zurb ha anche un sacco di caratteristiche di grande forma. Puoi creare alcuni moduli davvero avanzati utilizzando tecniche molto simili a ciò che abbiamo appena visto in Bootstrap.
Il codice per implementare i moduli in Foundation dovrebbe apparire abbastanza simile a quello che abbiamo visto prima. Stiamo solo usando gli elementi di base che ci offre lo stesso HTML5 con alcuni nomi di classi speciali:
Come puoi vedere, con Bootstrap o Foundation, non c'è molto da imparare oltre a quali elementi HTML usare e dove. Il file CSS incluso farà tutto il lavoro di dirottamento di questi elementi e renderli belli.
Il supporto per la forma della Fondazione non lo è abbastanza come approfondito ed esteso come quello di Bootstrap, ma ricorda che questa potrebbe essere una buona cosa. Se stai costruendo moduli semplici, non hai sempre bisogno del fluff.
Una cosa che la Fondazione ha è piuttosto interessante è un JavaScript che ti consente di implementare i tuoi elementi del modulo personalizzato. Ad esempio, se si desidera creare un design personalizzato per la casella di controllo, Foundation rende semplice come alcune classi e un piccolo frammento di codice JavaScript.
52 Framework
52 Framework è stato uno dei primissimi framework HTML5 a colpire il web. Non sono sicuro di quanto sia stato sviluppato attivamente in questi giorni, ma in effetti include alcune funzionalità di base del modulo.
Qui puoi vedere una pagina demo e una guida video che ti guida attraverso le funzionalità qui.
In definitiva, penso che tu stia molto meglio con Basecamp o Foundation, che sono molto più impressionanti, approfonditi e aggiornati. Tuttavia, se hai già utilizzato 52 Framework in passato e se ne stanno già a proprio agio, potresti voler esaminare le funzionalità del modulo.
Formalizzare
Formalize è un framework CSS volto a rendere lo stile della forma coerente su tutti i principali browser. Lo accoppi alla tua libreria JavaScript preferita e fa tutto il lavoro pesante per te.
Formalize è stato creato da Nathan Smith, che ha anche creato il 960 Grid System. Ovviamente, poiché questo è il caso, sai che Formalize è di prim'ordine e aiuta la maggior parte dei browser a supportare le ultime funzionalità dei moduli HTML5.
Formee
Formee è un altro ottimo framework dedicato esclusivamente a aiutarti a costruire forme perfette.
Formee ha tre obiettivi principali. Il primo obiettivo è rendere più semplice il layout. Formee è basato sulle idee di 960.gs e consente di utilizzare convenzioni simili per disporre i moduli. Il secondo obiettivo è la compatibilità cross-browser. Formee normalizza l'aspetto dei tuoi moduli su tutti i principali browser. Il terzo obiettivo è rendere le forme fantastiche.Viene applicato un accattivante stile predefinito che può essere completamente personalizzato in base alle proprie esigenze.
Costruttori di moduli
Ora che abbiamo visto alcuni dei migliori framework dei form in circolazione, passiamo a un paio di builder e servizi form formidabili.
Wufoo
Se stai parlando di costruttori di moduli, non puoi non riuscire a far apparire Wufoo, che è di gran lunga una delle migliori opzioni in questo spazio.
Wufoo rende incredibilmente facile creare forme di web di tutti i tipi, che tu sappia un po 'di codice o meno. Tutto quello che devi fare è trascinare gli elementi del modulo pre-formattato e precodificato sulla tua tela, dove puoi modificarli e disporli con facilità di trascinamento.
Non posso davvero dire abbastanza di quanto sia grande Wufoo sia come costruttore sia come servizio generale di gestione di moduli web. Anche se stai bene con le forme per lo styling a mano, c'è tutta la roba di sviluppo del backend che diventa davvero complicata davvero veloce. E-mail, notifiche, accettazione dei pagamenti, analisi, caricamento di file, se non sai cosa stai facendo, questa roba può essere un incubo. Maniglie di Wufoo tutti di esso per te. Al posto dei mal di testa, si ottiene un servizio semplificato e una bella dashboard per gestire tutti i moduli.
Wufoo ha un piccolo account gratuito per iniziare, e se le tue necessità sono fondamentali potrebbe essere tutto ciò di cui hai bisogno. Quando sei pronto per i campionati più importanti, stai comunque cercando tra i $ 15 ei $ 200 al mese.
JotForm
Se stai cercando una buona alternativa a Wufoo, dai un'occhiata a JotForm. Questo fantastico servizio è in circolazione da molto tempo, l'ho usato personalmente per anni prima di aver mai sentito parlare di Wufoo.
Per la maggior parte, le funzionalità di JotForms sono paragonabili a quelle di Wufoo. Il form builder e le funzionalità di reporting non sono belle come quelle di Wufoo, ma sono ancora perfettamente funzionanti e così facili da usare che chiunque può creare grandi forme con loro.
Come Wufoo, JotForm può gestire tutte le tue complicate esigenze come il pagamento tramite PayPal o stripe, CAPTCHA, completamento automatico e altro ancora.
Una cosa che JotForm ha davvero intenzione di fare è a grande struttura dei prezzi. Offrono a tutti gli utenti moduli illimitati con campi illimitati, quindi aumentano il costo in base a quanti invii ricevi, storage di cui hai bisogno, ecc. Il piano premium è di soli $ 9,95 al mese e il piano professionale è solo $ 49,95, che potrebbe potenzialmente risparmiare sei una fortuna se stai guardando il piano Wufoo da $ 200 / mese.
Cosa usi?
La costruzione di moduli, lo styling e il reporting hanno la tendenza a spingere progetti di progettazione web apparentemente di base in un territorio di sviluppo di alto livello. Non ti preoccupare, non sei il solo ad essere confuso su questa roba, ed è per questo che ci sono così tanti ottimi strumenti come quelli sopra per aiutarti.
Lascia un commento qui sotto e dicci cosa pensi di queste opzioni e quale metodo o servizio utilizzi per i moduli.