Ecco una serie di ebook gratuiti, realizzati da computereweb.net sui principali linguaggi di programmazione:

GUIDA HTML

MODULI HTML
GUIDA CSS
GUIDA WML
GUIDA MYSQL

Condividi

Questo articolo è un supplemento della guida html. Il motivo di dedicare una sezione a parte per i moduli è dovuto al fatto che il loro funzionamento è condizionato ed è legato all’uso di script (javascript; appleta java; php, cgi-perl, asp …).

I moduli consentono all’utente d’interraggire con il sito web, immetendo le proprie informazioni e inviandole. Per creare la struttura di un modulo si utilizza il linguaggio html, ma affinchè esso funzioni è necessario usare uno script.

FORM

gli attributi di form:

<form Selettore che indica il modulo

action=”" l’url di destinazione, dove verrano inviati i dati

method=”" il metodo con cui vengono inviati, esso può essere:

• get inviati direttamente al server
• post Ricevuti direttamente dallo script

>

<input da qui si dichiarano i campi, vedere sotto …

</form> Chiusura del modulo

I CAMPI

<input è il selettore

type=”" è il tipo di campo che può essere:

text; password; file; checkbox; radio; button; image; submit; reset; hidden

name=”" è il nome del campo, da richiamare nello script

value=”" è il valore del campo

>

Attributi opzionali:

disabled=”disabled” Campo non attivo.

Attribuiti opzionali validi per i campi Text e Password:

maxlength Stabilice la lunghezza massima di caratteri che possono essere immessi.

size E’ la dimensione del campo

TEXT

Un campo di testo

Esempio:

Nome:

<input type=”text” name=”nome” maxlength=”20″>

PASSWORD

Come un campo testo, solo che i caratteri immessi vengono visualizzati sotto forma di punto.

Esempio:

Password:

<input type=”password” name=”pass” maxlength=”20″>

TEXTAREA

Un’area di testo, questo è l’unico modulo che può essere utilizzato anche senza l’uso di uno script. Infatti, come potete vedere da questo articolo abbiamo utilizzato diverse textarea per evidenziare il codice sorgente, in modo tale che l’utente possa effettuare una copia e incolla più velocemente.

Gli attributi obbligatori sono:

name=”" il nome da richimare in uno script

cols=”" il numero di colonne

rows=”" il numero di righe

Mentre sono opzionali:

readonly=”readonly” Non è possibile modificare il contenuto

disabled=”disabled” Area testo non attiva

Esempio:

Commenti: scrivi qui i tuoi commenti!”

<textarea cols=”30″ rows=”1″ readonly=”readonly>

FILE

Consente all’utente di caricare un file.

Allego File:

<input type=”file” name=”carica” maxlength=”20″>

CHECKBOX

Inserire una o più caselle di selezione.

Esempio:

Si:

<input type=”checkbox” name=”casella” value=”prova”>

RADIO

Simile a checkbox, ma in questo caso è possibile selezionare contemporanemente più scelte.

Esempio:

Si:

<input type=”radio” name=”casella2″ value=”prova”>

SELECT

Consente di creare un elenco a discesa.

Attributi obbligatori:

name=”" il nome da richiamare nello script

<option></option> le opzioni da visualizzare nell’elenco

Attributi opzionali:

disabled=”disabled” Campo select non attivo.

multiple=”multiple” Consente una selezione multipla

size=”" Dimensione del riquadro in numeri

Mentre in option è possibile inserire altri attributi:

disabled=”disabled” Disabilita una determinata opzione

selected=”selected” L’elemento predefinito da selezionare all’avvio del modulo

Esempio Seleziona Singola:

Hobby:

<br /> <SELECT size=1 cols=4 name=”hobby”> <OPTION selected Value=”nessuna”><br /> <OPTION value=”cine” selected=”selected”> Cinema<br /> <OPTION value=”sport” disabled=”disabled”> Sport<br /> <OPTION Value=”teatro”> Teatro<br /> <OPTION Value=”musica”> Musica<br /> <OPTION Value=”tv”> Tv<br /> </select> <p>

Esempio Seleziona Multipla: (Tenendo premuto ctrl e cliccando sull’opzione)

Hobby

<br /> <select multiple=”multiple” name=”giudizio” size=”10″> <option value=”nessuna”> </option><option value=”nessuno” selected=”selected”> </option><option value=”cine”> Cinema </option><option value=”sport” disabled=”disabled”> Sport </option><option value=”teatro”> Teatro </option><option value=”musica”> Musica </option><option value=”tv”> Televisione </option></select> <p>

