Fondamenti di web design 3: FORM

A cosa servono i form?

I moduli di raccolta informazioni servono a spedire dati oppure ad autenticarsi ad aree riservate o ancora ad aggiornare i database. Caratterizzati dal consueto tag FOR con relativa chiusura dopo l’apertura, hanno necessità il più delle volte di interagire con altri linguaggi di programmazione come javascript oppure il flessibile PHP

Quali sono gli attributi dinamici dei FORM?

Per chi ha acquisito un minimo di esperienza con lo sviluppo web, attributi come ACTON e METHOD sono molto importanti. ACTION vuole risolvere il problema della spedizione dei dati a una pagina di elaborazione e l’attributo method invece decide con quale modalità ciò deve avvenire. Se vogliamo spedire le informazioni presenti sul modulo in modo nascosto e quindi fare più attenzione alla sicurezza delle nostre applicazioni, dobbiamo usare la formula method=”post” mentre se non abbiamo questa necessità di riservatezza dei dati, possiamo anche farli viaggiare sulla URL in quella famosa formula che abbiamo già visto da qualche parte che vuole il nome della pagina seguita dal punto interrogativo seguito da coppie di nome e valori legati insieme dalla & commerciale come legame. Con post l’elaborazione quindi avviene in maniera nascosta appoggiandosi direttamente al protocollo http. La discussione fatta finora esula dagli aspetti grafici statici, in quanto spesso nelle aziende vi é il web designer che passa lo scheletro al web developer che asua volta ha il compito di far muovere ossa e muscoli dell’ applicazione con codice dinamico e validazioni dinamica dei dati.

Il tag più utilizzato all’ interno dei FORM?

E’ decisamente il famoso INPUT seguito dall’ attributo TYPE che a sua volta conterrà l’ELEMENTO, dove il più famoso e anche più semplice é riconducibile a TEXT. Posso anche riempire il tag INPUT con altre tipologie di dati. Se TEXT mi permette di scrivere qualcosa nell’ area assegnata, inserendo invece PASSWORD ritroverò la stessa area di prima contrassegnata da caratteri mascherati con l’asterisco per esempio. Indispensabile é anche il SUBMIT che spedisce i dati collegato all’ attributo ACTION iniziale. Oltre a questo indispensabile per ripulire il modulo e riazzerarlo é il RESET che consente la pulizia di tutti i campi presenti all’ interno del FORM. Se invece devo permettere una selezione male/female avrò bisogno di un qualche marchingegno che mi consente di scegliere e qui entra in azione il RADIO dopo il TYPE che ha necessità di essere seguito nella sua definizione dal valore che riveste ad esempio VALUE=”one”, oltre a questo devo esternamente definire una LABEL dove leggerò che tipo di scelta mi é permesso fare. Il RADIO è un componente vincolante nel senso che se avessi la necessità di effettuare più selezioni, tipo la pizza quali caratteristiche deve avere, posso richiamare invece il CHECKBOX che é simile al cerchietto rotondo del RADIO ma non uguale (forma quadrata per esempio) e che presenta la stessa necessità di funzionare con LABEL esterne e VALUE interni come visto per il RADIO, quindi VALUE=”peperoni” per esempio. ESISTONO INOLTRE anche INPUT TYPE da riempire con componenti come EMAIL, DATE, FILE che rispettivamente validano indirizzi e-mail o date o allegati. Quando utilizzo le LABEL è molto importante che l’attributo FOR= coincida come valore assegnato con il valore del NAME presente nel componente associato, questo per legare le funzionalità.

Tutto qua? E se volesso scegliere da un menù a tendina? E se volessi inserire un area di testo più ampia che un campo testo singolo?

Questa funzionalità é offerta dal TAG SELECT che al suo interno deve ospitare nel tag di apertura del componente una NAME univoca ad esempio un name=”LIST”. Al tag di apertura della SELECT ne seguirà uno di chiusura e dentro lo spazio delimitato ci saranno i vari OPTION VALUE = riempiti con nomi univoci del tipo “OPT1”, “OPT2”, opt3 etc. In questo caso non posso però fare selezioni multiple ma SELECT mi consente anche questa opzione utilizzando un attributo da inserire al suo interno che si chiama MULTIPLE che tramite i classici CTRL+click mi dà la possibilità di selezionare tra più voci che non saranno però in questo caso racchiuse da un menù a tendina ma solo da un’ area circoscritta. Vediamo un esempio semplice:

 <label for="cars">Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

e una SELECT o con l’uso dell’ attributo “MULTIPLE”:

<form action="page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Per creare aree di testo uso le TEXTAREA che hanno anche esse un NOME quindi un NAME e che posso estendere con gli attributi rows e cols che definiscono l’ampiezza dell’ area di testo. Ci sarà anche qui una LABEL con l’attributo FOR settato magari = “message” che avrà un legame corrispettivo con il name=”message” della textarea. Posso inserire tra i tag di apertura e chiusura della TEXAREA un testo dimostrativo o qualcosa che indichi all’ utente di digitare qualcosa di specifico. Poi abbiamo anche un elemento introdotto con HTML5, il DATALIST, simile alla SELECT ma non uguale, perché mi dà la possibilità dell’ autocompletamento senza usare AJAX, vediamo per esempio un esempio tratto dal W3S, sito da prendere come riferimento per la propria crescita personale nel settore web developer: https://www.w3schools.com:

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 

Non c’è altro? Tutto qui quando parliamo di FORM?

Non scherziamo i FORM sono ricchi di opzioni. Ad esempio posso delimitare l’area di un MODULO usando FIELDSET e anche inserire una INTESTAZIONE con LEGEND, in questo modo creo un contorno stilisticamente molto gradito. Vediamo un esempio tratto sempre dal W3S:

 <form action="page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form> 

Oppure nei famosi INPUT ho la possibilità di inserire vari attributi. Ad esempio READONLY, DISABLE, REQUIRED o anche MAXLENGHT. Partiamo dall’ ultimo. Con MAXLENGHT definisco in un campo TEXT un limite di lunghezza per i caratteri da inserire, con DISABLE rendo immodificabile il campo, con READONLY mostro solo l’informazione in sola lettura e con REQUIRED impongo l’immissione di un valore e in questo modo l’utente non può andare avanti se non adempiendo alla segnalazione a schermo. Questi sono solo alcuni attributi che migliorano i nostri form ma ce ne sono molti altri non visti come l’OPTIONGROUP per esempio da usare nelle SELECT per raggruppare i dati.