|
|
Manuale Form
Il manuale seguente ti mostrerà come rendere interattive le
tue pagine utilizzando le <FORM>. Con il tag form puoi inserire nelle tue pagine web un guestbook,
richieste di ordini, verifiche, avere feedback o altro ancora.
zatrabeoj
Le istruzioni base per creare un form html sono le seguenti...
<FORM> comando di inizio form
<INPUT> comando per la richiesta di informazioni
<INPUT> ...si possono creare una o più aree di imput, secondo le esigenze
</FORM> comando di chiusura form
Ora sei pronto per realizzare una tua form!
Manuale Form- Lezione 1
Apri Notepad e seguimi!. Copia e incolla la pagina e via partiamo!:
<HTML>
<HEAD>
<TITLE>Joe è il ragazzo più affascinante che io
conosca</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Salva il file come form1.html in una cartella (gli utenti di Win3.x la salvino come form1.htm). Ora apri il tuo browser [plug Netscape] e da qui visualizza il file che hai appena salvato form1.html lasciando aperti entrambe i programmi per effettuare simultaneamente la visualizzazione sul browser delle correzioni effettuate in Notepad. E' sufficiente cliccare sul bottone del reload del browser, se non viene apportato alcun cambiamento prova a cliccare sul bottone del reload tenendo premuto il tasto dello Shift.
Digita quanto segue nel tuo tag form.
<HTML>
<HEAD>
<TITLE>Joe è il ragazzo più affascinante che io
conosca</TITLE>
</HEAD>
<BODY>
<FORM> </FORM>
</BODY>
</HTML>
Nel prossimo
passaggio mostriamo come dire al browser dove e come inviare i dati. Si può
procedere in due modi. 1) puoi inviare i dati ad uno script cgi script, o 2)
puoi far si che i dati siano inviati tramite email a te. Il primo comando, vale
a dire lo script ti dice come dovrebbero essere inviati i dati.
Il secondo, o mailto dovrebbe avere nel tag i seguenti attributi.
Nota bene- Microsoft Internet Explorer 3.0 non supporte le form mailto. Quando tenti di inviare le informazioni, la finestra del nuovo messaggio scompare. Explorer does however support forms sent to a CGI script.
<HTML>
<HEAD>
<TITLE>Joe è il ragazzo più affascinante che io
conosca</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="mailto:xxx@xxx.xxx"
ENCTYPE="application/x-www-form-urlencoded">
</FORM>
</BODY>
</HTML>
Questo punto è molto importante. L'unica cosa da fare è inserire il tuo indirizzo di posta elettronica dopo mailto: il resto deve essere scritto esattamente come indicato. Le parole FORM METHOD POST & ACTION non devono essere scritte in maiuscolo ma è necessario uno spazio tra ciascun attributo.. tra FORM & METHOD, tra POST & ACTION, e tra .com" & ENCTYPE
I dati saranno inviati solo in questo formato compatibile al computer...
FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313+Mockingbird+Lane
&CITY=Beverly+Hills&STATE=CA
E' necessario uno script CGI per leggere i dati...
FORMNAME=New
Entrant
NAME=R.U. Havinfun
ADDRESS=1313 Mockingbird Lane
CITY=Beverly Hills
STATE=CA
Nota bene che XOOM.it al momento non ha uno script CGI per i membri. E' necessario inserire una terza parte che ha uno script al quale puoi collegare un link, o utilizzare in alternativa il metodo descritto sotto ENCTYPE="text/plain".
L'esempio sottostante mostra che una form altro non è che una serie di nomi di imput (NAME ADDRESS, ecc) accoppiati con valori di imput (R.U. Havinfun 1313 Mockingbird Lane, etc).L'unica variabile è come inserire i valori.
|
Manuale Form- Lezione 2
Ora, per semplificare le cose vi mostrerò solo i dati che devono essere inseriti all'interno del tag <FORM>. Tralascio l'intestazione, il corpo, il titolo. Lasciali nel documento, non cancellarli.
Il più comune TIPO di <INPUT> FORM TEXT
<INPUT TYPE=TEXT>
Ogni input necessita di un NOME
<INPUT TYPE=TEXT NOME="ADDRESS">
Quando l'utente digita nel suo indirizzo (per esempio 1313 Mockingbird Lane), diventerà il valore di imput e sarà accoppiato con ADDRESS affinchè il risultato finale sarà ADDRESS=1313 Mockingbird Lane
Se vogliamo si può digitare in un VALUE
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">
Questa operazione automaticamente accoppierà il valore 44 Cherry St con il nome ADDRESS, senza che l'utente lo modifichi. Nota bene- assicurati di utilizzare le virgolette come specificato.
Si può specificare la dimensione della casella di testo di input.
<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>
Il valore di default è 20. Questo valore di default è quello che il browser assume se non gli si sono date altre specifiche indicazioni.
Ora rimuovi VALUE="44 Cherry St"
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30>
Si può anche specificare il numero di caratteri permessi.
Prova a inserire più di 10 caratteri!
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
Molto simile al TYPE=TEXT è il TYPE=PASSWORD. E' esattamente la stessa cosa, cambia solo il tipo di inserimento; in questo caso si utilizzano ***. Il browser ti invierà l'input, ma non lo mostrerà.
<INPUT TYPE=PASSWORD>
Ricorda che ciascun <INPUT> deve avere un NOME
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
SIZE VALUE, e MAXLENGTH sono attributi anche qui utilizzabili. Un <TAG> dice al browser di fare qualcosa. Un ATTRIBUTO lavora all'interno del <TAG> e dice al browser come farlo.
Seguono i bottoni Radio e le Check Boxes. I bottoni Radio
buttons permettono all'utente di scegliere tra uno o più opzioni. Check Boxes
permettono di scegliere tra una, più o tutte le opzioni.
Creiamo qualche bottone Radio.
<INPUT TYPE=RADIO NAME="BEST FRIEND">
Aggiungiamone altri 2.
<INPUT TYPE=RADIO NAME="BEST FRIEND"> <INPUT TYPE=RADIO NAME="BEST FRIEND"> <INPUT TYPE=RADIO NAME="BEST FRIEND">
Hmmm... è meglio inserire una linea di separazione tra ciascuno.
<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.
A ciacun bottone Radio deve essere assegnato un 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 diamo un nome a ciascun bottone.
<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>
Puoi modificare i nomi come più ti piace.
Diciamo che ora i bottoni Radio sono creati.
Chi è il tuo migliore amico?<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>
Naturalmente l'utente può scegliere una sola opzione. La sua scelta ti arriverà come coppia name/value MIGLIORE AMICO=Ed (o comunque chi ha scelto).
Creare Check Boxes è praticamente la stessa cosa.
<INPUT TYPE=CHECKBOX NAME="Ed">
Aggiungine altre 3, dando a ciascuna un NOME diverso. (puoi anche inserire linee di separazione)
<INPUT TYPE=CHECKBOX NAME="ED"><BR> <INPUT TYPE=CHECKBOX NAME="Rick"><BR> <INPUT TYPE=CHECKBOX NAME="Tom"><BR> <INPUT TYPE=CHECKBOX NAME="BM"><P>
Ciascuna Check Box 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>
Nota- Per le Check Boxes il NOME cambia e il VALUE resta lo stesso e con i bottoni Radio, il VALUE cambia ma il NOME resta lo stesso.
Ora dai un nome a ciascuna 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>
Quale di questi
ragazzi è un tuo amico?<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>
L'utente può scegliere 1, 2, nessuno o tutte le opzioni. La sua scelta ti arriverà come name/value.
Ed=YES Tom=YES
(o qualunque altra scelta... se non scelgono nessuno nonti arriverà alcun nome)
Ora, una domanda nasce spontanea... Cosa accade se voglio fare 3 domande diverse sullo stesso gruppo di ragazzi??
Ecco la risposta!.
E' chiaro che in ciascuna di queste form non dovrebbe mai essere duplicato il NOME. Quindi possiamo utilizzare un nome differente per ciascuna domanda. Dico mai per evitare di creare situazioni di confusione
Quella che segue è la sintassi html per le tre domande.I tag <TABLE> sono in verde. Il loro scopo è solo apparente, non influiscono sulle form. Per evere maggiori informazioni sulle tabelle clicca su Table Tutor.
<CENTER> <TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>
<TD WIDTH=199>
Quali di questi ragazzi sono tuoi amici?<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Ed" VALUE="YES">
Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Rick"
VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Tom" VALUE="YES">
Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..BM" VALUE="YES">
Burgermeister<P>
</TD>
<TD WIDTH=200>
A quali di questi ragazzi impresteresti del denaro?<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ed"
VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Rick"
VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Tom"
VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...BM"
VALUE="YES"> Burgermeister<P>
</TD>
<TD WIDTH=199>
A quale di questi ragazzi lasceresti frequentare tua sorella?<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Ed"
VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Rick"
VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Tom"
VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...BM"
VALUE="YES"> Burgermeister<P>
</TD>
</TR></TABLE> </CENTER>
Supponiamo che l'utente abbia selezionato le seguenti tabelle...
...ti arriveranno le seguenti risposte name/value.
Amico?..Ed=YES
Amico?..Rick=YES
Amico?..Tom=YES
Prestito denaro?...Tom=YES
Prestito denaro?...BM=YES
Affidare la sorella?...Ed=YES
Affidare la sorella?...Tom=YES
Affidare la sorella?...BM=YES
Non è grandioso!
Privacy |
Articolo informazione
Commentare questo articolo:Non sei registratoDevi essere registrato per commentare ISCRIVITI |
Copiare il codice nella pagina web del tuo sito. |
Copyright InfTub.com 2024