Homepage -> Guida HTML

Non c’è form che si rispetti senza bottone di invio o un campo di inserimento di dati. La sintassi tradizionale per creare tale campo (detto appunto di INPUT perchè è destinato a contenere dati inseriti dall'utente) è:

Il Tag INPUT non necessita quindi di chiusura. L'attributo TYPE serve per specificare il tipo di campo o bottone, mentre l'attributo NAME il suo nome, mentre il VALUE la scritta che compare sul Submit Button o un valore di default del campo stesso. Fate presente che il valore di default dell'attributo VALUE verrà spedito tramite metodo html e quindi incluso nell'array POST, qualora il campo non fosse compilato dall'utente. E' quindi evidente che, affinchè i dati vengano inviati tramite metodo POST o GET (vedi qui per maggiori dettagli su tali metodi), i bottoni e gli altri campi di inserimento dati debbano essere contenuti in un Tag FORM:

Vediamo un esempio di modulo di compilazione di dati contenente semplicemente un input di inserimento dati ed un bottone di invio, e supponiamo di dare un valore di default al campo:

Nel caso in cui non si inserisse alcun valore e si cliccasse sul bottone, l'array POST che arriva al file controlla_form.php sarà: Array(nome = inserisci il tuo nome, bottone = ok) .

Vediamo ora i principali campi di un modulo di compilazione dati.

Submit Button

L'uso dell'attributo DISABLED nel Tag INPUT disabilita il bottone:

Radio Button

Anche in questo caso è possibile assegnare un valore di default ( CHECKED ) o disabilitare un pulsante usando l'attributo DISABLED nell'INPUT Tag ; così lo è entrambi:

Check Box

Con i check box possiamo consentire all’utente di operare delle scelte multiple. Ad esempio:

Notare la differenza il Radio Button ( oltre alla forma )!!! Anche qui si possono usare gli attributi CHECKED e DISABLED.
Per la Check Box e per i Radio conviene sempre inserire un valore nell'attributo VALUE, poichè sarà proprio tale valore ad essere inviato con il form.

Menù a Tendina

Quest'altro menù, invece consente di selezionare ed inviare più di una informazione:

Notare come la larghezza del menù si fissi automaticamente in base alla larghezza del valore più grande in esso contenuto ( per il primo è: - inserisci la città - ). Se si usasse l'attributo SIZE = " n " nel Tag SELECT, potrei stabilirne in ogni caso la dimensione:

Usando l'attributo SELECTED per un dato valore, si fissa un valore predefinito:

Siccome i menu di scelta tendono a diventare particolarmente lunghi, nell’HTML 4 è stato introdotto il tag OPTGROUP che consente di suddividere le varie possibilità di scelta in gruppi tramite l’utilizzo di apposite etichette. Ecco l’esempio:

Text Box

L'attributo MAXLENGTH stabilisce il numero massimo di caratteri da inserire nel riquadro; altri attributi sono il NAME, per dare un nome ( non visualizzabile ) alla casella di testo ed il VALUE, per fissare un valore iniziale ( es.: qui il mio testo ):

I campi di testo possono essere anche di sola lettura, usando l'attributo READONLY. Ad esempio:

O disabilitati:

Password Box

Servono per far inserire una password in maniera non visibile letteralmente, ma con i famosi * :

Text Area

Servono per far inserire un testo molto lungo, in genere che supera i 150 caratteri:

ROWS indica il numero di righe della textarea, COLS il numero di caratteri (cioè di colonne) che ogni riga può contenere. Come si può vedere, se si vuol indicare del testo predefinito, in questo caso bisogna inserirlo fra l’apertura e la chiusura del tag.
Un altro attributo è il WRAP = " valore " : i suoi valori sono OFF, se si vogliono ignorare gli a capo, VIRTUAL, se voglio mostrarli ma non inviarli, PHYSICAL se voglio inserirli ed inviarli solo quando sono necessari.

Reset Button

Serve per far resettare all'utente i valori da lui appena inseriti nel modulo di compilazione dati:

Hidden Field

Tale campo non è visibile all'utente, ma solo al webmaster; come attributi ha il NAME ed il VALUE.

Image Button

Il campo "image" ci consente di utilizzare come bottoni del form delle vere e proprie immagini e assegnare loro un valore grazie a JavaScript; in questo caso non si tratta propriamente di un bottone ma la funzionalità è la medesima. Ecco il codice:

come si può vedere, se non si specifica nulla, l’immagine ha valore di submit. Gli attributi del campo immagine sono molto simili a quelli del tag < IMG >.

Il Campo FILE

Questo modulo serve per inviare dei file via POST; il classico esempio è il campo per uplodare o selezionare dei files presenti sul computer dell'utente:

Ordinare i moduli

Per la loro natura di "raccoglitori di informazioni", i moduli tendono a ingigantirsi e diventare lunghissimi. Per questo, con l’HTML 4 sono stati introdotti dei tag per fare un po’ d’ordine all’interno dei form.
Grazie al tag FIELDSET possiamo creare delle macro-aree all’interno dei form, e grazie al tag LEGEND, possiamo indicare il nome di ciascuna macro-area. Poniamo ad esempio di dover raccogliere i dati di un utente, raccogliendo dati anagrafici, residenza, domicilio e reperibilità sul lavoro. Possiamo farlo con la seguente sintassi:

Un esempio di uso in un modulo potrebbe essere il seguente:

che si ottiene inserendo tale riga nel FIELDSET sotto il Tag LEGEND:

L'attributo TABINDEX

Utilizzando il tasto "tab" della tastiera l’utente può passare da un campo del form all’altro. Per varie ragioni di impaginazione l’ordine così ottenuto potrebbe però non essere quello desiderato. Grazie all’attributo "tabindex" che si applica ai campi dei moduli è possibili specificare in quale ordine deve avvenire il passaggio da un campo all’altro. Il valore di questo attributo può variare tra 0 e 32767. Vediamo un esempio:

Vedi il codice. Come si può vedere, digitando il tasto tab, l’ordine di passaggio da un campo all’altro è quello indicato nel valore di TABINDEX. Vedendo il codice, si può notare come la funzione degli spazi sia quella di aumentare la dimensione del riquadro esterno.