Form HTML

I form (o moduli) HTML permettono ad un utente di interagire con la pagina che sta visitando. Linserimento di un form in una pagina web avviene mediante il tag FORM.

<form> campi del modulo </form> Attributi del form

Alcuni attributi che possono essere specificati sono riassunti nella tabella seguente. Gli attributi che hanno colore rosso sono specifici del tag FORM; gli altri sono applicabili anche ad altri elementi HTML.

attributo

significato
Attribuisce un nome all'elemento, in modo che vi si possa far riferimento da fogli di stile o da script. L attributo stato incluso per ragioni di compatibilit all'indietro. Le applicazioni dovrebbero infatti usare l'attributo id per identificare degli elementi. Specifica il metodo HTTP da utilizzare per passare i dati presenti nel form al server. I valori possibili sono due: GET e POST. Specifica lURI del programma che elaborer i dati sul server. Specifica un nome che identifica univocamente il form. Specifica un nome che identifica un form, anche se lidentificazione non detto che sia univoca. Specifica il nome del frame in cui sar visualizzata la risposta inviata dal server. Se si vuole visualizzare la risposta in una nuova pagina, sufficiente specificare come valore dell'attributo "_blank". Per default, la pagina di risposta sostituisce quella con il form.

name

method

action id

class

target

Un elenco completo reperibile allURL http://www.diodati.org/w3c/html401/interact/forms.html Altri attributi consentono di definire handler di eventi utilizzando JavaScript: onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

1
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

Campi del Form: INPUT

L'inserimento di campi (o controlli) nel form pu avvenire mediante il tag singolo INPUT.

<form> campo 1: <input/> campo 2: <input/> ............... </form>

Alcuni attributi del tag input sono riassunti nella tabella seguente.

attributo
name Attribuisce un nome al controllo.

significato

value

Specifica il valore iniziale del controllo ed facoltativo, eccetto quando lattributo type ha valore radio o checkbox. Specifica il tipo di controllo da creare. I valori possibili sono: text, password, checkbox, radio, submit. reset, file, hidden, image, button. Specifica la larghezza del controllo in pixel, eccetto quando lattributo type ha valore text o password. In tal caso il suo valore si riferisce al numero (intero) di caratteri.

type

size

Utilizzato solo per controlli di tipo text o password. Specifica il numero maxlength massimo di caratteri che un utente pu immettere e che sono visibili senza scorrimento. Utilizzato solo per i controlli di tipo radio o checkbox. Rende il pulsante selezionato (con all interno un pallino o un segno di spunta). Utilizzato quando il controllo di tipo img. Specifica lURI del file contenente limmagine con cui decorare il pulsante. Specifica un nome che identifica univocamente il controllo. Specifica un nome che identifica il controllo, anche se lidentificazione non detto che sia univoca. 2
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

checked

src

id

class

readonly disabled

Rende il controllo non editabile. Disabilita il controllo. Specifica la posizione dellelemento nellordine dei selettori. In altri termini indica lordine in cui gli elementi riceveranno il focus quando lutente si sposta utilizzando la tastiera, tipicamente con il tasto TAB. Il valore dellattributo un numero intero compreso tra 0 e 32767. Gli elementi che hanno valore di tabindex maggiore sono navigati per primi. Gli elementi disabilitati non appartengono allordine di selezione.

tabindex

un elenco completo reperibile allURL http://www.diodati.org/w3c/html401/interact/forms.html#h-17.4 Altri attributi consentono di definire handler di eventi utilizzando JavaScript: onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

Tipi di controlli creati con INPUT

Caselle di immissione testo Le caselle di immissione testo si distinguono in: caselle di testo - il valore di type "text"; caselle di password - il valore di type "password"; caselle nascoste - il valore di type "hidden". Le caselle nascoste sono utilizzate dal programmatore per inviare dati aggiuntivi al server. Esempio: un form con caselle di immissione testo
<html> <head> <title> Form con caselle di immissione testo </title> </head> <body> <form> casella di testo: <input type="text" name="uid" value="inserire il nome"/> <br/> casella di password: <input type="password" name="pwd" size="10" maxlenght="10"/> <br/> casella nascosta: <input type="hidden" name="nascosta"/> </form> </body> </html>

3
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

Il codice dell'esempio crea le seguenti caselle:

