Sei sulla pagina 1di 9

Frame

Frame e form
Maria Simi Web design in a nutshell CAP 11-14-15 a.a. 2011-12

u I frame suddividono la finestra del browser in sottoparti in cui vengono caricate pagine diverse u 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)

u Ci sono comunque motivi per non utilizzarli


XHTML1.0 richiede un DOCTYPE particolare XHTML1.1 (se mai uscir) omette tutti i frame comunque controversi

21 marzo 2005

DOCTYPE frameset
u Ricordiamoci che per la validazione bisogna usare <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd"> ! u Quindi la validazione non pu essere Strict

Esempio tipico di documento a frame


u Barra di navigazione in un frame e il contenuto in un altro <html> <head><title>Esempio di frame</title></head> <!-- al posto di body --> <frameset cols="20%, 80%"> <frame src="indice.html" scrolling="no" noresize="noresize" name="indice" /> <frameset rows="80,*"> <frame src="titolo.html" name="titolo" /> <frame src="cap1.html" name="contenuto" /> </frameset> </frameset> </html> ESEMPIO

21 marzo 2005

21 marzo 2005

Specifica delle ampiezze


u In pixel <frameset cols="150, 250">
Se il totale inferiore all'ampiezza della finestra i frame si allargano in proporzione

Bordi, scrolling
u Normalmente i frame hanno un bordo sopra-elevato che serve anche come maniglia per il loro ridimensionamento! u Attributo frameborder, usato sui frame
Valori: 0|1 0 toglie i bordi dal frame, ma lascia spazio border="0" per togliere anche lo spazio

u In percentuale <frameset cols="25%, 50%, 25%"> u Valori relativi (*) <frameset cols="100,*"> <frameset cols="50%,*,*"> <frameset cols="25%,2*,*">

u Attributo scrolling di frame


quanto resta ognuna 25% seconda doppio della terza
Valori: yes, no, auto (solo se serve)

u Attributo bordercolor di frame

:-Q

21 marzo 2005

21 marzo 2005

Resizing, margini
u Attributo noresize di frame
per impedire il ridimensionamento: noresize = "noresize"

Attributo target dei link


u I frame hanno un nome
Normalmente le pagine collegate vengono caricate nello stesso frame in cui caricata la pagina che contiene il link Per caricare una pagina in un frame diverso indichiamo come target nel tag a il nome del frame.

u Attributi marginheight e marginwidth di frame <frameset cols=" * , * "> <frame src="file1.html" marginheight="20" marginwidth="10" /> <frame src="file2.html" marginheight="0" marginwidth="0" /> </frameset>

<a href="inf2.html" target="inf">Capitolo 1</a>

u In alternativa si possono usare come target alcuni nomi con significato speciale:
target="_top" significa tutta la finestra target="_parent" la finestra del frame genitore target="_self" la cosa normale target="_blank" nuova finestra

21 marzo 2005

21 marzo 2005

Target: altro frame

Target: _parent (_top)

target= contenuto name= contenuto name= contenuto

target= _top

21 marzo 2005

21 marzo 2005

10

Target: _blank (pop-up)

Inline frame (iframe)


u I frame inline consentono di inserire il contenuto di un documento come elemento inline

name= contenuto

u In generale:
<iframe src="URL" ...> contenuto alternativo per browser non abilitati </iframe>

target= _blank

u Il documento da inserire identificato da URL u Allinterno dell'elemento dovrebbe essere fornito testo alternativo, magari un link al documento Esempio
21 marzo 2005 11 21 marzo 2005 12

Potenziali problemi
u Le pagine di contenuto potrebbero essere usate anche fuori contesto (es. recuperate da un motore di ricerca) fornire almeno un link al frameset in ogni frame uso di Javascript per rimettere i frame nel loro contesto u Link verso l'esterno da un frame target="_top" altrimenti le pagine esterne sono caricate nel frame se la pagina a frame si potrebbero avere frame dentro frame ...

