Il Sito per imparare gratuitamente a fare pagine Web

Oggi: Sabato 07 Novembre 2009   Ore: 18:08
 
Home · XHTML con Style · Primi Passi · Guida HTML · Guida CSS · Guida PHP · F.A.Q. · Scripting · Applets · Grafica Web · Forum · Comunicazioni Scrivimi
 
  Web-Link
Libera Donazione
  Primi Passi
web-link
·Introduzione
·Testo
·Immagini
·Links
·Cosmesi
·Head & Body
·Frames
·Tabelle
·Moduli Form
·Audio Script Applet
·Pubblicare il sito
·Conclusioni
web-link
  Fare Web
web-link
·Applets
·Banners
·Blog
·Chat
·Contatori
·DHTML
·E-Commerce
·Editors CSS
·Editors HTML
·Flash
·Forum
·F.T.P.
·Guestbooks
·Grafica
·Iscriz.Mot.Ricerca
·Java Applets
·Java Script
·Mailling List
·Mappe Cliccabili
·Meta Tags
·Mot.ricerca interno
·Scripting
·Sondaggi on-line
·Spazi Web
·Tag Boards
·URL forwarding
·Validatori HTML
·W3C Specifiche
·Web Designer
·Web Master
web-link
Guida Primi Passi HTML 4.01 - Ver. 2.5.4 - Ottobre 2008 - By Andrea Bianchi Web-Link
web-link

Guida html






I Moduli o Forms.

Nelle lezioni precedenti abbiamo imparato molto, almeno questo voglio credere e sperare :-))

Dovremo essere in grado di creare e gestire un sito, magari semplice ma comunque un sito tutto nostro e al quale non manca assolutamente nulla.

Adesso però vorremo anche qualcosa di leggermente più complesso, più professionale, del tipo: come interagire con i nostri visitatori per conoscerli o per sapere cosa ne pensano del nostro lavoro?. Per fare questo ci si deve costruire un Modulo o Form

I forms, possono essere utilizzati per svariate forme di comunicazione, adoperati da soli, cioè con i soli elementi offerti da html hanno forse delle limitazioni. Se associati ad un qualsiasi linguaggio di scripting (javascript per esempio), acquisiscono una potenza incredibile, sono in grado di ricevere ed inviare dati a/da pagine diverse, eseguire operazioni matematiche, effettuare controlli anche di tipo piuttosto complesso e molto altro ancora.

Un modulo (form) può essere costituito da diversi elementi quali: caselle per introduzione testo, menù a tendina dai quali poter effettuare delle scelte, caselle di tipo spunta, caselle per selezioni singole o multiple, aree più o meno grandi per raccogliere commenti e descrizioni, caselle nascoste per password, pulsanti di invio, pulsanti di annullamento.

Potete vedere tutti questi elementi sulla mia guida html, in questa lezione ci limiteremo all'essenziale per poter creare e gestire un modulo. Una volta capita la tecnica potrete poi arricchirlo di tutti gli elementi che si renderanno necessari.

Vediamo come creare il più semplice:

<form>

Questo è l'elemento che dichiara il modulo, da solo dice poco o niente, necessita di alcuni attributi, almeno due: action e metod e volendo anche un terzo opzionale: name che servono rispettivamente:

action per indirizzare il modulo al server, all' URL, al CGI o all'indirizzo di posta.

motod per dichiarare con quale dei due possibili metodi: POST e GET si devono trasmettere i dati.

name Il nome che preferite assegnare al modulo, diventa opzionale in HTML ma indispensabile se si dovesse far uso di JavaScript o altro linguaggio di programmazione ad oggetti.

I campi che compongono un modulo si ottengono con l'elemento <input> al quale vanno assegnati alcuni parametri quali:

type e sono molti i tipi associabili, noi adopereremo Text
name Il nome del campo che raccoglie il dato introdotto.

Questo il listato:

<form>
Inserisci il tuo nome: <input type="Text" name="tuo nome">
</form>

e questo il risultato a video:

Inserisci il tuo nome:

Potete anche inserire il vostro nome, di fatto non servirà a nulla in quanto per funzionare correttamente al modulo mancano due cose: il pulsante per l'invio e le specifiche relative a dove inviarlo.

Per il pulsante di invio si procede creando un altro elemento <input> questa volta però metteremo come Type l'attributo Submit che serve per creare il pulsante di invio, aggiungeremo anche Value per la scritta che dovrà comparire sul pulsante.

Adesso il nostro listato è questo:

<form>
Inserisci il tuo nome: <input type="Text" name="tuo nome">
<input type="Submit" value="invia">
</form>

 Questo il risultato a video:

Inserisci il tuo nome:   

Se provate ad introdurre il vostro nome e a premere il pulsante "invia" vi accorgerete che non succederà ancora nulla, o quasi...
Il modulo infatti pur funzionando non sa ancora a chi inviare i dati appena raccolti e neppure in quale formato.

Di solito un form lo si invia ad uno script CGI, uno dei tanti messi a disposizione dai vari server della rete, per ragioni di sicurezza e al fine di contenere lo SPAM questa operazione è divenuta ormai possibile soltanto col server sul quale si ha il proprio sito.

Gli script in cgi provvedono a ricevere i dati, effettuare dei controlli e dopo averli formattati passano all'immediata spedizione (send-mail), cioè si fa uso di un servizio semplicemente richiamandolo e questo è, come ho appena detto, di solito compreso con lo spazio web dove si ha il proprio sito web. Verificatelo negli accessori o nei servizi offerti dal vostro gestore, è probabile trovarlo sotto la voce di formmail o sendmail.

Questo Formail offre la possibilità di ricevere i dati provenienti dal vostro form e li inoltra sulla casella postale da voi specificata, con il vantaggio di inviarvi tutti i dati opportunamente ordinati e senza obbligare chi compila il modulo a dover inserire la propria e-mail. Se da una parte favorisce i messaggi anonimi dall'altra incentiva i commenti anche di coloro che non amano lasciare il proprio indirizzo e-mail in giro per la rete.

Mi rendo conto che per un principiante non sia molto semplice capire questo meccanismo, ma vi garantisco che non è neppure troppo difficile :-)

Vediamo un paio di esempi che certamente chiariranno meglio ogni cosa:

I metodi per ricevere un form sono almeno due:

1) inoltrando il tutto al server CGI (quando questo è conosciuto) o script in php, asp ecc.ecc..

2) inoltrando il tutto alla propria casella postale.

Vantaggi e svantaggi dei due metodi:

1) Il server CGI o script in php asp è di sicuro il sistema migliore, abbiamo detto che permette l'invio del modulo anche da parte di chi non ha una casella postale o da chi molto più semplicemente non vuole farne uso per non renderla pubblica. Questo sistema provvede all'ordinamento e alla formattazione dei dati prima di recapitarli all'indirizzo e-mail. Gli script offrono controlli sui dati introdotti ed inviano anche diverse informazioni quali: l'ora, il giorno, l'URL del mittente.

2) La propria casella postale che è possibile utilizzare immediatamente non dovendo infatti conoscere altri dati oltre a quello, di contro c'è che si possono ricevere i moduli soltanto se chi li invia è disposto ad adoperare il proprio indirizzo di posta elettronica, è infatti grazie a questo che il modulo potrà essere spedito e di conseguenza recapitato. I dati sono meno ordinati ma comunque leggibili.

Vediamo come farci inviare il form sopra composto da un solo campo adoperando entrambi i sistemi. Dovremo fare uso dei due attributi spiegati all'inizio di questa lezione e cioè: Method ed Action

Per spedirlo tramite posta elettronica:

<form method="post" action="mailto:vostronome@serverdiposta.it" enctype="text/plain" name="mio_form">

Tuo nome: <input type="Text" name="tuo nome">

giudizio: <input type="Text" name="giudizio">

<input type="Submit" value="invia">

</form>

Questo il risultato a video:

Il tuo giudizio su questa rubrica:

Tuo nome:
giudizio:
 

Facendo uso di una tabella con border=0, l'abbiamo imparato nella lezione precedente, è stato possibile dare al form un aspetto molto più ordinato, oserei dire quasi professionale :-)

Se volete provarlo funziona ma non sappiamo a chi arriverà, ho dovuto infatti togliere il mio indirizzo e-mail per ragioni di spam ma questo è un rischio che chiunque abbia un sito web dovrà correre.

Se inserite il vostro indirizzo email vi sarà recapitato in mail-box, in questo formato:

tuo nome=dati inseriti
giudizio=dati inseriti

Se questo sistema vi soddisfa non vi resta che crearvi tutti i moduli che volete e farveli spedire... è possibile aggiungere anche il titolo o subject alla mail che vi consegnerà i dati del modulo, notate l'aggiunta di ?subject all'elemento form:

<form method="post" action="mailto:vostronome@serverdiposta.it?subject=dalla lezione 8 di primi passi" enctype="text/plain" name="mio_form">

Tuo nome: <input type="Text" name="tuo nome">

giudizio: <input type="Text" name="giudizio">

<input type="Submit" value="invia">

</form>

L'altro sistema invece è quello di affidare il tutto al server CGI.

La struttura resta la stessa ma al posto di:

action="mailto:vostronome@serverdiposta.it"

Dovremo adoperare un indirizzo di CGI valido, ripeto: informatevi sulla home page del fornitore del vostro spazio web, gratuito o a pagamento che sia. Vi assicuro che questo servizio è comune a molti degli spazi web offerti anche gratuitamente.

Con questa lezione abbiamo imparato anche a cosa servono a come si costruiscono i moduli, una delle cose più difficili per un principiante. Siamo quasi alla fine, non arrendetevi proprio adesso, ormai non resta molto.

Nella prossima lezione, vedremo come inserire la musica, gli script e le applet.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.











  Potete fare domande e discutere l'argomento sul Forum



  Risorse
· Forum
· F.A.Q.
· Frames
· Scripting
· Applets
· Grafica Web
· Banner Exchange
· Novitànews
weblink
  Servizi
· Sondaggio
· I Files Scaricati
· Segnala il sito
· Leggi Guestbook
· Firma Guestbook
· Banners
weblink
  Linguaggi
· A.J.A.X.
· A.S.P.
· C.G.I.
· C.S.S.
· Flash
· H.T.M.L.
· X.H.T.M.L.
· Java
· JavaScript
· P.E.R.L.
· P.H.P.
· X.M.L.
weblink
  Download
· Primi Passi
· Guida HTML
· Guida CSS
· Guida XHTML
weblink
 
· Home Page Home Page · Aggiungi ai preferiti Aggiungi ai preferiti · Segnala ad un amico Segnala il sito ai tuoi amici ·
 

Valid CSS!
Valid HTML 4.01!

Questa pagina è esclusiva proprietà di © Web-Link © Andrea Bianchi 1997 ~ 2009
Vietata la copia e la distribuzione, anche parziale, senza la previa autorizzazione scritta di Web-Link