Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico

Comunicazione integrata in rete Prof. Luca A. Ludovico Introduzione I moduli (form) si utilizzano tipicamente per raccogliere informazioni dall’utente finale. –L’interfaccia utente è molto rudimentale, ma può essere migliorata con interventi grafici e fogli di stile Un form può contenere campi di testo, caselle di scelta, radio button, check box ecc. L’implementazione di un form contempla 3 passi: progettare l’interfaccia utente, implementare il processing lato server e configurare tali due oggetti per comunicare tra loro. In questa lezione si vedrà come impostare i form in HTML, ma non come i dati provenienti dai form possano essere processati da parte del server.

Comunicazione integrata in rete Prof. Luca A. Ludovico Form

Comunicazione integrata in rete Prof. Luca A. Ludovico Sintassi di base è uno dei tag HTML Sintassi:... elementi del form... Oltre a vari elementi (campi di testo, caselle di scelta, ecc.), di solito il modulo contiene un pulsante Submit che invia le informazioni al server I parametri servono a specificare come inviare i dati al server –come illustrato nel seguito, esistono due modalità di invio

Comunicazione integrata in rete Prof. Luca A. Ludovico Il primo form Ogni form inizia con un elemento form al cui interno si posizionano i controlli. La maggior parte dei controlli sono elementi input, che di default implementano un campo testo su riga singola. Per etichettare un controllo si usa l’elemento label, al cui interno si posiziona tanto l’etichetta testuale quanto il controllo stesso. Tipicamente ogni singolo controllo viene posizionato in un paragrafo a sè stante (elemento p), ma ovviamente non è obbligatorio.

Comunicazione integrata in rete Prof. Luca A. Ludovico Ordinazione della pizza (1 – campo testo) Nome del cliente:

Comunicazione integrata in rete Prof. Luca A. Ludovico Input: campi testo (text field) Nell’esempio precedente, abbiamo usato input senza specificare il tipo. Equivalente a scrivere: I campi testo (text field) consentono di inserire testo in un riquadro su un’unica riga. La dimensione di default è 20 caratteri. Il contenuto può essere preimpostato usando l’attributo value E’ possibile variarne alcuni aspetti utilizzando gli attributi (tutti opzionali) dell’elemento input.

Comunicazione integrata in rete Prof. Luca A. Ludovico Alcuni attributi di contenuto ricorrenti autocomplete: istruzioni di autocompletamento (on/off) list: un elenco di suggerimenti, puntando a un datalist maxlength, minlength: dimensione massima e minima per il campo in numero di caratteri pattern: permette di specificare il formato della stringa tramite espressioni regolari Ad es. pattern="[0-9][A-Z]{3}" implica una cifra seguita da 3 maiuscole) placeholder: segnaposto di suggerimento disabled, readonly: sola lettura. Differenza: nel caso di readonly, si può selezionare il controllo. required: compilazione obbligatoria size: dimensione grafica del controllo espressa in numero di caratteri …

Comunicazione integrata in rete Prof. Luca A. Ludovico Ordinazione della pizza (2 – attributi del campo di testo) Nome del cliente:

Comunicazione integrata in rete Prof. Luca A. Ludovico Varianti dei campi testo E’ possibile specificare il tipo di input come search anziché text. La differenza è puramente stilistica, su quei sistemi che li differenziano graficamente E’ possibile occultare la compilazione dei caratteri di un campo di testo specificando che si tratta di un campo password

Comunicazione integrata in rete Prof. Luca A. Ludovico Utilizzo di fieldset e legend Fieldset serve per raggruppare da un punto di vista logico e grafico un insieme di controlli. Spesso i browser evidenziano un fieldset disegnando una cornice attorno ai controlli inclusi. Legend permette di specificare un nome comune per il fieldset. I fieldset possono essere annidati a piacimento.

Comunicazione integrata in rete Prof. Luca A. Ludovico Pulsanti di scelta (radio button) I pulsanti di scelta (radio button) mostrano opzioni in mutua esclusione. Sceglierne una disabilita automaticamente le altre. Sintassi: Il raggruppamento tra opzioni in mutua esclusione si basa sull’attributo name, il cui valore deve essere uguale I pulsanti vengono creati senza selezione iniziale. Per impostarne una, si usa checked="checked"

Comunicazione integrata in rete Prof. Luca A. Ludovico Ordinazione della pizza (3 – radio button) Nome del cliente: Dimensioni della pizza Small Medium Large

Comunicazione integrata in rete Prof. Luca A. Ludovico Ordinazione della pizza (4 – radio button) Dimensioni della pizza Small Medium Large Bordo ripieno Bordo sottile