Questioni legali
u 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). u Il contenuto incluso pu essere anche graficamente adattato alla pagina. u Il framing considerato scorretto e una violazione del copyright, quando fatto senza chiedere autorizzazioni. u Con Javascript si pu evitare il framing dei propri documenti

21 marzo 2005

13

21 marzo 2005

14

Svantaggi dei frame


u Non si possono mettere bookmark (segnalibri, favoriti) e inviare URL per email, a pagine contenute nei frame (o almeno complicato) u Problemi nella navigazione u Necessit di versioni alternative u Problemi per i crawler e motori di ricerca u Tutti i browser supportano i frame (inizialmente una tecnologia della Netscape)

Versione alternativa
u Per questi motivi bisognerebbe offrire sempre una versione alternativa della pagina senza frame. u Il modo per farlo previsto nel meccanismo: <noframes> Codice per la pagina senza frame </ noframes> o per gli iframe ... <iframe> Codice per la pagina senza frame </ iframe>

21 marzo 2005

15

21 marzo 2005

16

Alternative all'uso dei frame


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

Come funziona SSI


u Esempio
<html> <head><title>SSI</title></head> <body> <!--#include virtual="intestazione.html" --> ... contenuto della pagina ... </body> File intestazione.html: <div id="logo"><img src="logo.gif" /> </div>

21 marzo 2005

17

21 marzo 2005

18

Variabili di ambiente
u Sono informazioni mantenute dal server del tipo:
data e ora correnti (DATE_LOCAL) data ultima modifica dei file (LAST_MODIFIED) browser del cliente (HTTP_USER_AGENT) ...

Vantaggi e svantaggi di SSI


u Vantaggi
Facili da usare e da installare La pagina generata html semplice e quindi non ci sono problemi di compatibilit per i diversi browser

u Svantaggi
L'amministratore del Web server potrebbe non renderli disponibili per motivi di sicurezza Linguaggi di scripting come PHP e ASP sono pi potenti e flessibili Ma vedremo anche cosa si pu fare con Javascript lato client

u Queste variabili possono essere incluse nella pagina:


<!--#echo var="DATE_LOCAL" --> includer nella pagina Monday, 22-April-04, 9:50:24 EST Esiste anche il modo per specificare come viene visualizzata

21 marzo 2005

19

21 marzo 2005

20

Javascript lato client


u Anche con Javascript si pu includere contenuto nelle pagine u 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

Form
Cap 15 Web design in a nutshell

u Nel progetto vi verr richiesto di caricare un file XML contenente dati che risiede sulla vostra macchina

21 marzo 2005

21

Form
u HTML mette a disposizione strumenti per la raccolta di informazioni da parte dellutente: le form u Un form (modulo) HTML generalmente composto da
campi necessari alla raccolta delle informazioni un pulsante per l'invio dei dati all'applicazione (tipicamente sul server) che li elaborer u Le form ci interessano principalmente come elementi di interazione sul lato client

Un esempio
u 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
Casella di testo (text)

Men di opzioni (select) Pulsante di invio (button)

21 marzo 2005

23

21 marzo 2005

24

Esempio: la risposta

Come funzionano?
u Il tag <form> </form> definisce un elemento di tipo blocco u La form costituita da una serie di elementi, detti controlli, usati dallutente per inserire informazione: checkbox, text, select, u Ciascun controllo ha un nome e un valore:
Il nome specificato nel codice HTML Il valore corrisponde allinput fornito dallutente

u Una volta inserita linformazione le coppie nomevalore dei controlli della form vengono inviati allapplicazione sul server che li elaborer
21 marzo 2005 25 21 marzo 2005 26

Invio dati
u L invio dei dati coinvolge due pagine
La pagina HTML che contiene la form per linserimento dei dati La pagina (o il programma PHP/ASP/JSP) che riceve i dati inviati dalla form

