I formulari HTML
I formulari interattivi permettono agli autori di pagine web di dotare le proprie pagine web con degli elementi interattivi che danno la possibilità ad esempio di avere un dialogo con gli internauti, sulla falsa riga dei coupon-risposta presenti in alcuni negozi. Il lettore inserisce delle informazioni riempiendo i campi o cliccando su dei bottoni, poi sul bottone di invio (submit) verso un URL, cioè in maniera generale ad un indirizzo e-mail o a uno script di pagina web dinamica come PHP, ASP o uno script CGI.
Il tag FORM
I formulari sono delimitati dal tag (<FORM> ... </FORM>) che permettono di raggruppare più elementi del formulario (bottoni, campi di digitazione, ecc.) e che possiedono gli attributi obbligatori seguenti:
METHOD, indica sotto quale forma saranno inviate le risposte. «POST» è il valore che corrisponde ad un invio di dati stoccati nel corpo della richiesta, mentre «GET» corrisponde ad un invio dei dati codificati nell'URL, e separati dall'indirizzo dello script da un punto interrogativo (per ulteriori informazioni sui metodi POST e GET, consultate l'articolo sul protocollo HTTP).
ACTION indica l'indirizzo di invio (script CGI o indirizzo mail (mailto:indirizzo.email@terminale). Il tag FORM ha come attributo facoltativo ENCTYPE che specifica la codifica dei dani nell'URL, tuttavia non è necessario precisarlo dato che il valore attribuito da default (application/x-www-form-urlencoded) è l'unico valido. L'attributo facoltativo ACCEPT permette di definire i tipi MIME di dati che possono essere inviati tramite formulario.
Ecco la sintassi del tag FORM:
<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
...
</FORM>
e qualche esempio di tag FORM:
<FORM METHOD=POST ACTION="mailto:webmaster@ccm.net">
<FORM METHOD=GET ACTION="http://it.ccm.net/cgi-bin/script.cgi%22>
All'interno del tag FORM
Il tag FORM costituisce in qualche modo un contenitore che permette di raggruppare degli elementi che permetteranno all'utente di scegliere o di inserire dei dati, gruppo di dati che saranno inviati all'URL indicato nell'attributo ACTION del tag FORM attraverso il metodo indicato dall'attributo METHOD.
È possibile inserire qualsiasi elemento HTML di base in un tag FORM (testo, bottoni, tabelle, link, ecc.) ma è soprattutto interessante interessante inserire degli elementi interattivi. Questi elementi interattivi sono:
Il tag INPUT, un insieme di bottoni e di campi di inserimento;
Il tag TEXTAREA, una zona di inserimento;
Il tag SELECT, una lista a scelta multipla.
Invio dei dati
Una volta che il formulario è inviato (con il bottone submit), i dati presentati nel formulario sono inviati allo script CGI sotto forma di coppia nome/valore, cioè un insieme di dati rappresentati dal nome dell'elemento del formulario, il carattere "=", poi il valore associato. L'insieme di queste coppie nome/valore sono separate fra loro da degli spazi (carattere &). I dati inviati assomigliano quindi a questo:
champ1=valeur1&champ2=valeur2&champ3=valeur3
Nel caso del metodo GET (invio di dati attraverso l'URL), l'URL assomiglierà a una stringa del tipo:
http://it.ccm.net/cgi-bin/script.cgi?champ1=val1&champ2=val2
Il tag INPUT
Il tag INPUT è il tag essenziale dei formulari, dato che permette di creare un buon numero di elementi "interattivi". La sintassi di questo tag è la seguente:
<INPUT type="Nome del campo" value="Valore di default" name="Nome dell'elemento">
L'attributo name è essenziale dato che permetterà allo script CGI di conoscere il campo associato alla coppia nome/valore, cioè il nome del campo sarà seguito dal carattere "=" poi dal valore inserito dall'utente, o in caso contrario dal valore di default indicato dall'attributo valore. L'attributo tipo permette di precisare il tipo di elemento che rappresenta il tag INPUT, qui di seguito i valori che questo campo può prendere:
checkbox, si tratta di caselle da selezionare con due stati:
checked (selezionato) e unchecked (non selezionato). Quando la casella è selezionata la coppia nome/valore è inviata al CGI;
hidden, si tratta di campo nascosto. Questo campo non visibile sul formulario permette di precisare un parametro fisso che sarà inviato al CGI sotto forma di coppia nome/valore.
file, si tratta di un campo che permette all'utente di precisare la posizione di un file che sarà inviato con il formulario. In questo caso bisogna precisare il tipo di dati che possono essere inviati grazie all'attributo ACCEPT del tag FORM;
image, si tratta di un bottone di invio personalizzato, la cui anteprima è l'immagine posta nella posizione precisata dal suo attributo SRC;
password, si tratta di un campo di inserimento, nei quali i caratteri inseriti appaiono sotto forma di asterischi per camuffare l'inserimento dell'utente;
radio, si tratta di un bottone che permette una scelta fra più proposte (l'insieme dei bottoni radio devono avere lo stesso attributo name. La coppia nome/valore del bottone radio selezionato sarà inviato al CGI. Un attributo checked per uno dei bottoni permette di precisare il bottone selezionato per default;
reset, si tratta di un bottone di azzeramento che permette unicamente di ristabilire l'insieme degli elementi del formulario ai loro valori di default;
submit, si tratta del bottone di invio che permette di inviare il formulario. Il testo del bottone può essere precisato grazie all'attributo valore;
text, si tratta di un campo di inserimento che permette l'inserimento di una linee di testo. La dimensione del campo può essere definita attraverso l'attributo size e la dimensione massima del testo inserito grazie all'attributo maxlength.
Il tag TEXTAREA
Il tag TEXTAREA permette di definire una zona di inserimento più vasta paragonata alla semplice linea di inserimento che propone il tag INPUT. Questo tag ha i seguenti attributi:
cols, rappresenta il numero di caratteri che possono essere contenuti in una linea;
rows, rappresenta il numero di linee;
name, rappresenta il nome associato al campo, è il nome che permetterà d'identificare il campo nella coppia nome/valore;
readonly, permette di impedire all'utente di modificare il testo inserito per default nel campo;
value, rappresenta il valore che sarà inviato per default allo script si il campo di inserimento non è modificato da una digitazione dell'utente.
Il tag SELECT
Il tag SELECT permette di creare una lista scorrevole di elementi (previsti dai tag OPTION all'interno della lista). Gli attributi di questo tag sono:
name, rappresenta il nome associato al campo, è il nome che permetterà d'identificare il campo nella coppia nome/valore;
disabled, permette di creare una lista disattivata, cioè visualizzata in grigio;
size, rappresenta il numero di linee nella lista (questo valore può essere più grande del numero di elementi effettivi nella lista stessa);
multiple, indica la possibilità per l'utente di scegliere più campi nella lista.
Un esempio di formulario
I formulari possono essere impaginati attraverso delle tabelle (cosa consigliata per avere un'impaginazione più accurata). Ecco un esempio che riassume i punti descritti finora e che mostra come impaginare un formulario con l'aiuto di una tabella:
<FORM method=post action="cgi-bin/script.pl">
Registrazione di un utente
<TABLE BORDER=0>
<TR>
<TD>Cognome</TD>
<TD>
<INPUT type=text name="cognome">
</TD>
</TR>
<TR>
<TD>Nome</TD>
<TD>
<INPUT type=text name="nome">
</TD>
</TR>
<TR>
<TD>Sesso</TD>
<TD>
Uomo : <INPUT type=radio name="sesso" value="M">
<br>Donna : <INPUT type=radio name="sesso" value="F">
</TD>
</TR>
<TR>
<TD>Funzione</TD>
<TD>
<SELECT name="funzione">
<OPTION VALUE="insegnante">Insegnante</OPTION>
<OPTION VALUE="studente">Etudiant</OPTION>
<OPTION VALUE="ingegnere">Ingénieur</OPTION>
<OPTION VALUE="pensionato">Retraité</OPTION>
<OPTION VALUE="altro">Autre</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Commenti</TD>
<TD>
<TEXTAREA rows="3" name="commenti">
Inserite qui i vostri commenti</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Inviare">
</TD>
</TR>
</TABLE>
</FORM>
Ecco il risultato di questo codice HTML:
<FORM method=post action="javascript:alert('L\'invio del formulario è stato evidentemente bloccato <:)');"> Registrazione di un utente:
| Cognome |
<INPUT type="text" name="nom"> |
| Nome |
<INPUT type="text" name="prenom"> |
| Sesso | Uomo: <INPUT type="radio" name="sexe" value="M">
Donna: <INPUT type="radio" name="sexe" value="F"> |
| Funzione |
<SELECT name="fonction"> <OPTION VALUE="enseignant">Insegnante</OPTION> <OPTION VALUE="etudiant">Studente</OPTION> <OPTION VALUE="ingenieur">Ingegnere</OPTION> <OPTION VALUE="retraite">Pensionato</OPTION> <OPTION VALUE="autre">Altro</OPTION> </SELECT> |
| Commenti | <TEXTAREA rows="3" name="commentaires">Inserite qui i vostri commenti</TEXTAREA> |
|
<INPUT type="submit" value="Envoyer"> |
|
Attributi del tag FORM e tipi di inserimenti
| <b>Tag <b> | <b>Attributo <b> | <b>Valore <b> | <b>Risultato <b> | <b>Effetto Visuale <b> |
|---|---|---|---|---|
| <FORM> ... </FORM> | METHOD | POST GET |
||
| ACTION | invio all'indirizzo indicato | |||
| ENCTYPE | specifica il tipo di codifica utilizzato | |||
| <INPUT> | TYPE | submit | effettua l'ACTION nel tag <FORM> | <form><input type="submit" name="B1" value="Envoyer"></form> |
| text | semplice linea di testo la cui lunghezza è data dall'attributo size |
<form><input type="text" size="20" name="T1"></form> | ||
| reset | cancella il contenuto del formulario | <form><input type="reset" name="B2" value="Rétablir"></form> | ||
| radio | bottone radio | <form><input type="radio" checked name="R1" value="V1"></form> | ||
| checkbox | casella da selezionare | <form><input type="checkbox" name="C1"></form> | ||
| NAME | Nome | |||
| SIZE | Dimensione del testo | |||
| <TEXTAREA> ... </TEXTAREA> | NAME | Zona di testo | <form><textarea name="S1" rows="2" cols="20"></textarea></form> | |
| ROWS | ||||
| COLS | ||||
<SELECT>
</SELECT> |
NAME | <form><select name="D2" size="1">
<option selected>Scelta 1</option> <option>Scelta 2</option> <option>Scelta 3</option> <option>Scelta 4</option> </select></form> |
||
| MULTIPLE | Più scelte possibili | <form><select name="D1" multiple size="1">
<option>Scelta 1</option> <option>Scelta 2</option> <option>Scelta 3</option> <option>Scelta 4</option> </select></form> |
||
| <OPTION> ... </OPTION> | SELECTED | Opzione di default | <form><select name="D3" multiple size="3">
<option selected>Scelta 1</option> <option>Scelta 2</option> <option>Scelta 3</option> <option selected>Scelta 4</option> </select></form> |
|
| VALUE | Valore forzato |
Foto: © Pixabay.
Il documento intitolato « I formulari HTML » dal sito CCM (it.ccm.net) è reso disponibile sotto i termini della licenza Creative Commons. È possibile copiare, modificare delle copie di questa pagina, nelle condizioni previste dalla licenza, finché questa nota appaia chiaramente.