Progettazione di siti web a.a. 2015/16

Form Progettazione di siti web a.a. 2015/16 Web form e frame Maria Simi Marzo, 2016 [Manuale di riferimento del W3C, Learning web design] HTML mette a disposizione strumenti per la raccolta di informazioni da parte dell utente: le form web (in italiano moduli web) Una form è un elemento HTML generalmente composto da: campi necessari alla raccolta delle informazioni, di vario tipo un pulsante per l'invio dei dati all'applicazione (tipicamente sul server) che li elaborerà Le form in questo corso ci interessano principalmente come elementi di interazione sul lato client Un esempio : la risposta Accesso da parte dell'utente ad un database che risiede sul server: la pagina web è una interfaccia per accedere ai dati che risiedono sul server Come funzionano? Il tag form definisce un elemento di tipo blocco L'elemento form racchiude una serie di elementi HTML, detti controlli, usati dall utente per inserire informazione: campi per input di testo, scelte multiple, menù a discesa, ma non altre form Ciascun controllo ha un nome e un valore: Il nome è specificato nel codice HTML con l'attributo name Il valore corrisponde all input fornito dall utente Una volta inserita l informazione le coppie nome-valore dei controlli della form vengono inviati all applicazione sul server che li elaborerà Invio dati L invio dei dati coinvolge due pagine La pagina HTML che contiene la form per l inserimento dei dati La pagina (o il programma PHP/ASP/JSP ) che riceve i dati inviati dalla form I valori specificati dall utente sono inviati all URL specificato come un insieme di coppie nome=valore separate da & Es. nome=giovanna&soprannome=jo 1 di 7

Il tag form Sintassi per l inserimento di un form: <form id="modulo" method="get" action="script.php" "script.php"> <!-- Qui si inseriscono i controlli --> L attributo id identifica la form L attributo action fornisce l URL dello script o dell applicazione che elaborerà i dati inseriti dall utente. Ogni form può avere una sola action. L attributo method specifica il metodo di invio dei dati al server. Il protocollo HTTP prevede due metodi: get e post Le form non possono essere annidate l una dentro l altra Metodo GET Con il metodo get i dati vengono passati nella URL http://script.php?nome=giovanna&nickname=jonickname=jo Il carattere? separa il nome della pagina dai parametri che vengono passati nella form quello che segue è la query string o stringa di interrogazione I caratteri non consentiti nelle URL vengono automaticamente resi con i loro caratteri esadecimali (URL Encoding, standard di codifica Internet Media Type) : lo spazio diventa %20, la / diventa %2F di GET Metodo POST Con il metodo post le informazioni da passare al server non compaiono nella URL ma in una richiesta separata Questo metodo è preferibile se se non si desidera che i parametri siano mostrati all utente se i dati da trasmettere sono tanti La sintassi è: <form id="modulo" method="post" action="script.php" "script.php"> <!-- Qui si inseriscono i controlli --> GET vs POST Con il metodo GET: i parametri sono uniti alla URL: una pagina dinamica può essere memorizzata nei bookmark le informazioni passate sono visibili nella barra degli indirizzi del browser (problemi di sicurezza) se la form ha molti campi la querystring diventa eccessivamente lunga (vincoli sulla lunghezza massima di una URL: 256 caratteri). Con il metodo POST: il ricaricamento di una pagina implica la spedizione da parte del browser dei parametri maggiore sicurezza non ci sono limiti sulla lunghezza dei caratteri Elementi HTML base per l'interazione input type=" ="text" type=" ="password" type=" ="hidden" type=" ="checkbox" " e type=" ="radio" type=" ="button" type=" ="submit" type=" ="reset" type=" ="image" type=" ="file" textarea select e option i n p u t t y p e = " t e x t " <label><p>nome: Nome:</p> name="nome" value="inserisci il tuo nome" size="18" maxlength="50" </label> value permette di inserire il testo che compare nella form Nome: Inserisci il tuo nome size indica le dimensioni del campo di testo che il browser mostra (in numero di caratteri, default 20 caratteri) maxlength indica il numero massimo di caratteri che l utente può inserire name è il nome del valore che lo identifica nella query string 2 di 7