Il tag form
u Sintassi per linserimento di un form: <form id="modulo" method="get" action="script.php"> <!-- Qui si inseriscono i controlli --> </form>
u Ci possono essere pi form nello stesso documento ma non possono essere annidate luna dentro laltra

u I valori specificati dallutente sono inviati allURL specificato come un insieme di coppie nome=valore separate da &
Es.: nome=Giovanna&soprannome=Jo

u Lattributo id identifica la form (name deprecato :-Q)

21 marzo 2005

27

21 marzo 2005

28

L attributo action
u Lattributo action fornisce lURL dello script o dellapplicazione che elaborer i dati inseriti dallutente <form name="modulo" action="script.php" method="get"> <!-- Qui si inseriscono i controlli --> </form>
u Ogni FORM pu avere una sola ACTION

L attributo method
u Lattributo method specifica il metodo di invio dei dati al server u Il protocollo HTTP prevede due metodi : GET e POST

<form name="modulo" action="script.php" method="get> <!-- Qui si inseriscono i controlli --> </form>

21 marzo 2005

29

21 marzo 2005

30

Metodo GET
Con il metodo GET i dati vengono passati nella URL Esempio: Query string o stringa di interrogazione

Form: esempio di get


<h1>Inserisci i tuoi dati!</h1> <form id="modulo" action="script.php" method="get" > <p>Nome: <input type="text" name="nome" /> </p> <p>Soprannome: <input type="text" name="soprannome" /> </p> <input type="submit" /> </form> Esempio

http://script.php?nome=Giovanna&nickname=Jo Il carattere ? separa il nome della pagina dai parametri che vengono passati nella form URL Encoding (internet media type) I caratteri non consentiti nelle URL vengono automaticamente resi con i loro caratteri esadecimali Esempio: Spazio %20
21 marzo 2005

/ %2F
31 21 marzo 2005 32

Metodo POST
u Con il metodo POST si nascondono le informazioni da passare al server: i parametri non compaiono nella URL u Se non si desidera che i parametri siano mostrati all utente questo metodo preferibile u La sintassi : <form name="modulo" action="script.php" method="post">

GET vs POST
u 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).

u 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
33 21 marzo 2005 34

21 marzo 2005

URL encoding
u L'attributo ENCTYPE serve per specificare come codificare i dati della form da passare al server u Normalmente

Elementi/Controlli delle form


u Elementi delle form
INPUT
type: text type: password type: hidden type: checkbox type: radio button type: submit e reset type: button type: image button type: file

<form ... enctype="text/plain" >


u Per inviare un immagine o un file indispensabile dichiarare espressamente il tipo di codifica u Il formato standard di codifica lInternet Media Type
Codifica caratteri speciali non ammessi negli URL come as es. / e spazi nel loro equivalente esadecimale

spazio= %20

/=%2F

TEXTAREA SELECT e OPTION (per men a discesa)


35 21 marzo 2005 36

21 marzo 2005

Input: type="text"
u Consente all utente di inserire del testo
<input type="text" name="nome" value="Inserisci il tuo nome" size="18" maxlength="50" />
value permette di inserire il testo che compare nella form 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

Input: type="password"
u Consente all utente di inserire testo mascherandolo con * o l (dipende dal browser) u Sistema non sicuro: l invio dei dati attraverso il web avviene, se non vengono adottate altre misure di sicurezza, 'in chiaro'

<p>Qual la tua password?</p> <input type="password" name="password" size="8" maxlength="8">


Esempio

21 marzo 2005

37

21 marzo 2005

38

Input: type="hidden"
u Potremmo avere la necessit di passare parametri di servizio, senza far percepire la loro presenza all utente. u In questo caso possiamo utilizzare campi nascosti, presenti all interno del form ma non visibili all utente <input type="hidden" name="urlDiProvenienza" value="www.di.unipi.it"> Esempio

