Caricare documenti e articoli online 
INFtub.com è un sito progettato per cercare i documenti in vari tipi di file e il caricamento di articoli online.


 
Non ricordi la password?  ››  Iscriviti gratis
 

Manuale Form - Apri Notepad e seguimi

informatica



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.

alcuni programmi di posta sono in grado di convertire i dati senza ricorrere ad altri programmi. Cancella le istruzioni ENCTYPE="application/x-www-form-urlencoded" e al loro posto utilizza ENCTYPE="text/plain"

















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>

Ed Holleran
Rick Weinberg
Tom Studd

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>

Chi è il tuo migliore amico?
Ed Holleran
Rick Weinberg
Tom Studd

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>

Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

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>

Quale di questi ragazzi è un tuo amico?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

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!.

Quali di questi ragazzi sono tuoi amici?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

A quale di questi ragazzi impresteresti del denaro?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

A quale di questi ragazzi lasceresti frequentare tua sorella?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

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...

Quali di questi ragazzi sono tuoi amici?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

A quali di questi ragazzi impresteresti del denaro?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

A quale di questi ragazzi lasceresti frequentare tua sorella?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

...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


Hits: 2695
Apprezzato: scheda appunto

Commentare questo articolo:

Non sei registrato
Devi essere registrato per commentare

ISCRIVITI



Copiare il codice

nella pagina web del tuo sito.


Copyright InfTub.com 2024