D'ora in poi, per maggiore chiarezza, scriverò solo quello che sta fra i due tag <FORM>. Tralascerò i tag head, body, title e form. Ovviamente nei tuoi documenti è necessario che questi tags ci siano.
La più comune tipologia [TYPE] di immissione dati in un modulo [<INPUT>] è il semplice testo [TEXT].
<INPUT TYPE=TEXT>
Ogni input ha bisogno di un nome [NAME].
<INPUT TYPE=TEXT NAME="ADDRESS">
Quando un utente scrive nel modulo il suo indirizzo (ad esempio 1313 Mockingbird Lane), questo diventerà automaticamente il valore dell'input e verrà accoppiato con ADDRESS cosiscché il risultato finale, dopo aver fatto passare i dati attraverso il Mailto Formatter, sarà ADDRESS=1313 Mockingbird Lane.
Se vogliamo possiamo assegnare un VALUE a piacere.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">
In questo modo il valore 44 Cherry St sarà accoppiato automaticamente con il nome ADDRESS, a meno che l'utente non lo modifichi.
Note- controlla bene di mettere le virgolette dove sono state specificate.
Ora possiamo specificare la dimensione della casella di immissione dati.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>
Come puoi vedere il valore di default è 20. Probabilmente già sai che il valore di default è il valore che viene assegnato ad una variabile se non è specificato alcun valore particolare.
Andiamo avanti e leviamo VALUE="44 Cherry St".
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30>
Se vogliamo, possiamo specificare un numero massimo di caratteri da immettere.
Ora prova a immettere più di 10 caratteri qui sotto!
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
Immagino che questa possibilità ti possa venire utile di tanto in tanto, ma a meno che tu non tema che qualcuno possa spedirti l'edizione completa della Sacra Bibbia via form, io non starei a perderci più di tanto tempo.
Molto simile al TYPE=TEXT è il TYPE=PASSWORD. Si tratta esattamente della stessa cosa tranne per il fatto che vengono visualizzati degli asterischi al posto dell'input reale. Il browser poi ti spedirà i dati reali, solatnto che non li visualizzerà.
<INPUT TYPE=PASSWORD>
Ricorda che ad ogni <INPUT> deve essere associato un NAME.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
Gli attributi di SIZE, VALUE, e MAXLENGTH funzionano anche qui. A questo proposito, un <TAG> dice al browser di fare qualcosa. Un ATTRIBUTO sta dentro al <TAG> e specifica al browser come farlo.
La prossima cosa che voglio mostrarvi sono i pulsanti di selezione e le caselle di scelta. I pulsanti permettono all'utente di scegliere una di diverse possibilità. Le caselle di scelta gli permettono di scegliere una o più fra tutte le opzioni possibili.
Tanto per iniziare costruiamo qualche pulsante.
<INPUT TYPE=RADIO NAME="BEST FRIEND">
Ora aggiungiamone altri due.
<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">
Hmmm... Credo sia meglio mettere un interruzione di linea fra l'una e l'altra.
<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><P>
Nota che ciascun input ha lo stesso nome. La ragione ti sarà chiara molto presto.
A ciascuno dei pulsanti va assegnato un valore [VALUE].
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"><P>
Ora contrassegnamo ciascun pulsante.
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>
E' anche possibile modificare questi contrassegni utilizzando i codici HTML.
I tuoi pulsanti adesso sono praticamente pronti. Puoi abbellire un po' il tutto aggiungendo una frase prima dei pulsanti e, se vuoi, scegliere uno dei pulsanti come default (opzionale).
Who is your best friend?<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed" CHECKED> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>
L'utente ovviamente può selezionare solo 1 opzione. La sua scelta ti sarà spedita come coppia nome/valore. BEST FRIEND=Ed (o uno qualsiasi dei pulsanti scelto).
Costruire delle Caselle di Scelta è all'incirca la stessa cosa. Cominciamo con:
<INPUT TYPE=CHECKBOX NAME="Ed">
Aggiungiamone altre tre ma stavolta diamo a ciascuna un NAME differente. (Puoi anche aggiungere degli a capo se preferisci)
<INPUT TYPE=CHECKBOX NAME="ED"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom"><BR>
<INPUT TYPE=CHECKBOX NAME="BM"><P>
Ogni casella ha lo stesso VALUE.
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"><P>
OK, contrassegnamo ciasuna casella.
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>
Infine, magari vorresti aggiungere qualcosetta prima delle tue caselle e forse anche assegnare qualche valore di default. Naturalmente solo se ne hai voglia.
Which of these guys are your friends?<BR>
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES" CHECKED> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>
Ed=YES
Tom=YES
(o qualunque cosa venga scelta. Se la scelta è NESSUNA, non ti viene mandato niente)
In questo momento mi sovviene una domanda... Come faccio se voglio fare tre domande diverse sullo stesso gruppo di persone? Signore e Signori, sedetevi che ve lo mostro in un minuto!
In un singolo form è bene che non si ripetano mai gli stessi NAME. Dunque, in questo caso, meglio usare un nome diverso per ciascuna domanda. Quando dico mai, non intendo che se lo farai il tuo computer si pianterà irrimediabilmente... alla peggio ti si incasinerà il browser, o il parser (Mailto Formatter è un parser), o lo script CGI. O forse si incasinerà il poveraccio che dovrà cavare un senso logico dal form che ha ricevuto.
Ecco qui il codice HTML per le tre domande. I Tags di tabella [<TABLE>] sono in verde. Servono solo per migliorare l'aspetto generale, non hanno alcuna influenza sul form. Se per caso hai bisogno di una rinfrescata sulle tabelle, allora fai un salto dal Table Tutor.
<CENTER>
<TD WIDTH=199>
<TD WIDTH=200>
<TD WIDTH=199>
</TR></TABLE>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>
Which of these guys are your friends?<BR>
</TD>
Which of these guys would you lend money to?<BR>
</TD>
Which of these guys would you trust with your sister?<BR>
</TD>
</CENTER>
Facciamo finta che un utente selezioni queste caselle...
...In questo caso ti verranno inviati i le seguenti coppie di nome/valore.
Friend?..Ed=YES
Friend?..Rick=YES
Friend?..Tom=YES
Lend money?...Tom=YES
Lend money?...BM=YES
Date sister?...Ed=YES
Date sister?...Tom=YES
Date sister?...BM=YES
| Introduzione | Lezione 1 | Lezione 2 | Lezione 3 | Lezione 4 | Lezione 5 | Indice |