08 Mag
2017
Creare Form con validazione e CAPTCHA in Joomla 3 - prima parte
Immagine da Joomla
Inizio una serie di articoli dedicata alla creazione di Form HTML, completi di validazione dati e controllo CAPTCHA. Niente di nuovo nè originale; ma visto che mi capita con una certa frequenza di creare dei form con queste caratteristiche, mi torna utile creare un vademecum da consultare. La cosa più utile, a parer mio, è che non utilizzo componenti o plugin aggiuntivi, che cerco sempre di evitare se possibile.
Le procedure descritte negli articoli sono state testate con Joomla 3.7.0 utilizzando il template base Protostar.
Questo primo articolo è un'introduzione: parto dalla creazione di un form, limitatamente alla presentazione dei campi da compilare, cosa davvero banale. Serve solo per avere un punto di partenza cui fare riferimento per gli esempi ed il codice degli articoli successivi.
Tutti sappiamo che un form è un elemento che contiene campi di inserimento dati, che possono essere di varie tipologie: testo, casella a discesa, caselle di controllo o opzione, etc.. Questi dati vengono elaborati dopo l'inserimento e sono gestiti solitamente con un linguaggio server-side per essere inseriti in basi di dati, inviati via mail o altro.
Sottolineo che questi articoli NON descrivono la gestione dei dati trasmessi via form, che forse tratterò in altro momento; affrontano esclusivamente la parte di presentazione, validazione e controllo anti bot.
Passo subito alla struttura del form. Si tratta di una serie di campi standard: testo, casella di opzione, casella di controllo, area di testo. Niente altro. Ecco il codice corrispondente:
<form action='#' method='post' id='form_demo'>
<fieldset>
<legend>I tuoi dati</legend>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><span class="icon-user"></span></span>
<input class="input-xxlarge" type='text' placeholder='Il tuo nome (3-15 caratteri, richiesto)' name='nome' id='nome' />
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><span class="icon-user"></span></span>
<input class="input-xxlarge" type='text' placeholder='Il tuo cognome (3-15 caratteri, richiesto)' name='cognome' id='cognome' />
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><span class="icon-plus"></span></span>
<input class="input-min" type='text' placeholder='Età (18-60, richiesto)' name='eta' id='eta' />
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><span class="icon-envelope"></span></span>
<input class="input-xxlarge" type='text' placeholder='Il tuo indirizzo email (richiesto)' name='email' id='email' />
</div>
</div>
<div class="control-group">
<div><strong>Genere</strong> (richiesto)</div>
<label class='radio inline'>
<input id='maschio' type='radio' name='sesso' value='Maschio' /> Maschio
</label>
<label class='radio inline'>
<input id='femmina' type='radio' name='sesso' value='Femmina' /> Femmina
</label>
</div>
<div class="control-group">
<div><strong>Il tuo sistema operativo</strong> (scegli almeno un sistema)</div>
<label class='checkbox inline'>
<input type='checkbox' name='os[]' id='win32' value='Windows' /> OS Windows 32/64 bit
</label>
<label class='checkbox inline'>
<input type='checkbox' name='os[]' id='linux' value='Linux' /> Linux
</label>
<label class='checkbox inline'>
<input type='checkbox' name='os[]' id='mac' value='Mac' /> Mac OS
</label>
</div>
<div class="control-group">
<textarea class='input-xxlarge' id='note' name='note' rows='5' placeholder='Altre note e richieste'></textarea>
</div>
</fieldset>
<div class="control-group text-center">
<button class="btn btn-primary" type='submit' id='invia_form'>Invia</button>
</div>
</form>
Se si fa clic su Invia non succede nulla: viene solo ricaricata la pagina, i campi obbligatori non sono verificati. Come ho detto, in questo articolo definiamo un elemento base su cui costruire i successivi. L'unica osservazione degna di nota è lo stile con cui si presentano i vari campi, basato su Boostrap, che è integrato in Joomla 3.7.0. Purtroppo è una versione datata, la 2.3.2 credo, ma essendo quella fornita di serie ci si adegua.
La documentazione completa delle classi CSS di Bootstrap 2 dedicate ai form si trova a questa pagina.
Il risultato del codice precedente con gli stili Bootstrap è visibile di seguito. Niente di speciale, si può certamente studiare qualcosa di più elegante. Ma è più che sufficiente per i nostri scopi.
Questo conclude l'articolo introduttivo. Nel prossimo passiamo a qualcosa di un po' più complesso: il controllo di validità dei dati inseriti nei campi tramite jQuery Validation Plugin, che è l'unico componente non presente tra quelli forniti di serie con Joomla 3.
Tags: Joomla, Personalizzare template, Twitter Bootstrap, jQuery