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

transcript

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.

Sintassi di base

• <form> è uno dei tag HTML

• Sintassi:<form parametri> ... elementi del form ... </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

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.

Ordinazione della pizza (1 – campo testo)

<form> <p> <label>Nome del cliente:<input></label> </p></form>

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.

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 regolariAd 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• …

Ordinazione della pizza (2 – attributi del campo di testo)

<form> <p> <label>Nome del cliente: <input type="text" size="40" maxlenght="20"> </label> </p></form>

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

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.

Pulsanti di scelta (radio button)

• I pulsanti di scelta (radio button) mostrano opzioni in mutua esclusione. Sceglierne una disabilita automaticamente le altre.

• Sintassi: <input type="radio" name="nome_scelto">

• 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"

Ordinazione della pizza (3 – radio button)

<!doctype html><html><form> <p><label>Nome del cliente: <input></label></p> <fieldset> <legend> Dimensioni della pizza </legend> <p><label><input type="radio" name="size"> Small </label></p> <p><label><input type="radio" name="size" checked="checked">

Medium </label></p> <p><label><input type="radio" name="size"> Large </label></p> </fieldset></form></html>

Ordinazione della pizza (4 – radio button)

<fieldset> <legend> Dimensioni della pizza </legend> <p><label><input type="radio" name="size"> Small </label></p> <p><label><input type="radio" name="size"> Medium </label></p> <p><label><input type="radio" name="size"> Large </label></p> <p> </p> <p> <label><input type="radio" name="border"> Bordo ripieno </label> </p> <p> <label><input type="radio" name="border"> Bordo sottile </label> </p></fieldset>

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: <input type="checkbox">

• Le caselle vengono create senza selezione iniziale. Per impostarla, si usa checked="checked"

Ordinazione della pizza (5 – checkbox)

<legend> Extra </legend>

<p>label><input type="checkbox"> Pancetta </label></p>

<p>label><input type="checkbox"> Super-mozzarella

</label></p>

<p>label><input type="checkbox"> Cipolle </label></p>

<p>label><input type="checkbox"> Funghi </label></p>

</fieldset>

Aree di testo (textarea)

• Le aree di testo (textarea) consentono di scrivere testi su più righe.

• Sintassi: <textarea>…</textarea>– 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

<textarea>Testo preimpostato</textarea>

Ordinazione della pizza (6 – textarea)

… <p> <label>Commenti<br /> <textarea rows="5" cols="50"> Inserisci qui i tuoi commenti... </textarea> </label></p>…

Elenco (drop-down list)

• Gli elenchi menù (drop-down list) consentono di scegliere un’opzione da un menù a tendina.

• Sintassi: <select> <option>English Major</option> <option>Math Major</option>…</select>

• E’ possibile preimpostare un valore attraverso l’attributo selected di option.

Ordinazione della pizza (7 – dropdown)

… <p> <label>Quartiere <select> <option>Bovisa</option> <option>Centro</option> <option selected="selected">Gallaratese</option> <option>Lorenteggio</option> </select> </label></p>…

Pulsanti (button)

• I pulsanti sono concepiti per effettuare operazioni alla loro pressione. Esistono principalmente tre tipologie di pulsanti:1. Pulsante submit <input type="submit" value="Invia">2. Pulsante reset <input type="reset" value="Cancella">3. Pulsante gen. <input type="button" value="Cliccami">

• 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.

Ordinazione della pizza (8 – aggiunta dei pulsanti e action)

Altri tipi di input (input type=…)

• Hidden (type=hidden)• Telephone (type=tel), URL (type=url), E-mail (type=email)• 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: <p><label>Telefono: <input type=tel></label></p><p><label>E-mail: <input type=email></label></p><p><label>Orario di consegna: <input type=time min="11:00" max="21:00" step="900"></label></p>

Comunicazione con il server

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)

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.

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=valorequanti 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 &.

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

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

Documents