Moduli
I moduli (form in inglese) servono ad aggiungere interattivà con gli utenti del sito. Attraverso questi moduli si possono effettuare registrazioni, sondaggi o semplicemente selezionare un indirizzo web da visitare tra quelli disponibili. I dati acquisiti da un modulo dovranno essere processati e registrati per mezzo di script server side, cioè lato server, per ottenere una risposta dinamica all'imput dato dal visitatore. Questa parte non verrà trattata in quanto esula dagli scopi del presente tutorial.
Cominciamo con il tag identificativo dei moduli <form> e dal suo corrispettivo di chiusura </form>, all'interno dei quali vanno inseriti i campi input scelti in base alle nostre esigenze. Esaminiamo il più semplice che consiste in una piccola finestra dove inserire del testo:
<form>
Inserisci user_id (max 10 car)
<input type="text" name="primo" size=30 maxlength=10>
Inserisci password (max 10 car)
<input type="password" name="secondo" size=30 maxlength=10>
Reinserisci password
<input type="password" name="terzo" size=30 maxlength=10>
<input type="submit" value="Invia">
</form>
il listato precedente produce:
Questa è una parte di un tipico modulo che appare prima di accedere alla pagina per il cambiamento dei dati di accesso. Nel dettaglio il modulo è composto da tre campi di <input> dove inserire caratteri alfanumerici type="text", con dimensione size="30", che accetta una stringa composta al massimo da 10 caratteri, maxlength="10". Notate che il secondo e terzo campo sono di tipo "password", type="password", che maschera i caratteri digitati visualizzando al loro posto un un pallino. Il quarto input è il pulsante type="submit" con il quale si inviano i dati, il valore specificato nell'attributo value=, viene visualizzato sul pulsante stesso, così come verrebbe visualizzato negli altri campi se venisse impostato, per cui assumerebbe valore di default.
Il seguente, invece, è un tipico modulo utilizzato per esprimere una preferenza, del genere votazione o sondaggio, utilizzante l'input tipo radio:
<form class="carticolo" method="post">
<input onclick="submit" type="radio" name="poll" value="aaaaa">aaaaa
<input onclick="submit" type="radio" name="poll" value="bbbbb">bbbbb
<input onclick="submit" type="radio" name="poll" value="eeeee">eeeee
<input onclick="submit" type="radio" name="poll" value="ddddd">ddddd
</form>
che produce
In questo tipo di modulo, essendo lo stesso di preferenza, il nome dell'input è uguale per tutte le scelte possibili, e il valore che verrebbe restituito è quello specificato nell'attributo value dell'opzione scelta.
Un'altro tipo di input è il checkbox che generalmente viene utilizzato per confermare una clausola o richiedere uno o più servizi tra quelli disponibili, come il seguente:
ottenuto con il seguente listato:
<form class="carticolo" method="post"> <input type="checkbox" name="dati" value="y" checked> consenso trattamento dati
<input type="checkbox" name="email" value="y"> spedisci via e-mail
<input type="checkbox" name="condizioni" value="y"> accettazione condizioni
<input type="checkbox" name="pubbli" value="y"> proposte pubblicitarie di terzi
<input type="submit" value="Invia"> </form>
avrete certamente notato che in quest'ultimo modulo la prima scelta aveva già il segno di spunta, questo è possibile tramite l'attributo checked (disponibile anche nel tipo radio). Un'altra differenza è che la scelta è multipla (possibile anche con il tipo radio precedente aggiungendo un pulsante di invio). Ovviamente, è possibile creare un modulo con la combinazione di tutti i tipi di input a seconda dell'esigenza contingente.
Una variazione dell'input text, è il tipo textarea generalmente utilizzato per inviare un messaggio o una comunicazione di una certa lunghezza. Segue un esempio con relativa visualizzazione.
<form class="carticolo" action="mailto:kkkfkkf@leo-alberto.it" method="post">
<textarea name="comm" rows="6" cols="45" wrap="virtual">
Inserisci qui la tua cominicazione...
</textarea>
<input type="submit" value="Invia">
</form>
L'ultimo modulo da esaminare è il tipo a tendina. Nell'esempio che segue viene utilizzato per scegliere un sito, nel caso specifico un motore di ricerca, tra quelli disponibili.
Questo è il relativo listato:
<form name=engines>
<select name="SearchEngines">
<option>CHOOSE Search Engines</option>
<option value="http://www.yahoo.com/" onClick="">Yahoo!</option>
<option value="http://www.altavista.digital.com/" onClick="">AltaVista</option>
<option value="http://www.exite.com/" onClick="">Exite</option>
<option value="http://www.lycos.com/" onClick="">Lycos</option>
<option value="http://www.infossek.com/" onClick="">InfoSeek</option>
<option value="http://www.hotbot.com/" onClick="">HotBot</option>
</select>
<input type="submit" value="Invia">
</form>
Bene con questo abbiamo esaurito questo estenuante capitolo sui moduli, arrivederci al prossimo capitolo!