i n p u t : t y p e = " p a s s w o r d " i n p u t : t y p e = " h i d d e n " <p>qual è la tua password?</p> <input type="password" name="password" size="8" maxlength="8" Qual è la tua password? Consente all utente di inserire testo mascherandolo con * oppure un pallino (dipende dal browser) Sistema non sicuro: l invio dei dati attraverso il web avviene, se non vengono adottate altre misure di sicurezza, 'in chiaro' <input type="hidden" name="urldiprovenienza" value="www.di.unipi.it" "www.di.unipi.it"> Serve per trasmettere parametri di servizio, senza far percepire la loro presenza all utente. In questo caso si utilizzano campi nascosti (hidden), presenti all interno del form ma non visibili all utente i n p u t t y p e = " c h e c k b o x " i n p u t t y p e = " r a d i o " <input name="os" type="checkbox" <input name="os" type="checkbox" checked="checked" <input name="os" type="checkbox" disabled="disabled" Le checkbox sono tipicamente usate per opzioni multiple Quali di questi sistemi operativi hai usato? <input type="radio" name="os" checked="checked" "checked"> Unix </input> <input type="radio" name="os" value="mac"> Macintosh 9.0 </input> <input type="radio" name="os" value="winnt" disabled> Windows NT </input> Quali di questi sistemi operativi hai usato? Unix Macintosh 9.0 Windows NT I "radio button" ("bottoni circolari") consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l altra. i n p u t t y p e = " s u b m i t " Ogni form necessita di un bottone di invio per trasmettere i dati al server i n p u t t y p e = " r e s e t " Il bottone di Reset consente di riportare la form allo stato originario, cancellando ogni dato inserito <input type="submit" value="invia i dati" Invia i dati <input type="reset" value="cancella" "cancella"> cancella i n p u t t y p e = " b u t t o n " Esiste infine un tipo di bottone generico che non esegue nessuna azione particolare ma che può essere utilizzato per associare degli eventi con JavaScript <input type="button" value="clicca!" "Clicca!"> Clicca! 3 di 7

i n p u t t y p e = " i m a g e " Il campo "image" ci consente di utilizzare come bottoni vere e proprie immagini SRC mi permette di specificare l url dell immagine Usare l attributo ALT! <input type="image" name="invia" src="img/enter.jpg" width="88px" height="40px" alt="invia il modulo" i n p u t t y p e = " f i l e " Consente di fare upload di un un file Il campo di testo è affiancato dal bottone Browse, Sfoglia (a seconda della lingua del browser dell utente) maxlength indica il numero massimo di caratteri che l utente può inserire size indica le dimensioni del campo di testo che il browser mostra (la larghezza è data dal numero di caratteri, default 20 caratteri) Occorre specificare <form enctype="multipart/form-data" "multipart/form-data"> <input type="file" > Textarea Consente di inserire un testo rows specifica il numero di righe dell area da visualizzare cols specifica la larghezza (in caratteri) dell area da visualizzare Appare una scrallbar nel casp il testo inserito sia più lungo delle dimensioni specificate <textarea name="testo" cols="40" rows="5" "5"> Racconta il tuo sogno in 100 parole o meno </textarea> Nota: ampiezza e altezza si possono inserire con i CSS Select 1. Consente di inserire un menu a tendina (o a discesa), in inglese "drop-down" 2. Consente di realizzare una lista "scrollabile" size: : numero di righe da visualizzare multiple: : permette di selezionare più opzioni Ciascuna voce deve essere compresa all interno del tag option e il valore deve essere specificato attraverso l'attributo value Con l attributo selected si può indicare una scelta predefinita Sintassi s e l e c t Etichette - labels 1. Menù a tendina <select name="colore" "colore"> <option>rosso</option> <option>giallo</option> <option selected="selected" "selected"> verde </option> <option>blu</option> <option>arancione</option> </select> 2. Lista "scrollabile" <select name="colore" size="3" multiple="multiple" "multiple"> <option>rosso</option> <option>giallo</option> <option>verde</option> <option>blu</option> <option>arancione</option> </select> È buona pratica marcare con un tag specifico il significato dei campi di una form (label) Due modi di associare etichette ai controlli di una form: <form > <label for="log" "log">login: </label> name="login" id = "log" <form > <label> Login: name="login" </label> 4 di 7