Input: type="checkbox"
u Le checkbox sono tipicamente usate per opzioni multiple u Si possono selezionare uno o pi valori di default: <input name="os" type="checkbox" value="Unix" checked="checked" /> u possibile disabilitare una casella: <input name="os" type="checkbox" value="Unix" disabled="disabled" /> Esempio
39 21 marzo 2005 40

21 marzo 2005

Input: type="radio"
u I "radio button" ("bottoni circolari") invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l altra. u Anche in questo caso possibile assegnare un valore di default o disabilitare un pulsante.

Input: type="submit"
u Ogni form necessita di un bottone di invio per trasmettere i dati al server <input type="submit" /> Esempio u Value permette di cambiare il testo del bottone Invia o Invia Query <input type="submit" value="Invia i dati" />

Esempio

Esempio

21 marzo 2005

41

21 marzo 2005

42

Input: type="reset"; "button"


u Il bottone di Reset consente di riportare la form allo stato originario, cancellando ogni dato inserito: <input type="reset" value="cancella"> Esempio

Input: type="image"
u Il campo "image" ci consente di utilizzare come bottoni vere e proprie immagini u SRC mi permette di specificare lurl dellimmagine u Usare lattributo ALT! <input type="image" name="Invia" src="enter.gif" width="88" height="58" alt="invia il modulo" />

u Esiste infine un tipo di bottone generico che non esegue nessuna azione particolare ma che pu essere ad esempio utilizzato per associare degli eventi con JavaScript <input type="button" value="Clicca!">

Esempio

21 marzo 2005

43

21 marzo 2005

44

Input: type="file"
u Consente di fare upload di un un file u 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)

Textarea
u Consente di inserire un testo
rows specifica il numero di righe dellarea da visualizzare cols specifica la larghezza (in caratteri) dellarea da visualizzare Scrollbar in caso il testo inserito sia piu lungo delle dimensioni specificate

u Occorre specificare <form enctype="multipart/form-data"> <input type="file" >

<textarea name="testo" cols="40" rows="5">racconta il tuo sogno in 100 parole o meno</textarea> Esempio

Esempio
45 21 marzo 2005

21 marzo 2005

46

Select
1. Consente di realizzare menu a tendina (o a discesa) 2. Lista scrollabile
Size: numero di righe da visualizzare Multiple: permette di selezionare piu opzioni

Select: sintassi
Menu a tendina <select name="colore"> <option>rosso</option> <option>giallo</option> <option selected="selected"> verde </option> <option>blu</option> <option>arancione</option> </select> Esempio Esempio Lista scrollabile <select name="colore" size="3" multiple="multiple"> <option>rosso</option> <option>giallo</option> <option>verde</option> <option>blu</option> <option>arancione</option> </select>

u Ciascuna voce deve essere compresa all interno del tag <option> e il valore deve essere specificato attraverso l'attributo "value" u Con l attributo "selected" si pu indicare una scelta predefinita

21 marzo 2005

47

21 marzo 2005

48

Etichette / labels
u Due modi di associare etichette ai controlli di una form:
<form > <label for="log">Login: </label> <input type="text" name="login" id = "log" /> </form> <form > <label> Login: <input type="text" name="login" /> </label> </form>
21 marzo 2005 49

Form accessibili
u Un elemento selezionato si dice focalizzato (on focus) u Con la navigazione da tastiera con tasto TAB si sposta il focus seguendo lordine degli elementi u accesskey serve a specificare una combinazione di tasti per accedere a un certo campo
<input type="text" name="zip" accesskey="1" /> accesso con ALT-1

u tabindex serve ad alterare lordine della navigazione con i tab


<input type="text" name="zip" accesskey="1" />
21 marzo 2005 50

Form con stile


u Allineare gli elementi di una form
Con luso di tabelle minimali (dentro la form) Con CSS usando float sulle label Nome: Cognome: Commenti:

Invio
21 marzo 2005 51