Come domare le forme in Web Design
I moduli sono spesso considerati uno degli elementi HTML più dolorosi da programmare. Ma la progettazione e lo sviluppo della forma sono progrediti a passi da gigante; non è così difficile come una volta.
Detto questo, mentre l'industria ha compiuto enormi progressi, alcuni ostacoli sono ancora in atto. Alla fine, le forme di domare sono possibili; ci vuole solo un po 'di lavoro.
In questo post, daremo un'occhiata ad alcuni dei controlli di modulo più utilizzati e a diversi strumenti e plug-in che dovrebbero aiutarti con la distribuzione di moduli nei tuoi siti web.
Se hai altri suggerimenti o link ad altre risorse utili, sentiti libero di postarli nei commenti.
Abbattere i controlli
Iniziamo dividendoli in due bucket, perché alcuni controlli di forma non hanno mai avuto grossi problemi con cui lavorare.
Controlli amichevoli
I controlli più facili da utilizzare sono la casella di input di base, l'area di testo e il pulsante. Funzionano bene con CSS standard e, fortunatamente, sono gli elementi di forma più comuni. Se non hai bisogno di usare quelli più difficili, allora sei fortunato.
Con il progresso degli angoli arrotondati di CSS3, rilascia ombre e sfumature, molti degli stili più comuni ora sono ancora più semplici. Non hai nulla da temere con questi controlli.
Controlli fastidiosi
Alcuni altri controlli di forma possono essere un enorme dolore al collo. Ad esempio, se si progetta un controllo a discesa estremamente stilizzato, è probabile che lo sviluppatore desideri avere una chat con te. Le opzioni per lo styling saranno piuttosto limitate: colore del bordo, spaziatura, colore dello sfondo, quel genere di cose. Se hai bisogno di più styling di questo, ti suggerisco di consultare lo sviluppatore per assicurarti di non creare un grosso problema per loro.
I controlli di forma fastidiosi includono:
- seleziona più,
- seleziona il menu a discesa,
- caselle di controllo,
- tasti della radio,
- upload di file.
Strumenti moderni per le forme
Come accennato, sono disponibili numerosi strumenti incredibili per aiutarti a modellare i controlli del modulo.
Formalizzare è la tua arma segreta per far sì che i controlli di base e gli stili di base si comportino in modo coerente nei vari browser. E i suoi stili predefiniti sono puliti e belli. Questa fantastica libreria funziona perfettamente anche con una vasta gamma di librerie JavaScript, come jQuery , dojo e MooTools .
Sostituzione del modulo di controllo
Se vuoi fare alcune cose radicali in un modulo, sono disponibili strumenti utili. Una tattica brillante per domare i moduli web è nascondere il controllo effettivo e sostituirlo interamente con uno fabbricato. Questo ti dà un controllo molto maggiore su come il form esegue il rendering.
Un grande esempio di questo è Uniforme , un plug-in jQuery per la creazione di moduli chiari. È disponibile in tre diversi temi. E se vuoi creare un tema personalizzato, usa semplicemente il servizio Generatore di CSS per skin facilmente il plug-in.
Un altro plug-in di jQuery Niceforms . Anche se non ha la comoda funzionalità re-skinning di Uniform, offre uno stile di base che potrebbe adattarsi perfettamente alle tue esigenze così come sono.
Infine, c'è l'estensione commerciale jQuery Wijmo . Il modulo che ci interessa qui è il decoratore di forme , che è in realtà gratuito da usare. Affronta alcuni dei controlli più problematici: caselle di controllo, pulsanti di opzione e menu a discesa. Essendo parte di una biblioteca commerciale più ampia, questo strumento offre alcuni vantaggi, i più importanti dei quali sono forti documentazione e pagato supporto . Infine, adoro il modo in cui gestisce lo skinning; usa il jQuery UI ThemeRoller , rendendo facile il lavoro di disegni personalizzati.
Controlli di moduli inventati
Infine, se non esiste un controllo di forma che faccia ciò di cui hai bisogno, potresti inventarne uno! Alcune persone molto intelligenti hanno già fatto molto di questo, e forse uno dei loro strumenti soddisfa già le tue esigenze.
Sliders
Una cosa che manca all'HTML standard (ma è una parte di HTML5) è un controllo di base del cursore. Ci sono molte risposte a questo, incluso uno da Wijmo , che si basa sul slider jQuery UI .
Uploaders
Mentre è possibile utilizzare il controllo di input dei file per consentire agli utenti di selezionare un file da caricare, si potrebbe desiderare qualcosa di un po 'più snella, soprattutto se i caricamenti di file sono fondamentali per il tuo sito web. Una delle migliori soluzioni è Uploadify . Permette agli utenti di selezionare più file e visualizzare i progressi. Viene fornito con una varietà di opzioni di layout e funzionalità.
Caselle di controllo stile slider e pulsanti di opzione
Un elemento dell'interfaccia utente popolare (grazie all'iPhone) è l'interruttore on / off che scorre da un lato all'altro. Con questo pratico plug-in jQuery , puoi trasformare una casella di controllo di base o un pulsante di opzione in uno solo. Indipendentemente dal fatto che si chiami un controllo di modulo inventato o uno strumento di sostituzione di moduli, è un ottimo modo per consentire agli utenti di attivare e disattivare le opzioni.
Pulsanti creativi
Interfaccia utente di jQuery è un'altra interessante presa sui controlli di base. Cosa etichetta come pulsanti potrebbe anche essere utilizzato per creare set di opzioni basati su pulsanti, pulsanti di opzione e caselle di controllo. In tal modo, trasformi questi controlli in una diversa forma visiva. Nell'immagine qui sotto c'è un set di pulsanti radio disegnati come una fila di pulsanti.
Form HTML5
HTML5 ha offerto molte possibilità interessanti ai moduli web. Anche se è oltre lo scopo di questo articolo, è comunque pertinente. Ecco alcune risorse chiave per aiutarti a scavare:
- “ Una forma di follia , "Dive Into HTML5;
- “ Divertimento con i moduli HTML5 "Richard Shepherd;
- “ Form HTML5 , "Wufoo;
- “ Avere un Field Day con moduli HTML5 "Inayaili de León.
In conclusione, i controlli dei moduli rappresentano uno degli ostacoli più importanti nello sviluppo di un sito Web di base.
Un progettista che comprende i limiti, conosce gli strumenti e riconosce le opportunità per facili ritocchi sarà in grado di prendere decisioni informate che alla fine miglioreranno la linea di fondo.