Le novità nelle web form HTML5 Comportamenti ricorrenti implementati dai browser invece che dagli sviluppatori in Javascript: li vedremo Nuovi controlli Datalist Input specializzati con comportamenti particolari Slider Spinner Date e tempi color picker Nuovi controlli: datalist Incrocio tra: una input box normale, in cui si digita testo una select <input list="browsers" name="browser" "browser"> <datalist id="browsers" "browsers"> <option value="internet Explorer"> <option value="firefox" "Firefox"> <option value="chrome" "Chrome"> <option value="opera" "Opera"> <option value="safari" "Safari"> </datalist> <input type="submit" "submit"> da w3schools Nuovi tipi di input Input relativi alle date e ai tempi Search (type=search) Date (type=date) Slider (type=range) Color picker (type=color) Email (type=email) Spinner (type=number)... eccetera Importante: se non supportate diventano normali input box Grazie w3schools! Uso delle informazioni semantiche Tastiere specializzate in Safari per ios! F i e l d s e t e l e g e n d I fieldset servono per raggruppare logicamente un insieme di controlli con una legenda associata <fieldset> <legend>iscrizione mailing list</legend> <ul> <li>aggiungimi alla tua mailing list</li> <li><label>nome e cognome: name="name" </label></li> <li><label>email: name="email" </label></li> </ul> </fieldset> Iscrizione mailing list Aggiungimi alla tua mailing list Nome e cognome: Email: 5 di 7

Form con stile Allineare gli elementi di una form Con l uso di tabelle minimali (dentro la form) o liste (senza decorazioni) Con CSS usando float sulle label HTML CSS Frame I frame suddividono la finestra del browser in sottoparti in cui vengono caricate pagine diverse di pagina a frame Motivi a favore: Si può far variare una parte della pagina e tenere fisso il resto Si può riutilizzare uno stesso componente in più pagine Si può tenere fissa una parte della pagina (es. logo) e scorrere il resto Si possono integrare pagine da server diversi (mashup) Ci sono comunque svantaggi e motivi per non utilizzarli: XHTML1.0 richiede un DOCTYPE particolare i nuovi linguaggi non li utilizzano: HTML5 li elimina ci sono modi alternativi di fare le cose Problemi di usabilità dei frame Non si possono mettere bookmark (segnalibri, favoriti) e inviare URL per email, a pagine contenute nei frame (o almeno è complicato) Le pagine destinate ad essere incluse in frame potrebbero essere usate anche fuori contesto (es. recuperate da un motore di ricerca) se la pagina inclusa è a frame si potrebbero avere frame dentro frame... Problemi nella navigazione Necessità di versioni alternative Problemi per i crawler e motori di ricerca Frame inline (iframe) I frame inline consentono di inserire il contenuto di un documento come elemento inline Sono ammessi anche in HTML5 In generale: <iframe src="url"...> contenuto alternativo per browser non abilitati </iframe> Il documento da inserire è identificato da URL All interno dell'elemento dovrebbe essere fornito testo alternativo, magari un link al documento 1 di inclusione di orario Questioni legali Nel caso dei frame e degli iframe è il browser che richiede al server un documento via http, non c è modo di evitare sul lato server che il documento venga incluso nella pagina di un altro (framing). Il contenuto incluso può essere anche graficamente adattato alla pagina "ospite". Il framing è considerato scorretto e una violazione del copyright, quando fatto senza chiedere autorizzazioni. Alternative all'uso dei frame Se c'è una componente che si deve ripetere nelle varie pagine di un sito (es. un menù di navigazione, un logo) si preferisce farla includere dal server con funzionalità sul lato server Server Side Includes (SSI) Una funzionalità semplice offerta dai Web server tipo Apache (se installato modulo mod_include) È una richiesta al server di includere frammenti di pagina contenuti in file specificati. SSI è un primo esempio di pagine assemblate al volo sul lato server, o pagine dinamiche. 6 di 7

Come funziona SSI : <html> <head><title>ssi</title></head> <body> <!--#include virtual="intestazione.html" -->... contenuto della pagina... </body> </html> Javascript lato client Anche con Javascript si può includere contenuto nelle pagine Con AJAX si possono fare richieste asincrone al server e caricare su richiesta pezzi di pagina o dati: Limitazione: questi contenuti devono provenire dallo stesso server che ospita la pagina che li richiede ( same server policy ) Per motivi di sicurezza File intestazione.html: <div id="logo" "logo"><img src="logo.gif" </div> Conclusioni Le form sono un importante strumento di interazione con l'utente I controlli da usare servono per input di diverso tipo HTML5 introduce molti controlli con semantica precisa e "incoraggia" i browser a implementare compartamenti standard e buone pratiche Riferimenti utili per le form: Web form design (Luke Wroblewski) 7 di 7