jQuery Form Plugins – Collection
Un form non è altro che l’interfaccia di un’applicazione che consente all’utente di inviare uno o più dati inseriti nello stesso. In questo post abbiamo una selezione di plugin jquery e tutorial per sviluppare e migliorare i Form. Sono presenti plugin per il controllo e la convalida di dati inseriti, mascheramento e controllo della robustezza di una password, captcha e altro ancora.
Come implementare un calendario con Date Pickers (selezionatore di date) in un’applicazione web in modo semplice e veloce tramite 25 utili e funzionali plugin jQuery raccolti e presentati nell’articolo di tripwiremagazine.com
Gli utenti di internet eseguono login giornalmente, immaginate quindi quante volte il form di login viene usato ogni giorno su un singolo web site.
Solitamente il box per il login è molto semplice e non porta via molto tempo al creatore ma questa soluzione accelererà le cose per voi e gli utenti: in questo tutorial apprenderete come creare, usando CSS e un poco di jQuery, un dropdown box per effettuare il login.
Il tutorial che segue è davvero interessante in quanto mostra come utilizzare MotionCAPTCHA, un plugin per JQuery grazie al quale è
possibile inserire in un sito web un box che svolge la funzione di un CAPTCHA (ossia i classici testi antispam che troviamo ormai quasi ovunque). La novità consiste nel fatto che il CAPTCHA questa volta non è un testo bensì una figura che l’utente dovrà tracciare con il proprio mouse.
PWChecker è un plugin gratuito JQuery che può essere integrato nei form dove dobbiamo richiedere la creazione di una password. PWChecker aiuta l’utente a valutare il livello di protezione della password fornita, man mano che vengono inseriti i caratteri il plugin classifica la password come: Weak, Medium, or Strong.
Ecco un semplice plugin che trasforma dei form correttamente formattati in html in form che supportano labels nei campi. Questi labels (etichette) compaiono quando il campo è selezionato e svaniscono quando inizia l’inserimento del testo. Cancellare un campo e deselezionarlo fa tornare nuovamente il labels.
Con questo utile plugin jQuery, è possibile inserire le finestre per il login, sign-up e recupero password in una singola pagina web, utilizzando un menu a discesa.
In questo breve tutorial, creeremo un sostituto per le checkbox a scelta multipla di default sul browser, utilizzando però un semplice plugin jQuery. Questo permetterà di valorizzare i vostri moduli ma al tempo stesso ripiegare sui controlli di default se Javascript non fosse disponibile.
Avete mai desiderato poter personalizzare le checkbox a scelta multipla, i menù a scorrimento, i radio button a scelta esclusiva e i campi di caricamento file dei vostri siti? Avete mai voluto controllare l’aspetto e lo stile degli elementi dei moduli su ogni browser? Se la risposta è si, Uniform diventerà il vostro miglior amico. Uniform nasconde i controlli dei moduli standard con dei controlli personalizzati. Lavora in sincronizzazione con i vostri reali elementi per assicurare accessibilità e compatibilità.
In questo tutorial vedremo come creare delle caselle check box con CSS e jQuery, nuove nella forma e nel design.
Si partirà con l’analizzare il codice Html, come ossatura del nostro progetto, per poi aggiungere il codice CSS e JQuery.
Questo plugin può essere utile per modificare pannelli amministrativi e di configurazione, o essere anche usato per i pulsanti radio.
jFormer è un form framework scritto con jQuery che permette di generare rapidamente form belli e conformi agli standard.
Sfruttando le più recenti tecniche di web design, jFormer consente di creare moduli Web che: Convalidano lato client, C
convalidano lato server ed eseguono processi senza cambiamenti di pagina (con AJAX)
Il tutorial di oggi vi insegnerà come creare un contatore di caratteri utilizzando JQuery.
Per essere precisi non si può parlare di un vero e proprio tutorial in quanto più che altro si limita alla condivisione del codice utile alla realizzazione del contatore.
Come al solito troverete una demo che vi illustrerà il funzionamento del contatore.
State cercando da tempo il codice per un formulario di contatti che funzioni correttamente? Siete nel posto giusto.
Per assicurarci del suo funzionamento, il formulario verrà prima testato senza JavaScript e CSS. Una volta sicuri che tutto giri come vogliamo, allora sarete liberi di personalizzare il foglio di stile associato.
Inoltre il formulario è perfettamente utilizzabile anche con JavaScript disabilitato.
Questo tutorial vi spiegherà come sostituire i select elements ordinari del controllo del browser con una versione migliorata e potenziata che mantiene però le medesime caratteristiche. Tutto questo, per ovviare al problema che si pone di fronte a chi, gestendo il proprio sito web, non può modificare oltre una certa estensione i select elements. Viene fornito il codice HTML, il CSS e le librerie jQuery necessarie alla modifica.
Ecco un facile tutorial per creare un dropdown box con l’ausilio di jQuery. Lo script sarà molto semplice ed utilizzerà soltanto il metodo .hide() e .show().
Sarà inoltre integrata una funzione che permetterà di nascondere il box cliccando in qualunque parte del documento. Dopo avervi illustrato il codice HTML e CSS il tutorial porrà particolare attenzione alla funzione per far apparire/scomparire il box con un click fornendo due metodi, uno base e uno alternativo.
Oggi vi proponiamo ezMark, un utilissimo plugin per JQuery che vi permetterà di creare pulsanti e checkbox (i classici quadratini in cui vanno inseriti i segni di spunta). EzMark è stato testato con tutti i browser più diffusi e ne è risultato pienamente compatibile.
In questo tutorial che vi proponiamo viene spiegato come utilizzare una importante funzione di jQuery che ci permetterà di ottimizzare al meglio i nostri form. Si tratta di una funzione che, sfruttando gli input immessi dagli utenti, completa in modo automatico la parola partendo dalle prime lettere immesse, rendendo, così, disponibile all’utente una serie di termini tra cui scegliere.
Nel post indicato è possibile trovare una guida su come integrare un plug-in per delle maschere d’input riguardanti le librerie javascript di jQuery. Il plug-in, una volta inserito, permetterà di inserire facilmente i dati in un certo formato (ad esempio impostare Nome e Cognome con i caratteri da a-z e da A-Z, il numero di telefono da 0-9, ecc…). Nel post troverete i codici per integrare queste funzioni nel proprio sito web e visualizzare anche degli esempi dimostrativi.
Nel post segnalato verrà trattato l’utilizzo del framework jQuery Mobile per la creazione e lo sviluppo dei form per i dispositivi mobili come smartphone, cellulari e tablet. I form sono delle interfacce utilizzate in tantissimi siti web per inviare uno o più dati ad un database oppure per inviare delle email. Grazie a questa guida sarà possibile creare form per dispositivi mobili utilizzando jQuery Mobile, grazie ad un ricco tutorial con tanto di codici html e immagini illustrative.
Questo plugin è nato dall’esigenza di avere un’alternativa alle tradizionali soluzioni CAPTCHA trovate nella maggior parte dei moduli web. L’autore voleva evitare di avere quelle orribili e confuse lettere alla fine di ciascun modulo, ma avevabisogno comunque di un modo per evitare che il sito venisse inondato di spam. E’ per questo che è nato slideLock, una soluzione CAPTCHA alternativa alle solite.
Elegante, bello e funzionale modulo di inserimento dati a scorrimento che dà informazioni di validità all’utente dopo ogni step. Questo form fa risparmiare molto spazio ed è di facile accesso; funziona praticamente come uno slideshow, ma la differenza è che mostra i campi di un form da riempire invece di immagini.
In questo post viene segnalata un’ottima raccolta di plugin jQuery da utilizzare esclusivamente per i form. I plugin sono ben 27: abbiamo validator di dati inseriti, controllo della robustezza di una password, current field highlighting, mascheramento della password, dropdown, autosave e molti altri.
