Form HTML

I form (o moduli) HTML permettono ad un utente di interagire con la pagina che sta visitando. L’inserimento 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 l’URI 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 l’identificazione 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 all’URL 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 l’attributo 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 l’attributo 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 l’URI del file contenente l’immagine con cui decorare il pulsante. Specifica un nome che identifica univocamente il controllo. Specifica un nome che identifica il controllo, anche se l’identificazione 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 dell’elemento nell’ordine dei selettori. In altri termini indica l’ordine in cui gli elementi riceveranno il focus quando l’utente si sposta utilizzando la tastiera, tipicamente con il tasto TAB. Il valore dell’attributo è 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 all’ordine di selezione.

tabindex

un elenco completo è reperibile all’URL 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 all’evento 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 deell’elemento 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 all’interno 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. L’elemento 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>
L’elemento 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 l’identificazione non è detto che sia univoca. Disabilita il controllo. Specifica la posizione dell’elemento nell’ordine dei selettori. In altri termini indica l’ordine in cui gli elementi riceveranno il focus quando l’utente si sposta utilizzando la tastiera, tipicamente con il tasto TAB. Il valore dell’attributo è 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 all’ordine di selezione.

class

disabled

tabindex

un elenco completo è reperibile all’URL 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.

L’elemento 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 dell’elemento. Imposta l’opzione com preselezionata. Consente di specificare un’etichetta per l’opzione. Specifica un nome che identifica univocamente il controllo. Spechfica un nome che identifica il controllo, anche se l’identificazione 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:

L’elemento 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 l’etichetta da attribuire al gruppo di opzioni. Specifica un nome che identifica univocamente il controllo. Spechfica un nome che identifica il controllo, anche se l’identificazione 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 dell’area di testo. Specifica il numero di colonne (caratteri) dell’area di testo. Specifica un nome che identifica univocamente il controllo. Spechfica un nome che identifica il controllo, anche se l’identificazione non è detto che sia univoca. Rende il controllo non editabile. Disabilita il controllo. Specifica la posizione dell’elemento nell’ordine dei selettori. In altri termini indica l’ordine in cui gli elementi riceveranno il focus quando l’utente si sposta utilizzando la tastiera, tipicamente con il tasto TAB. Il valore dell’attributo è 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 all’ordine di selezione. un elenco completo è reperibile all’URL 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 l’attributo 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 l’attributo value.

<label> etichetta </label>
Alcuni attributi del tag LABEL sono riassunti nella tabella seguente.

attributo
for

significato
Associa l’etichetta con un controlo diverso da quello che si sta definendo. Il suo valore deve coincidere con l’id di un controllo presente nello stesso documento. Specifica un nome che identifica univocamente il controllo. Spechfica un nome che identifica il controllo, anche se l’identificazione 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
L’elemento FIELDSET consente di raggruppare controlli ed etichette mentre l’elemento LEGEND assegna una didascalia a un gruppo di controlli realizzato con FIELDSET. Entrambi gli attributi sono consigliati per migliorare l’accessibilità 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

Sign up to vote on this title
UsefulNot useful