Form: costruire un modulo

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).

google-1google-2

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