Html: i form
Uno dei fattori che ha decretato il successo del Web è senz’altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list), ma soprattutto di partecipare a vere e proprie comunità virtuali, come il forum di HTML.it .
Per organizzare questo genere di servizi è necessario raccogliere in qualchemodo i dati dell’utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form).
Il tag form
Per la creazione di un form utilizziamo l'omonimo tag form, come nell'esempio che segue:
<form method="" action="" target=""> ... </form>
Scopo di questo tag è di fare da contenitore ad una serie di tag (che vedremo tra poco) che costituiranno gli specifici controlli del modulo.
Solitamente l’invio dei dati è organizzato in due parti:
- una pagina iniziale che contiene i vari campi dei form, che consentono all’utente di effettuare delle scelte, scrivere del testo, inserire un’immagine
- una pagina secondaria che viene richiamata dalla principale e che effettua “il lavoro” vero e proprio di processare e raccogliere i dati. Di norma sitratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro
A tal proposito è necessario introdurre alcuni attributi indispensabili del tag form:
<form name=‘nome_form’ action=‘pagina_secondaria.php’ method=‘GET’> … </form>
L’attributo name serve per indicare un nome ad un form, necessario per processare lato client(con Javascript) i dati del modulo.
L’attributo action definisce l’url della pagina o del programma che processerà i dati del modulo html.
L’attributo method, infine, definisce il metodo di invio dei dati al server. Può assumere valore GET o POST.
Inviare i dati della form per email
Grazie all’attributo “action” è anche possibile far sì che i dati vengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). Il codice è questo:
<form method="POST" action="mailto:pincopallino@gmail.com" enctype="text/plain">
E quindi il codice sarà simile a questo:
<form method="POST" action="mailto:pincopallino@gmail.com" enctype="text/plain"> ... modulo contenuto nella form ... </form>
Method
Con il metodo GET a pagina di risposta viene contattata e idati vengono inviati in un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (piùprecisamente nella “query string“, cioè nella “stringa di interrogazione“) secondo questa forma:
paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio
Alcuni server hanno tuttaviahanno delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 carattericomplessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi perl’invio in get è:
<form name=”datiUtenti” action=”paginaRisposta.php”method=”GET”>
Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri noncompaiono nella query string (dunque se non si desidera che i parametri siano mostrati all’utente questo metodo è preferibile).
In questo caso non ci sonolimiti sulla lunghezza dei caratteri. La sintassi è:
<form name=”datiUtenti” action=”paginaRisposta.php”method=”POST”>
I tag utilizzati per creare moduli HTML
Una volta definito un form mediante l'omonimo tag sarà necessario "popolarlo" con una serie di tag annidiati al suo interno. Attraverso i singoli tag (che andremo a vedere tra poco), infatti, sarà possibile creare i vari elementi per l'interazione con l'utente come, ad esempio, caselle di testo o menu di selezione.
Passiamo adesso in rassegna i singoli tag che generano gli elementi dei form HTML:
- input - genera la maggior parte degli elementi dei form HTML, a seconda del type specificato. Gli input più utilizzati sono:
- text - è utilizzato per creare caselle di testo in cui l'utente può scrivere del contenuto su "singola linea";
- file - è utilizzato per creare caselle di selezione di file in locale al fine di poterli trasmettere al server remoto;
- radio - permette di creare un gruppo di opzioni al cui interno deve essere fatta una scelta (non ammette scelte multiple);
- checkbox - permette di creare un gruppo di opzioni al cui interno devono essere fatta delle scelte (ammette scelte multiple);
- button - permette di creare bottoni "neutri" ai quali, cioè, può essere associata un'azione mediante Javascript;
- submit - permette di creare bottoni di invio attraverso i quali viene, appunto inviato e processato il form;- Selezione di File
- image - permette di inserire immagini "attive" all'interno del modulo che fungeranno da bottoni;- Controlli nascosti
- reset - permette di creare bottoni per il reset del form (in sostanza vengono cancellate le scelte effettuate dall'utente ed il modulo torna al suo stato iniziale).
- select - crea una casella di riepilogo a scorrimento, chiamata in gergo selectbox;
- textarea - genera un'area di testo in cui è possibile andare a capo e viene utilizzata per permettere di inserire descrizioni, commenti o comunque testi piuttosto lunghi.
Vediamo un esempio di un ipotetico form HTML per la raccolta di dati anagrafici che invia i dati raccolti per email:
<form method="POST" action="mailto:risatascalciante@gmail.com" enctype="text/plain"> <!-- CASELLE DI TESTO --> Nome<br> <input type="text" name="nome"><br> Cognome<br> <input type="text" name="cognome"><br> <!-- SELECTBOX --> Paese<br> <select name="paese"> <option value="I">Italia</option> <option value="E">Estero</option> </select><br> <!-- RADIO --> Sesso<br> <input type="radio" name="sesso" value="M"> M<br> <input type="radio" name="sesso" value="F"> F<br> <!-- CHECKBOX --> Hobby<br> <input type="checkbox" name="hobby" value="S"> Sport<br> <input type="checkbox" name="hobby" value="L"> Lettura<br> <input type="checkbox" name="hobby" value="C"> Cinema<br> <input type="checkbox" name="hobby" value="I"> Internet<br> <!-- TEXTAREA --> Commento<br> <textarea name="commento" rows="5" cols="30"></textarea> <br><br> <!-- SUBMIT --> <input type="submit" name="invia" value="Invia i dati"> </form>
Produce il seguente modulo:
Vediamo ora un altro esempio di form che invia dati per email. Il seguente codice:
<form action="mailto:pinco.pallino@libero.it" method="post" name = "utente" enctype="text/plain"> <p> <strong>Nome:</strong><br> <input type="text" name="nome"> </p> <p> <strong>Mail:</strong><br> <input type="text" name="mail"> </p> <p> <strong>Commento:</strong><br> <textarea name="commento" rows="5" cols="30"></textarea> <br> </p> <p> <input type="submit" value="Invia"> <input type="reset" value="Annulla"> </p> </form>
Produce il seguente form: