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 name Attribuisce un nome all'eleme nto, 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 idper identificare degli elementi. method Specifica il metodo HTTP da utilizzare per passare i dati presenti nel form al server. I valori possibili sono due: GETe POST. action Specifica l’URI del programma che elaborerà i dati sul server. id Specifica un nome che identifica univocamente il form. class Specifica un nome che identifica un form, anche se l’identificazione non è detto che sia univoca. target 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 speci ficare come valore del l'attr ibuto "_b lan k". Per def ault, la pag ina di risposta sostituisce quella con il form. Un elenco completo è reperibile all’URL http://www.diodati.org/w3c/html401/interact/forms.html Altri attributi consentono di definire handler di eventiutilizzando JavaScript: onsubmit, onreset, onc lic k, ondblcli ck, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. Bocchi Cinzia Ultimo aggiornamento: 29/01/2012 1
I form (o moduli) HTML permettono ad un utente di interagire con la pagina che stavisitando. 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. Gliattributi che hanno colore rosso sono specifici del tag FORM; gli altri sono applicabilianche ad altri elementi HTML.
attributo significato
name Attribuisce un nome all'elemento, in modo che vi si possa far riferimento dafogli di stile o da script. L’ attributo è stato incluso per ragioni di compatibilitàall'indietro. Le applicazioni dovrebbero infatti usare l'attributo id per identificaredegli elementi.
methodSpecifica il metodo HTTP da utilizzare per passare i dati presenti nel form alserver. I valori possibili sono due: GET e POST.
action Specifica l’URI del programma che elaborerà i dati sul server.
id Specifica un nome che identifica univocamente il form.
classSpecifica un nome che identifica un form, anche se l’identificazione non èdetto che sia univoca.
target
Specifica il nome del frame in cui sarà visualizzata la risposta inviata dalserver. Se si vuole visualizzare la risposta in una nuova pagina, è sufficientespecificare come valore dell'attributo "_blank". Per default, la pagina dirisposta sostituisce quella con il form.
Un elenco completo è reperibile all’URLhttp://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.
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 significato
name Attribuisce un nome al controllo.
valueSpecifica il valore iniziale del controllo ed è facoltativo, eccetto quandol’attributo type ha valore radio o checkbox.
typeSpecifica il tipo di controllo da creare. I valori possibili sono: text, password,checkbox, radio, submit. reset, file, hidden, image, button.
size
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.
maxlengthUtilizzato solo per controlli di tipo text o password. Specifica il numeromassimo di caratteri che un utente può immettere e che sono visibili senzascorrimento.
checkedUtilizzato solo per i controlli di tipo radio o checkbox. Rende il pulsante èselezionato (con all’ interno un pallino o un segno di spunta).
srcUtilizzato quando il controllo è di tipo img. Specifica l’URI del file contenentel’immagine con cui decorare il pulsante.
id Specifica un nome che identifica univocamente il controllo.
classSpecifica un nome che identifica il controllo, anche se l’identificazione non è
Specifica la posizione dell’elemento nell’ordine dei selettori. In altri terminiindica l’ordine in cui gli elementi riceveranno il focus quando l’utente sisposta utilizzando la tastiera, tipicamente con il tasto TAB. Il valoredell’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.
un elenco completo è reperibile all’URLhttp://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"/>
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 è similead 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 allostato originario.I pulsanti generici non hanno associata un'azione particolare, ma possono essere utilizzatiper gestire eventi con un linguaggio di programmazione client side (come JavaScript).
I pulsanti immagine sono analoghi ai pulsanti di invio, ma permettono di utilizzare comepulsante 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"/>
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 traquelle 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 possonoessere selezionate di default mediante l'attributo checked e disabilitate con l'attributodisabled.
I pulsanti di opzione permettono all'utente di effettuare la selezione di una sola voce traquelle 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 opzioneall'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) mediantel'attributo checked e disabilitati con l'attributo disabled. E’ possibile creare più gruppi dipulsanti di opzione con nomi diversi all’interno della stessa pagina HTML.
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>....................................
L’elemento OPTGROUP è facoltativo, mentre deve essere presente almeno un elementoOPTION.
Alcuni attributi del tag SELECT sono riassunti nella tabella seguente.
attributo significato
name Attribuisce un nome al controllo.
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 adestra, appaiono tutte le opzioni. Impostando l'attributo size a un valore n,sono visualizzate sempre n opzioni. Se il valore di size è minore del numerocomplessivo di opzioni, nella casella di riepilogo compare automaticamenteuna barra di scorrimento verticale.
multipleSe specificato, permette all'utente di effettuare selezioni multiple, usando i tasti
id Specifica un nome che identifica univocamente il controllo.
classSpechfica un nome che identifica il controllo, anche se l’identificazione non èdetto che sia univoca.
disabled Disabilita il controllo.
tabindex
Specifica la posizione dell’elemento nell’ordine dei selettori. In altri terminiindica l’ordine in cui gli elementi riceveranno il focus quando l’utente si spostautilizzando la tastiera, tipicamente con il tasto TAB. Il valore dell’attributo è unnumero 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.
un elenco completo è reperibile all’URLhttp://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,
Le opzioni di un elemento SELECT sono racchiuse tra una copppia di tag OPTION. Nellatabella seguente sono riassuni alcuni attributi di OPTION. Il marcatore finale è facoltativo.
attributo significato
value Attribuisce un valore al controllo. Se non impostato, esso è uguale alcontenuto dell’elemento.
selected Imposta l’opzione com preselezionata.
label Consente di specificare un’etichetta per l’opzione.
id Specifica un nome che identifica univocamente il controllo.
class Spechfica un nome che identifica il controllo, anche se l’identificazione non èdetto che sia univoca.
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.
Alcuni attributi del tag TEXTAREA sono riassunti nella tabella seguente.
attributo significato
name Attribuisce un nome al controllo.
rows Specifica il numero di righe dell’area di testo.
cols Specifica il numero di colonne (caratteri) dell’area di testo.
id Specifica un nome che identifica univocamente il controllo.
classSpechfica un nome che identifica il controllo, anche se l’identificazione non è
detto che sia univoca.
readonly Rende il controllo non editabile.
disabled Disabilita il controllo.
tabindexSpecifica la posizione dell’elemento nell’ordine dei selettori. In altri terminiindica 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 è unnumero intero compreso tra 0 e 32767.
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 significato
for Associa l’etichetta con un controlo diverso da quello che si sta definendo. Ilsuo valore deve coincidere con l’id di un controllo presente nello stessodocumento.
id Specifica un nome che identifica univocamente il controllo.
classSpechfica un nome che identifica il controllo, anche se l’identificazione non èdetto che sia univoca.
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"/>
L’elemento FIELDSET consente di raggruppare controlli ed etichette mentre l’elementoLEGEND 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 lanavigazione.
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 spedisciuna lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