Le caselle di testo possono anche essere di sola lettura o disabilitate. In una casella di sola lettura non possibile scrivere testo. Una casella disabilitata simile ad una casella di sola lettura, ma il suo contenuto appare in grigetto. Pulsanti I pulsanti si distinguono in: pulsanti generici - il valore di type "button"; pulsanti di invio - il valore di type "submit"; pulsanti di annullamento - il valore di type "reset"; pulsanti immagine - il valore di type "image". I pulsanti di invio permettono di inviare i dati del form al server. I pulsanti di annullamento, se premuti, cancellano tutti i dati del form, riportandolo allo stato originario. I pulsanti generici non hanno associata un'azione particolare, ma possono essere utilizzati per gestire eventi con un linguaggio di programmazione client side (come JavaScript). I pulsanti immagine sono analoghi ai pulsanti di invio, ma permettono di utilizzare come pulsante una immagine. I pulsanti possono essere disabilitati; in tal caso non rispondono allevento clic su di essi. Esempio: un form con pulsanti
<html> <head> <title> Form con pulsanti </title> </head> <body> <form> pulsante di invio: <input type="submit" value="Invia"/> <br/> pulsante di annullamento: <input type="reset" value="Cancella"/> <br/> pulsante generico: <input type="button" value="Ok"/> </form> </body> </html>

4
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

Il codice dell'esempio crea i pulsanti seguenti:

Esempio: un form con pulsante immagine

<html> <head> <title> Form con pulsante immagine </title> </head> <body> <form> <input type="image" src="icon_back.gif" width="40" height="40" alt="indietro"/> </form> </body> </html>

Il codice dell'esempio crea il seguente pulsante:

Nota: gli attributi di input sono simili a quelli deellelemento HTML <img>. Caselle di controllo (Checkbox) Le caselle di controllo permettono all'utente di effettuare la selezione di una o pi voci tra quelle presenti in un gruppo. Le caselle di controllo sono create mediante il tag input, specificando come valore dell'attributo type, "checkbox". Le caselle di controllo possono essere selezionate di default mediante l'attributo checked e disabilitate con l'attributo disabled. Esempio: form con caselle di controllo
<html> <head> <title> Form con caselle di controllo </title> </head> <body> <form> Ti piace il genere: <br/> <input type="checkbox" name="opzione1" value="comico" checked/> comico <br/>

5
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

<input type="checkbox" name="opzione2" value="horror"/> horror <br/> <input type="checkbox" name="opzione3" value="drammatico"/> drammatico <br/> <input type="submit" value="Invia Preferenze" /> </form> </body> </html>

Il codice dell'esempio crea il seguente form:

Pulsanti di opzione (Radio Button) I pulsanti di opzione permettono all'utente di effettuare la selezione di una sola voce tra quelle presenti in un gruppo. I pulsanti di opzione sono creati mediante il tag input, specificando come valore dell'attributo type, "radio". Per mantenere pi pulsanti di opzione all'interno dello stesso gruppo, necessario indicare lo stesso valore dell'attributo name per ciascun pulsante. I pulsanti di opzione possono essere selezionati di default (solo uno nel gruppo) mediante l'attributo checked e disabilitati con l'attributo disabled. E possibile creare pi gruppi di pulsanti di opzione con nomi diversi allinterno della stessa pagina HTML. Esempi: form con gruppo di pulsanti di opzione
<html> <head> <title> Form con gruppo di pulsanti di opzione </title> </head> <body> <form> Ti piace studiare? <br/> <input type="radio" name="domanda1" value="si" checked/> SI <br/> <input type="radio" name="domanda1" value="no"/> NO <br/> <input type="radio" name="domanda1" value="non so"/> NON SO <br/> <input type="submit" value="Invia Preferenza" /> </form> </body> </html>

6
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

Il codice dell'esempio produce il seguente form:

Campi del Form: SELECT

L'inserimento di campi (o controlli) nel form pu avvenire anche mediante il tag SELECT. Lelemento SELECT crea menu con un elenco di opzioni tra le quali l'utente pu scegliere.

<select> <optgroup> <option> prima opzione </option> <option> seconda opzione </option> .................................... </optgroup> <optgroup> ....................................... </optgroup> </select>
Lelemento OPTGROUP facoltativo, mentre deve essere presente almeno un elemento OPTION. Alcuni attributi del tag SELECT sono riassunti nella tabella seguente.

attributo
name Attribuisce un nome al controllo.

significato

size

Specifica il numero di opzioni che devono essere visibili nell'elenco. Per default, l'elenco visualizza una sola opzione: facendo clic sulla freccia posta a destra, appaiono tutte le opzioni. Impostando l'attributo size a un valore n, sono visualizzate sempre n opzioni. Se il valore di size minore del numero complessivo di opzioni, nella casella di riepilogo compare automaticamente una barra di scorrimento verticale. Se specificato, permette all'utente di effettuare selezioni multiple, usando i tasti 7

multiple

Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

CTRL o SHIFT. id Specifica un nome che identifica univocamente il controllo. Spechfica un nome che identifica il controllo, anche se lidentificazione non detto che sia univoca. Disabilita il controllo. Specifica la posizione dellelemento nellordine dei selettori. In altri termini indica lordine in cui gli elementi riceveranno il focus quando lutente si sposta utilizzando la tastiera, tipicamente con il tasto TAB. Il valore dellattributo un numero intero compreso tra 0 e 32767. Gli elementi che hanno valore di tabindex maggiore sono navigati per primi. Gli elementi disabilitati non appartengono allordine di selezione.

class

disabled

tabindex

un elenco completo reperibile allURL http://www.diodati.org/w3c/html401/interact/forms.html#h-17.6 Altri attributi consentono di definire handler di eventi utilizzando JavaScript: onfocus, onblur, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

Lelemento OPTION
Le opzioni di un elemento SELECT sono racchiuse tra una copppia di tag OPTION. Nella tabella seguente sono riassuni alcuni attributi di OPTION. Il marcatore finale facoltativo.

attributo
value

significato
Attribuisce un valore al controllo. Se non impostato, esso uguale al contenuto dellelemento. Imposta lopzione com preselezionata. Consente di specificare unetichetta per lopzione. Specifica un nome che identifica univocamente il controllo. Spechfica un nome che identifica il controllo, anche se lidentificazione non detto che sia univoca. 8

selected label id

class

Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

disabled

Disabilita il controllo.

Altri attributi consentono di definire handler di eventi utilizzando JavaScript: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. Esempio: form con elenco a scelta multipla
<html> <head> <title> Form con elenco a scelta multipla </title> </head> <body> <form> Fai la tua scelta: <br/> <select multiple> <option value="rosso"/> ROSSO </option> <option value="blu"/> BLU </option> <option value="verde"/> VERDE </option> <option value="giallo"/> GIALLO </option> <option value="bianco"/> BIANCO </option> </select> <input type="submit" value="Conferma Scelta" /> </form> </body> </html>

Il form generato il seguente:

Lelemento OPTGROUP
L'elemento OPTGROUP consente agli autori di raggruppare le scelte logicamente. Ci risulta particolarmente utile quando l'utente deve scegliere da un lungo elenco di opzioni. Gli elementi OPTGROUP non possono essere annidati. Alcuni attributi del tag select sono riassunti nella tabella seguente.

9
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

attributo
label id

significato
Definisce letichetta da attribuire al gruppo di opzioni. Specifica un nome che identifica univocamente il controllo. Spechfica un nome che identifica il controllo, anche se lidentificazione non detto che sia univoca. Disabilita il controllo.

class

disabled

Altri attributi consentono di definire handler di eventi utilizzando JavaScript: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. Esempio: form con elenco a scelta multipla e raggruppamento
<html> <head> <title> Form con elenco a scelta multipla e raggruppamento </title> </head> <body> <form> Fai la tua scelta: <br/> <select multiple> <optgroup label=stagione> <option value="estate"/> Estate </option> <option value="autunno"/> Autunno </option> <option value="primavera"/> Primavera </option> <option value="inverno"/> Inverno </option> </optgroup> <optgroup label=destinazione> <option value="mare"/> Mare </option> <option value="montagna"/> Montagna </option> <option value="campagna"/> Campagna </option> <option value="laghi"/> Laghi </option> <option value="estero"/> Estero </option> </optgroup> </select> <input type="submit" value="Conferma Scelta" /> </form> </body> </html>

Il form generato il seguente:

