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

Un campo si dichiara in questo modo:

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

Esempio:

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:

Cinema Sport Teatro Musica Tv

<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

Cinema Sport Teatro Musica Televisione

<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=”https://www.computereweb.eu/wp-content/uploads/2009/07/cew.jpg” mce_src=”https://www.computereweb.eu/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.eu”><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:

Nome e Cognome:
Email:
Messaggio: