Il sito per imparare gratuitamente a fare pagine Web

Guida HTML

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip
 


Form o Moduli


Elementi o Tags:
Attributi:
Attributi di input:
Attributi di type:

Andrea Bianchi © www.web-link.it  Guida HTML 4.01 - Ver. 7.0.1  

I Moduli o Forms permettono di interagire con i visitatori del proprio sito offrendo loro la possibilità di immettere, o richiedere, informazioni tramite semplici caselle di testo, in alcuni casi menù a scorrimento, radiocomandi, caselle di tipo "spunta" ed altro ancora. Utilissimi, per non dire indispensabili, nella raccolta di dati sotto forma di questionari.

Il modulo per funzionare al meglio ha bisogno di un'ulteriore elaborazione da parte di un linguaggio di programmazione, il solo HTML infatti si limita ad inviare il tutto in modo spartano richiamando il programma di posta elettronica (client) installato sul PC dell'utente: Outlook express o Thunderbird, tanto per citare due dei più famosi e gratuiti client di posta.

Non tutti però hanno installato e configurato nel proprio PC un client di posta, o non sempre è possibile usarlo, immaginiamo per esempio chi si collega dall'ufficio, da casa di un amico o da un internet point dove non è possibile adoperare il proprio programma installato sul proprio PC.

Per questo ed altri motivi conviene, laddove sia fattibile, affidarsi ad uno script installato e configurato nel proprio spazio web. Uno dei più famosi è FormMail di Andrea Matta, reperibile gratuitamente su questo link. In Alternativa ci si può affidare ad uno dei linguaggi lato server: PHP o ASP oppure ad uno dei servizi di sendmail che di solito lo stesso fornitore di spazio web offre ai propri clienti.

Qualcuno si starà chiedendo perchè mai sia tutto così complicato, perchè lo spam, spazzatura, che ogni giorno raggiunge milioni di utenti è talmente frequente e fastidioso che tutti i vari server free che offrivano un sendmail gratuito hanno sospeso questo servizio o lo hanno limitato ai soli clienti.

In ogni caso, che si decida di usare il proprio client di posta, un linguaggio lato server o un servizio già pronto in rete, quanto descritto sotto a proposito dei moduli resta valido sempre.



Torna su
 

<form>...</form>

L'elemento <form> serve per creare un modulo input per l'inserimento dati. In un documento html possono esserci più moduli ma questi dovranno essere tutti indipendenti fra di loro, nel senso che il tag <form> non può essere annidato (un modulo all'interno di un altro modulo) come per le tabelle o per altri tags di html. L'elemento form necessita di alcuni attributi per funzionare: action, method ed enctype e necessita del suo elemento di chiusura </form>

<form attributi ...>

attributi assegnabili all'elemento form: action, method, enctype


 

action

L'attributo action è l'azione da compiere nel momento dell'invio, di solito un URL che specifica la locazione del file o dello script al quale vengono inviati i dati del modulo, può essere anche un indirizzo di posta elettronica nel caso in cui i dati debbano essere inviati tramite il client di posta di chi lo compila. Se manca l'attributo action viene assunto per default lo stesso URL in cui si trova il modulo.

 

method

L'attributo method specifica il metodo per accedere all'URL dichiarato in action, due le possibilità: post o get. Il metodo get viene preferito per quei moduli che non necessitano di elaborazioni esterne. Per tutti gli altri casi si adopera post

 

enctype

L'attributo enctype specifica il tipo di media utilizzato per codificare i dati del modulo, per default è di tipo MINE.

Un esempio tipo potrebbe essere questo:

<form method="get" action="/cgi-bin/Formail.pl" enctype="text/plain" >


Torna su
 

<label>...</label>

L'elemento <label> è una etichetta per descrivere un campo input. Apparentemente sembra una semplice descrizione che potrebbe essere lasciata ad una qualsiasi scritta di un testo direttamente nel codice html, invece è qualcosa di più, facendo click su un input txt si ottiene il fuoco di quella casella, su un input radio si attiva la scelta proprio come se si fosse fatto click sul pallino. Questo elemento necessita del relativo elemento di chiusura </label>

<label for="nome"> Nome:</label><input id="nome" type="text">
<label for="maschio">Maschio : </label><input id="maschio" name="sesso" type="Radio">
<label for="femmina">Femmina : </label><input id="femmina" name="sesso" type="Radio">

Si crea una label e con l'attributo for si specifica per quale nome del campo viene creata, in questo esempio nome, maschio e femmina assegnati con i relativi id="xxx" ai vari campi input di tipo text e radio

Questo il risultato:







Torna su
 

<input>

L'elemento <input> rappresenta il campo più importante di un modulo. Questo campo consente all'utente di introdurre o modificare dati in diversi modi a seconda del tipo (type) di input adoperato. Oltre al tipo di dati ve ne sono molti altri ma qui vi descrivo soltanto quelli realmente adoperati.

<input attributo="valore">

attributi assegnabili all'elemento input:

align, checked, maxlength, name, size, src, type, value

Ce ne sono di nuovi introdotti da html5 e visibili sulla guida HTML 5 di Web-Link

 

align

Questo attributo specifica l'allineamento, quindi adoperato con l'impostazione type=image, i possibili valori sono: left, right, top, middle e bottom. Questo attributo è deprecato con html4.01 e non più supportato da html5 a favore di un allineamento con fogli di style.

 

checked

Questo attributo indica la casella preselezionata o il radio-button scelto come premuto, adoperato con type=checkbox e type=radio.

 

maxlength

Questo attributo indica il numero massimo di caratteri che possono essere immessi nel campo testo, adoperato con type=txt. il numero potrebbe essere anche più grande di quello specificato dall'attributo size, in quel caso il testo scorrerà orizzontalmente essendo il numero di default illimitato.

 

name

Questo attributo assegna un nome univoco per il campo o per un gruppo di file correlati.

 

size

Questo attributo specifica le dimensioni in numero di caratteri del campo inserimento dati.

 

src

Questo attributo indica l'URL da richiamare l'immagine grafica usata nel pulsante di submit, da utilizzare quindi solo con type=image.

 

value

Questo attributo imposta il valore iniziale di un campo, sia esso testo che numerico.



Torna su
 

type

Questo attributo definisce il tipo di controllo da assegnare al campo input, per default è text: libero testo; possono essere definiti diversi tipi di input quali:

<input type="...">

Tipi di campi assegnabili ad input con l'attributo type

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

Ce ne sono di nuovi introdotti da html5 e visibili sulla guida HTML 5 di Web-Link



Torna su
 

button

Questo attributo di type viene utilizzato per inserire pulsanti. Con l'attributo value è possibile specificare il testo da visualizzare sul pulsante stesso.

<input type="button" value="premi" name="nome">
  


Torna su
 

checkbox

Questo attributo di type viene utilizzato per caselle di scelta dove il suo valore è di tipo booleano, in pratica il campo può essere soltanto vero o falso, si o no.

<input type="Checkbox" value="si" name="nome">
  Conosco CSS
  Conosco PHP


Torna su
 

file

Questo attributo di type viene utilizzato per inviare un file contenuto nel proprio PC, ovviamente il server che lo riceve deve essere configurato per poterlo archiviare sul disco, operazione che Html da solo non è in grado di fare quindi si ricorre a PHP o ASP o qualsiasi altro linguaggio lato server.

<input type="File" name="nome">


Torna su
 

hidden

Questo attributo di type viene utilizzato per campi nascosti. Non viene mostrato alcun campo a video ma il suo contenuto viene comunque spedito con gli altri dati del modulo. Nell'esempio sotto insieme agli altri dati inseriti dal visitatore, arriverebbe anche il campo sito col valore web-link

<input type="hidden" name="sito" value="web-link">
 


Torna su
 

image

Questo attributo di type viene utilizzato per definire una immagine grafica da usare come pulsante di submit per l'invio del modulo. L'attributo src richiama il nome completo ed eventuale percorso dove reperire l'immagine stessa. Trattandosi di una immagine grafica è possibile usare anche gli attributi alt e title visti per l'elemento <img>.

<input type="immage" src="nome.jpg" title="premi per inviare" alt="submit">


Torna su
 

password

Questo attributo di type viene utilizzato per le password, o meglio per inserire testo nel campo senza che questo venga visualizzato, al posto dei caratteri inseriti si vedranno una serie di asterischi o di pallini. Con l'attributo size è possibile impostare le dimensioni della finestra di input.

<input type="password" size="25">


Torna su
 

radio

Questo attributo di type viene utilizzato per selezionare un singolo valore su campi radio con diverse alternative. Se infatti allo stesso gruppo di radio viene assegnato lo stesso nome, un solo valore potrà essere selezionato. E' possibile con checked stabilire anche una preselezione o scelta iniziale, sono obbligatori gli attributi name e value.

<input type="radio" name="piace" value="si" checked>
<input type="radio" name="piace" value="no">
si
no
non so

Si noti come sia possibile selezionare una sola delle tre voci e come la prima sia già selezionata per default.



Torna su
 

reset

Questo attributo di type viene utilizzato per creare un pulsante di reset che azzera il modulo riportandolo ai suoi valori iniziali e di conseguenza cancellando tutti i dati introdotti dall'utente. Con l'attributo value è possibile impostare il nome da visualizzare sul pulsante.

<input type="reset" value="azzera">








Torna su
 

submit

Questo attributo di type viene utilizzato per creare un pulsante per inviare il modulo una volta compilato, anche in questo caso l'attributo value permette di scegliere cosa scrivere sul pulsante.

<input type="submit" value="Invia Dati">




Torna su
 

text

Questo attributo di type viene utilizzato per creare i campi di testo a riga singola, si possono utilizzare gli attributi size e maxlength per impostare la dimensione del campo e la quantità massima di testo ammesso. Sono necessari gli attributi name e value rispettivamente per definire il nome univoco ed assegnare un ipotetico valore iniziale al campo, una specie di precompilazione..

<input type="text" value="testo iniziale" size=20" maxlength="48" name="pieno">
<input type="text" value="" size=20" maxlength="48" name="vuoto">






Torna su
 

<option>

L'elemento <option> è utilizzato all'interno dell'elemento <select>, elenca una serie di diversi valori sui quali poter operare una scelta. Ha due attributi: selected (opzionale) per indicare il valore preselezionato e value per indicare i valori assegnati alle singole voci. Le possibili voci sono visibili cliccando sul triangolino a fianco della prima voce. Questo elemento necessita del relativo tag di chiusura: </option>

<select name="nome">
<option value="scelta uno">scelta uno</option>
<option value="scelta due">scelta due</option>
</select>


Torna su
 

<select>...</select>

L'elemento <select> consente di effettuare delle scelte, singole o multiple, rappresentate dai vari elementi <option>. Ha tre possibili attributi: multiple per effettuare diverse scelte, name il nome che sarà inviato come intestazione delle scelte, size specifica il numero di voci visibili in elenco. Provate a selezionare le voci tenendo premuto il tasto CTRL o SHIFT come avviene normalmente per selezionare i files nel vostro sistema operativo, noterete che è possibile operare più di una singola scelta. Questo elemento necessita del relativo tag di chiusura: </select>

<select multiple name="nome">
<option value="scelta uno" >scelta uno</option>
<option value="scelta due" >scelta due</option>
</select>


Torna su
 

<textarea>...</textarea>

L'elemento <textarea> consente di immettere testo su più righe, praticamente si crea un'area per l'immissione di testo decisamente più comoda di una sola riga nel caso in cui si prevede l'introduzione di testo libero di una certa lunghezza. Gli attributi rows e cols rispettivamente per righe e colonne specificano le dimensioni di questa area testo. Questo elemento necessita del relativo tag di chiusura: </textarea>

<textarea name="nome testo" cols"22" rows="5"></textarea>


Torna su
 

Un esempio con molti dei vari elementi ed attributi spiegati sopra. Il Form riportato sotto serve per raccogliere dati e pareri. I dati vengono elaborati da uno script CGI che li controlla, li riordina ed infine li spedisce via e-mail all'indirizzo configurato nei parametri del form stesso.

Modulo dati da inviare a Web-Link
Nessuno dei dati inviati sarà conservato o divulgato a terze persone,
i dati da voi introdotti saranno distrutti automaticamente subito dopo averli letti.
 
Inserisci
qui di lato
il tuo commento
Come sei arrivato su Web-Link:
Se altro specificare:

Se vuoi.....
puoi dirmi
come giudichi
questa guida:







Sempre se vuoi....
puoi dirmi
la tua Età?







  


Torna su

Questo il codice HTML per ottenerlo:

<form name="parere" action="mailto:vostronome@serverdiposta.it" method="post" enctype="text/plain">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Nome:</td><td><input type="text" name="nome" size="35" maxlength="40" value=""></td>
</tr><tr>
<td>E-mail:</td><td><input type="text" name="email" size="35" maxlength="40" value=""></td>
</tr><tr>
<td valign="middle">Inserisci<br>qui di lato <br>il tuo commento</td>
<td><textarea name="commento" rows="4" cols="30"></textarea></td></tr>
<tr><td>Come sei arrivato qui:<br>Se altro specificare:</td><td>
<select name="come sei arrivato">
<option selected>motore di ricerca</option>
<option>banner</option>
<option>link su altro sito</option>
<option>guestbook</option>
<option>news group</option>
<option>casualmente</option>
<option>(altro)</option>
</select>
<br>
<input type=text name="come" size="35" maxlength="40" value=""></td>
</tr><tr>
<td>Se vuoi.....<br>puoi dirmi <br>come giudichi<br> questa guida:
</td><td><hr width="50%" align="left">
<input type=radio name="giudizio" value="pessimo">&nbsp;Pessima<br>
<input type=radio name="giudizio" value="mediocre">&nbsp;Mediocre<br>
<input type=radio name="giudizio" value="sufficiente">&nbsp;Sufficiente<br>
<input type=radio name="giudizio" value="buono">&nbsp;Buona<br>
<input type=radio name="giudizio" value="ottimo">&nbsp;Ottima<br>
<input type=radio name="giudizio" value="non saprei">&nbsp;Non saprei&nbsp;<hr width="50%" align="left"></td></tr>
<tr><td>Sempre se vuoi....<br>puoi dirmi<br>la tua Et&agrave;?
</td><td><hr width="50%" align="left">
<input type=radio name="eta" value="0-15">&nbsp;0-15<br>
<input type=radio name="eta" value="16-25">&nbsp;16-25<br>
<input type=radio name="eta" value="26-35">&nbsp;26-35<br>
<input type=radio name="eta" value="36-45">&nbsp;36-45<br>
<input type=radio name="eta" value="46-55">&nbsp;46-55<br>
<input type=radio name="eta" value="55+">&nbsp;55+<br><hr width="50%" align="left"></td></tr>
<tr><td></td><td><input type=submit value="Invia i Dati"><input type=reset value="Annulla"></td></tr>
</table>
</form>

Da notare nella prima riga di codice vostronome@serverdiposta.it che dovrà essere sostituito dal vostro indirizzo di posta, oppure per chi ha un Formail o Sendmail installato dovrà fare riferimento a quello ed ai suoi parametri di configurazione.

 

Consiglio Con l'uso dei CSS è possibile cambiare ai vari elementi che compongono i moduli. il colore, il tipo di font e molto altro ancora.

Con HTML5 sono stati introdotti molti nuovi type e molti nuovi attributi per gestire al meglio i moduli o forms, potete trovarli sulla Guida HTML5 di web-link



Torna su

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



Andrea Bianchi