Precedente
BACK

HTML HOUSE

MODULI

Successiva
NEXT


I moduli sono un sistema utile per avere informazioni dall'utente che stà visitando la vostra pagina, logicamente con il benestare del visitatore stesso. Sicuramente se avete navigato su Internet vi sarete imbattuti spesso su questa forma di questionari e richiesta di commenti o altro, ma vediamo come si fanno:
<FORM METHOD="post" ACTION="http://www.htmlhouse.it/cgi-bin/email?001234+ID">
</FORM>
Questa è la forma per iniziare un Modulo, che da ora chiamerò indistintamente FORM. Praticamente si inizia impostando il TAG FORM con l'attributo METHOD che può essere impostato come POST o GET, la dicitura esatta vi sarà data direttamente dal vostro amministratore del server che voi dovrete contattare.

Dopo l'attributo METHOD bisogna inserire l'attributo ACTION che indica la fine che dovranno fare i dati inseriti. Anche in questo caso contattando il vostro amministratore server potrete sapere se questi dati hanno la possibilità di arrivare direttamente nella vostra casella E-MAIL, in base al servizio CGI disponibile sul server.

Le possibilità dei moduli sono molte ma andiamo a vederle una a una. I nuovi TAG da imparare sono INPUT e TYPE: il primo serve a indicare che vengono inseriti dei dati, TYPE indica il tipo di dati che vengono inseriti. TYPE può contenere diversi tipi di comandi che sono: text, submit, checkbox, radio, image, reset, file, password e hidden, a seconda che vogliamo venga inserita una riga di testo (text), oppure la scelta di deteminati parametri che possono essere multipli e allora inseriremo CHECKBOX, o a singola scelta e allora inseriremo RADIO. L'attributo CHECKED serve ad indicare quale parametro è attivo per default. Ma vediamo l'esempio che chiarirà sicuramente i vostri dubbi:
<FORM METHOD="post" ACTION="http://www.htmlhouse.it/cgi-bin/email?001234+ID">
<INPUT TYPE="text" NAME="HTML1"> Scrivi qua il tuo nome
<INPUT TYPE="checkbox" NAME="HTML2" VALUE="domanda1">Ci ritornerò 1000 volte
<INPUT CHECKED TYPE="checkbox" NAME="HTML2" VALUE="domanda2">Ci ritornerò 10000 volte
<INPUT CHECKED TYPE="radio" NAME="HTML3" VALUE="domanda3">Il sito è bello
<INPUT TYPE="radio" NAME="HTML3" VALUE="domanda4">Il sito fà schifo
</FORM>
CLICCA QUI PER LA DIMOSTRAZIONE
Le altre parole che possono essere inserite sono HIDDEN il quale definisce che i parametri sono scelti e trattati direttamente dal server; PASSWORD che determina la comparsa di asterischi al posto dei caratteri inseriti dall'utente. Ulteriore attributo da inserire è VALUE che serve nel momento che vi arriva l'E-Mail per sapere cosa è stato impostato nel modulo dal visitatore. Nel marcatore INPUT si utilizza anche NAME che serve a dare un nome a quella riga del modulo in maniera tale che quando vi arriverà per posta il modulo compilato ci sarà scritto per ogni riga inserita dall'utente anche a cosa veniva riferito il commento.

Un altro TAG utilizzabile è SELECT che permette di impostare dei menù o elenchi di voci. Vicino al marcatore bisogna inserire due attributi NAME e SIZE, che sono rispettivamente il nome e la dimensione dell'elenco. Impostando SIZE su 1 si ottiene un menù a finestra. Mentre se SIZE viene impostato con un numero più alto otterremo un menù a scorrimento. Il TAG OPTION serve a definire le voci dell'elenco e VALUE a dare un nome a queste voci quando vengono recapitate in forma di E-MAIL. L'attributo SELECT definisce la voce dell'elenco impostata per default.
<FORM METHOD="post" ACTION="http://www.htmlhouse.it/cgi-bin/email?001234+ID">
<SELECT NAME="MENU" SIZE="1">
<OPTION VALUE="1.html" SELECTED>1-HTML
<OPTION VALUE="2.html">2-HOUSE
<OPTION VALUE="3.html">3-JAVASCRIPT
</SELECT>
</FORM>
CLICCA QUI PER LA DIMOSTRAZIONE
Un ulteriore TAG è TEXTAREA che permette di impostare un riquadro in cui l'utente può scrivere liberamente. Anche questo marcatore come gli altri visti prima contiene l'attributo NAME e in più gli attributi ROWS e COLS che impostano l'altezza e la larghezza del riquadro:
<FORM METHOD="post" ACTION="http://www.htmlhouse.it/cgi-bin/email?001234+ID">
<TEXTAREA NAME="scrivi" ROWS=6 COLS=50>Scrivi quello che vuoi
</TEXTAREA>
</FORM>
CLICCA QUI PER LA DIMOSTRAZIONE
Ultimo comando da vedere è quello che prevede i pulsanti di invio (SUBMIT) e di pulizia dei campi immessi (RESET). Questo significa che se io schiaccio il pulsante corrispondente a SUBMIT il modulo viene inviato a destinazione, mentre se io schiaccio il pulsante corrispondente a RESET, il modulo ritorna pulito come allo stato iniziale, il codice HTML da inserire è:
<FORM METHOD="post" ACTION="http://www.htmlhouse.it/cgi-bin/email?001234+ID">
<INPUT TYPE="submit" VALUE="spedisci">
<INPUT TYPE="reset" VALUE="cancella">
</FORM>
Se avete scritto in questa maniera vi verrà tutto disordinato, provate a scrivere così:
<FORM METHOD="post" ACTION="http://www.htmlhouse.it/cgi-bin/email?001234+ID">
Scrivi qua il tuo nome<INPUT TYPE="text" NAME="HTML1"><BR>
<INPUT TYPE="checkbox" NAME="HTML2" VALUE="domanda1">Ci ritornerò 1000 volte<BR>
<INPUT CHECKED TYPE="checkbox" NAME="HTML3" VALUE="domanda2">Ci ritornerò 10000 volte<BR>
<INPUT CHECKED TYPE="radio" NAME="HTML4" VALUE="domanda3">Il sito è bello<BR>
<INPUT TYPE="radio" NAME="HTML4" VALUE="domanda4">Il sito fà schifo<BR>
<SELECT NAME="MENU" SIZE="1">
<OPTION VALUE="1.html" SELECTED>1-HTML
<OPTION VALUE="2.html">2-HOUSE
<OPTION VALUE="3.html">3-JAVASCRIPT
</SELECT><BR>
Scrivi quello che vuoi<TEXTAREA NAME="scrivi" ROWS=6 COLS=50>
</TEXTAREA><BR>
<INPUT TYPE="submit" VALUE="spedisci">
<INPUT TYPE="reset" VALUE="cancella">
</FORM>
CLICCA QUI PER LA DIMOSTRAZIONE
Per avere altri effetti sui moduli bisogna utilizzare i JavaScript.

Precedente
BACK
Successiva
NEXT