BUTTON

Crea un bottone.

Esempio:

<input type=”button” value=”invia” name=”bottone”/>

IMAGE

Usare un immagine come bottone.

Esempio:

<input name=”bottone” type=”image” src=”http://www.computereweb.net/wp-content/uploads/2009/07/cew.jpg” mce_src=”http://www.computereweb.net/wp-content/uploads/2009/07/cew.jpg” />

SUBMIT

Il classico bottone utilizzato per inviare un modulo.

Esempio:

<input name=”bottone” type=”submit” value=”invia adesso” />

RESET

Cancella tutto il contenuto dei campi.

Esempio:

<input name=”bottone” type=”reset” value=”ricomincia” />

HIDDEN

Campo nascosto per effettuare delle verifiche.

Esempio:

<input name=”extra” type=”hidden” value=”importante” />

Ecco il codice html, per inserire un semplice modulo contatti nel vostro sito, infatti quasi tutti gli hosting forniscono uno script cgi-perl preinstallato sul server che effettua questa operazione.

Quindi vi basta copiare e incollare il codice qui sotto in una pagina html da inviare poi nel vostro sito, facendo attenzione a modificare il percorso (dove si trova lo script) e l’indirizzo e-mail, e poi potete sbizzarirvi ad inserire qualsiasi altro tipo di campo descritto in questo articolo.

Codice html da inserire nella pagina desiderata:

<br /> <form action=”/cgi-bin/FormMail.pl” method=”POST”> <input type=hidden name=”recipient” value=”info@computereweb.net”><br /> <input type=hidden name=”subject” value=”oggetto”></p> <table border=”0″ cellspacing=”0″ cellpadding=”5″ align=”center”> <tr> <td><b> Nome e Cognome:</b></td> <td align=”right”><input type=text name=”realname”></td> </tr> <tr> <td><b>Email:</b></td> <td align=”right”><input type=text name=”email”></td> </tr> <tr> <td colspan=”2″><b>Messaggio:</b></td> </tr> <tr> <td colspan=”2″><textarea name=”messaggio” cols=”40″ rows=”5″>

Anteprima:

Condividi

Esempio: (Una società con sedi in 7/20 regioni italiane ed 2 prossime aperture)

<img usemap="#italia" src="http://www.computereweb.net/wp-content/uploads/2009/08/italia-249x300.jpg" border="0" alt="" width="350" height="421" /></p> <map name="italia"> <area shape="POLY" coords="63,39, 79,18, 105,16, 116,25, 109,53, 120,51, 112,64, 135,83, 107,83, 87,76, 74,87, 57,70, 64,62, 64,54" alt="Lombardia"></area> <area shape="CIRCLE" coords="127,147,32" alt="Toscana"></area> <area shape="RECT" coords="192,173, 230,205" href="http://www.lacineteca.tk" alt="Abruzzo"></area> <area shape="RECT" coords="261,281, 312,363" href="http://www.teleradioe.it" alt="Calabria"></area> <area shape="RECT" coords="253,237, 296,282" href="http://www.tuttoperufficio.com" alt="Basilicata"></area> <area shape="CIRCLE" coords="185,31,24" href="http://www.computereweb.net" alt="Friuli Venezia Giulia"></area> <area shape="RECT" coords="10,38, 39,57" href="http://www.lacineteca.org" alt="Valle D'Aosta"></area> <area shape="CIRCLE" coords="210,369,57" href="http://www.nicotraalessandro.com" alt="Sicilia"></area> <area shape="RECT" coords="28,227, 88,324" href="http://www.giocherellare.info" alt="Sardegna"></area> </map> <p>

Quindi un’area è possibile definirla in 3 modi diversi:

• rect Rettangolare, con 4 coordinate (x sx -y sx- x a – y b)
• circle Cerchio, con 3 coordinate (x-y-raggio)
• poly Poligono, con numero personalizzato di coordinate 
  in parole povere, è il classico gioco d’enigmistica dove bisogna unire tutti i punti (detto comunemente filo numerico).

E’ facile intuire che una mappa d’immagini è meglio crearla facendo uso di un software (si perdere tanto tempo per cercare le coordinate giuste).
Tra i tanti software consigliamo Geo html (lo potete trovare nella sezione http://download.html.it/categorie/start/53/windows/image-map/ ).

Condividi

è
&#232

à
&#224

ù
&#249

ì
&#236

Condividi