Comunicazione integrata in rete Prof. Luca A. Ludovico Caselle di controllo (checkbox) Le caselle di controllo (checkbox) mostrano opzioni con due stati: selezionato e non selezionato. La selezione ha l’apparenza di un segno di spunta all’interno di un quadrato. Sintassi: Le caselle vengono create senza selezione iniziale. Per impostarla, si usa checked="checked"

Comunicazione integrata in rete Prof. Luca A. Ludovico Ordinazione della pizza (5 – checkbox) … Extra label> Pancetta label> Super-mozzarella label> Cipolle label> Funghi …

Comunicazione integrata in rete Prof. Luca A. Ludovico Aree di testo (textarea) Le aree di testo (textarea) consentono di scrivere testi su più righe. Sintassi: … –Attenzione: non si tratta di un elemento input con type="textarea" Come per le caselle di testo, è possibile impostare una serie di parametri per modificare l’aspetto dell’area di testo. A differenza di queste, l’eventuale valore predefinito non va inserito nell’attributo value, bensì come contenuto dell’elemento Testo preimpostato

Comunicazione integrata in rete Prof. Luca A. Ludovico Ordinazione della pizza (6 – textarea) … Commenti Inserisci qui i tuoi commenti... …

Comunicazione integrata in rete Prof. Luca A. Ludovico Elenco (drop-down list) Gli elenchi menù (drop-down list) consentono di scegliere un’opzione da un menù a tendina. Sintassi: English Major Math Major … E’ possibile preimpostare un valore attraverso l’attributo selected di option.

Comunicazione integrata in rete Prof. Luca A. Ludovico Ordinazione della pizza (7 – dropdown) … Quartiere Bovisa Centro Gallaratese Lorenteggio …

Comunicazione integrata in rete Prof. Luca A. Ludovico Pulsanti (button) I pulsanti sono concepiti per effettuare operazioni alla loro pressione. Esistono principalmente tre tipologie di pulsanti: 1.Pulsante submit 2.Pulsante reset 3.Pulsante gen. Le prime due categorie corrispondono ad azioni standard sul modulo (invio dei dati al server e ripristino della compilazione di default). La terza categoria deve essere legata a un’azione Javascript per avere un significato operativo.

Comunicazione integrata in rete Prof. Luca A. Ludovico Ordinazione della pizza (8 – aggiunta dei pulsanti e action) …

Comunicazione integrata in rete Prof. Luca A. Ludovico Altri tipi di input (input type=…) Hidden (type=hidden) Telephone (type=tel), URL (type=url), (type= ) Date and Time state (type=datetime), Date state (type=date), Month state (type=month), Week state (type=week) Time state (type=time), Local Date and Time state (type=datetime- local) Number (type=number) Range (type=range) Color (type=color) File Upload (type=file) Esempio dell’ordinazione: Telefono: Orario di consegna:

Comunicazione con il server

Comunicazione integrata in rete Prof. Luca A. Ludovico Passaggio di valori al server Ogni form può (deve?) passare valori a una pagina sul server che li raccoglie per salvarli/usarli/elaborarli Il tag form presenta due attributi fondamentali: a chi inviare i dati e come inviarli –action="nome_pagina" –method="nome_metodo" (get o post)

Comunicazione integrata in rete Prof. Luca A. Ludovico GET e POST Attraverso l’attributo method="nome_metodo", il form stabilisce come inviare i dati alla pagina destinatario. Nome_metodo può valere get o post. Il metodo GET consiste nell’accodare i dati all’indirizzo della pagina richiesta, facendo seguire il nome della pagina da un punto interrogativo e dalle coppie nome/valore separate da &. Se il metodo è POST, i dati vengono invece inviati in maniera da non essere direttamente visibili per l’utente, attraverso la richiesta HTTP che il browser invia al server.

Comunicazione integrata in rete Prof. Luca A. Ludovico Nome dei controlli Ogni controllo può essere associato a un nome (attributo name). Quando avviene il passaggio di valori al server, tipicamente alla pressione del pulsante Submit, vengono passate tante coppie nome=valore quanti sono gli input presenti nel form. Per quanto riguarda il valore, si veda la slide seguente. Se method="get", il browser mostra tali coppie nella barra degli indirizzi, dopo il carattere ? e separate tra loro dal carattere &.

Comunicazione integrata in rete Prof. Luca A. Ludovico Valore dei controlli In generale, il valore assunto dal controllo è la compilazione effettuata dall’utente. –Ad esempio per le aree di testo e le caselle di testo Alcuni controlli presentano solo valore vero/falso, come le caselle di controllo. Alcuni controlli consentono la scelta tra valori. In questo caso, ad ogni opzione va associato esplicitamente un valore diverso tramite value="valore". –Ad esempio per i pulsanti di scelta e i menu a discesa