10
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

Campi del Form: TEXTAREA

L'inserimento di un'area di testo in un form avviene con il tag TEXTAREA.

<textarea> eventuale contenuto dell'area </textarea>

Alcuni attributi del tag TEXTAREA sono riassunti nella tabella seguente.

attributo
name rows cols id Attribuisce un nome al controllo.

significato

Specifica il numero di righe dellarea di testo. Specifica il numero di colonne (caratteri) dellarea di testo. Specifica un nome che identifica univocamente il controllo. Spechfica un nome che identifica il controllo, anche se lidentificazione non detto che sia univoca. Rende il controllo non editabile. Disabilita il controllo. Specifica la posizione dellelemento nellordine dei selettori. In altri termini indica lordine in cui gli elementi riceveranno il focus quando lutente si sposta utilizzando la tastiera, tipicamente con il tasto TAB. Il valore dellattributo un numero intero compreso tra 0 e 32767. 11

class

readonly disabled tabindex

Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

Gli elementi che hanno valore di tabindex maggiore sono navigati per primi. Gli elementi disabilitati non appartengono allordine di selezione. un elenco completo reperibile allURL http://www.diodati.org/w3c/html401/interact/forms.html#h-17.7 Altri attributi consentono di definire handler di eventi utilizzando JavaScript: onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. Esempio: form con area di testo
<html> <head> <title> Form con area di testo </title> </head> <body> <form> <textarea name="commento" rows="20" cols="50"> Inserisci un commento </textarea> <input type="submit" value="invia" /> </form> <body> </html>

Il codice dell'esempio crea la seguente textarea:

12
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

Elemento LABEL
Alcuni controlli sono associati automaticamente a delle etichette mediante lattributo value, per esempio i pulsanti, mentre altri non lo sono (caselle di testo, caselle di controllo, pulsanti radio,...). Il tag LABEL consente di specificare etichette per i controlli che non hanno lattributo value.

<label> etichetta </label>

Alcuni attributi del tag LABEL sono riassunti nella tabella seguente.

attributo
for

significato
Associa letichetta con un controlo diverso da quello che si sta definendo. Il suo valore deve coincidere con lid di un controllo presente nello stesso documento. Specifica un nome che identifica univocamente il controllo. Spechfica un nome che identifica il controllo, anche se lidentificazione non detto che sia univoca.

id

class

Altri attributi consentono di definire handler di eventi utilizzando JavaScript: onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. Esempio: utilizzo di label
<html> <head> <title> Form con area di testo </title> </head> <body> <form> <label> label posta prima del controllo <input type="text" size="10"/> </label> </br> <label> <input type="text" size="10"/> label posta dopo il controllo </label> </br> <label for="name">label associata mediante attributo for</label> <input id="name" type="text" size="10"/> </form> <body> </html>

13
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

Il codice dell'esempio crea il seguente form:

Elementi FIELDSET e LEGEND

Lelemento FIELDSET consente di raggruppare controlli ed etichette mentre lelemento LEGEND assegna una didascalia a un gruppo di controlli realizzato con FIELDSET. Entrambi gli attributi sono consigliati per migliorare laccessibilit della pagina, in particolar modo per utenti che utilizzano la tastiera e coloro che fanno uso di browser vocali per la navigazione.

<fieldset> <legend> didascalia </legend> controlli ............................. </fieldset> <fieldset> <legend> didascalia </legend> controlli ............................. </fieldset> ..

Esempio: utilizzo di fieldset e legend

<html> <head> <title> Utilizzo di fieldset e legend </title> </head> <body> <form> <fieldset> <legend>Dati anagrafici</legend> Nome: <input type="text" size="20"/> Cognome: <input type="text" size="20"/> </fieldset> </br> <fieldset> <legend>Dati professionali</legend> Professione: <input type="text" size="20"/> Datore di lavoro: <input type="text" size="20"/> </fieldset>

14
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012

</form> <body> </html>

Il form originato dal precedente codice :

Quest'opera stata rilasciata con licenza Creative Commons Attribution-ShareAlike 3.0 Unported. Per leggere una copia della licenza visita il sito web http://creativecommons.org/licenses/by-sa/3.0/ o spedisci una lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

15
Bocchi Cinzia Ultimo aggiornamento: 29/01/2012