Le form, note in italiano anche come “moduli” sono delle strutture che permettono all’utente di inserire dei dati o di effettuare delle scelte.
La progettazione e il “disegno” delle form sono una processo statico, questo è il motivo per il quale possono essere create in una pagina .htm. Affinchè diventino interattive è necessario collegarle ad una parte dinamica (frontend o backend a seconda delle necessità) che si occupa di gestire la validazione, il salvataggio dei dati, o la “casua-effetto” tra la scelta compiuta e l’interfaccia presentata dal sistema.
Tag FORM
Il tag form indica l’inizio della costruzione di un modulo. Necessita del tag di chiusura </form> e di una serie di attributi, tra cui:
- name=”nomedellaform” Indica il nome (etichetta) che diamo alla form. Il nome non viene visualizzato dal browser ed è completamente trasparente all’utente finale. La necessità di dare un nome alla form (e di seguito a tutti i suoi componenti) si chiarirà quando si costruirà la parte relativa agli script. Per ora limitiamoci a dare un nome sensato, possibilmente in minuscolo e senza spaziature.
- action=”indirizzo.php” Contiene il nome del file della pagina dinamica. il contenuto dei dati della form, verranno inviati in posta elettronica (solo tramite il client di posta installato sulla macchina) all’indirizzo indicato
- method=”get/post” Indica il metodo con cui vengono inviati i dati dalla form, alla pagina dinamica. Il metodo GET passa direttamente il contenuto dei dati alla pagina dinamica, accodandoli all’indirizzo (lo si può vedere nella barra degli indirizzi).
Il metodo POST consente, invece, di inviare direttamente i dati alla pagina dinamica di destinazione, senza apporli sulla query string. Il metodo POST è ideale per l’implementazione di tutti quei sistemi che prevedono la manipolazione di dati sensibili o in generale una discreta quantità di dati, poichè la dimensione della GET è limitata a 255 bytes.
Principali tag per la composizione di un modulo
(per esempi di utilizzo e dettagli vedere l’esempio in codePen)
| <input type=”text” /> | Inserimento del testo |
| <input type=”hidden” /> | Elemento nascosto, ma che contiene un valore che viene inviato nel modulo |
| <input type=”search”/> | per indicare un campo di ricerca. Se combinato con <dataset> è possibile stilare una lista di suggerimenti |
| <input type=”password” /> | Inserimento di una password (mascherandola) |
| <input type=”file” /> | Bottone per il caricamento di un’immagine |
| <input type=”checkbox” /> | Scelta a spunta |
| <input type=”radio” name=”cinema” />Horror<br /> <input type=”radio” name=”cinema” />Commedia<br /> <input type=”radio” name=”cinema” />Drammatico<br /> |
Scelta multipla esclusiva |
| <select name=”genere”> <option>Horror </option> <option>Commedia</option> <option>Drammatico</option> </select> |
Scelta a tendina |
| <textarea></textarea> | blocchi di testo |
| <input type=”submit”/> | invia la form secondo il metodo get/post indicato alla pagina specificata nell’action |
| <input type=”button”/> | bottone che genera un’azione specificata tramite (ad esempio) javascritp |
| <input type=”reset”/> | svuota i campi della form |
| <label>Etichetta</label> | Serve per allegare informazioni agli elementi del modulo. Può essere utilizzato per marcare il testo che precede i vari componenti del modulo. |
| <fieldset> <legend>Titolo</legend> </fieldset> |
Serve per organizzare i moduli in argomenti |
See the Pen EVmJBy by Mariachiara Pezzotti (@merissimissima) on CodePen.
Tag input con type relativi a contenuti specifici
Html5 ha introdotto nuovi tipi di type per il tag input che permetto di interagire in maniera più semplice con i tipi di dato. Ne esempi, tel per i numeri di telefono, url per la raccolta di indirizzi web, date e time per inserire valori relativi al tempo. La validazione dei dati e in che modo interagire è fortemente legata sia alla dimensione javascript che css. Per capire il funzionamento degli attributi vi segnaliamo questa serie di esempi: https://miketaylr.com/pres/html5/forms2.html See the Pen HTML5 Form fields by Mariachiara Pezzotti (@merissimissima) on CodePen.
Attributi
La lista completa degli attributi disponibili sui tag per comporre i moduli è disponibile qui. Tra gli attributi più utilizzati segnaliamo:
- autocomplete (su form o su input): controlla il comportamento dei browser, qualora prevedano funzionalità di autocompletamento delle form. Ha come valori on o off, e operativamente può essere utilizzato per forzare l’off su determinati campi (emai, password o campi che vogliamo indurre l’utente a compilare a mano)
- list specifica l’id di una detaillist per i suggerimenti sui campi input
- maxlength/minlenght per limitare il numero dei caratteri sugli input
- required
- placeholder: indica un contenuto d’esempio al fine di guidare l’utente nella compilazione