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. Attributi del form campi del modulo 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 name 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. method Specifica il metodo HTTP da utilizzare per passare i dati presenti nel form al server. 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. 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 specificare come valore dell'attributo "_blank". Per default, la pagina 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 eventi utilizzando JavaScript: onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. 1
Campi del Form: INPUT L'inserimento di campi (o controlli) nel form può avvenire mediante il tag singolo INPUT. campo 1: <input/> campo 2: <input/>... Alcuni attributi del tag input sono riassunti nella tabella seguente. attributo significato name Attribuisce un nome al controllo. value Specifica il valore iniziale del controllo ed è facoltativo, eccetto quando l attributo type ha valore radio o checkbox. type Specifica 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. maxlength Utilizzato solo per controlli di tipo text o password. Specifica il numero massimo di caratteri che un utente può immettere e che sono visibili senza scorrimento. checked Utilizzato solo per i controlli di tipo radio o checkbox. Rende il pulsante è selezionato (con all interno un pallino o un segno di spunta). src Utilizzato quando il controllo è di tipo img. Specifica l URI del file contenente l immagine con cui decorare il pulsante. id Specifica un nome che identifica univocamente il controllo. class Specifica un nome che identifica il controllo, anche se l identificazione non è detto che sia univoca. 2
readonly Rende il controllo non editabile. disabled Disabilita il controllo. tabindex 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. 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 <title> Form con caselle di immissione testo </title> 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"/> </body> 3
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 <title> Form con pulsanti </title> 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"/> </body> 4
Il codice dell'esempio crea i pulsanti seguenti: Esempio: un form con pulsante immagine <title> Form con pulsante immagine </title> <input type="image" src="icon_back.gif" width="40" height="40" alt="indietro"/> </body> 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 <title> Form con caselle di controllo </title> Ti piace il genere: <br/> <input type="checkbox" name="opzione1" value="comico" checked/> comico <br/> 5
<input type="checkbox" name="opzione2" value="horror"/> horror <br/> <input type="checkbox" name="opzione3" value="drammatico"/> drammatico <br/> <input type="submit" value="invia Preferenze" /> </body> 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 <title> Form con gruppo di pulsanti di opzione </title> 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" /> </body> 6
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 significato name Attribuisce un nome al controllo. size multiple 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
CTRL o SHIFT. 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. disabled Disabilita il controllo. tabindex 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. 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 significato value Attribuisce un valore al controllo. Se non impostato, esso è uguale al contenuto 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. 8
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 <title> Form con elenco a scelta multipla </title> 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" /> </body> 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
attributo label significato Definisce l etichetta da attribuire al gruppo di opzioni. 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. 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 e raggruppamento <title> Form con elenco a scelta multipla e raggruppamento </title> 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" /> </body> Il form generato è il seguente: 10
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 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. class Spechfica un nome che identifica il controllo, anche se l identificazione non è detto che sia univoca. readonly Rende il controllo non editabile. disabled tabindex 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
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 <title> Form con area di testo </title> <textarea name="commento" rows="20" cols="50"> Inserisci un commento </textarea> <input type="submit" value="invia" /> Il codice dell'esempio crea la seguente textarea: 12
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. 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. 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 <title> Form con area di testo </title> <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"/> 13
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 <title> Utilizzo di fieldset e legend </title> <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
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