Progettazione di siti web
a.a. 2021/22

HTML5: Web form, frame, media

Maria Simi
Maggio, 2022

[Manuale di riferimento del W3C, Learning web design]

Sommario

• Web form
• Frame, iframe
• Novità di HTML5
• Rich Media

Form

• HTML da sempre mette a disposizione strumenti di interazione e per la raccolta di informazioni da parte dell’utente: i form web (in italiano moduli web)
• Un form è un elemento HTML composto da:
  
  • elementi HTML per la raccolta delle informazioni, di vario tipo
  • un pulsante per l'invio dei dati all'applicazione (tipicamente sul server) che li elaborerà
• I form e gli elementi al loro interno in questo corso ci interessano principalmente come strumenti di interazione sul lato client

Un esempio

• 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

Esempio: la risposta

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 del form vengono inviati all’applicazione sul server che li elaborerà

Invio dati

• L’invio dei dati coinvolge due pagine
  
  • La pagina HTML che contiene il form per l’inserimento dei dati
  • La pagina (o il programma PHP/ASP/JSP…) che riceve i dati inviati dal form e che risiede normalmente sul server
• I valori specificati dall’utente sono inviati all’URL specificato come un insieme di coppie nome=valore separate da ‘&’
  
  Es. nome=Giovanna&soprannome=Jo

Il tag form

• Sintassi per l’inserimento di un form:

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

• L’attributo id identifica il 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

Metodo GET

• Con il metodo GET i dati vengono passati nell'URL

  http://script.php?nome=Giovanna&nickname=Jo

• Il carattere ? separa il nome della pagina dai parametri che vengono passati nel form
• quello che segue è la query string o stringa di interrogazione
• I caratteri non consentiti negli URL vengono automaticamente resi con i loro caratteri esadecimali (URL Encoding, standard di codifica Internet Media Type)
  
  Esempio: lo spazio diventa %20, la / diventa %2F

Esempio di GET

Comunicazione tra pagine

• Lo stesso meccanismo può essere utilizzato per passare dati tra pagine html.
• I dati possono essere letti e usati da Javascript lato-client
  
  • window.location.href.search restituisce la query string: ?nome=Maria&soprannome=Mary
  • qs = window.location.href.search.split(1): toglie il ?
  • ar = qs.split('&'): costruisce un array: [nome=Maria, soprannome=Mary]
  • ar[0].split("=")[1] restituisce il valore del primo attributo, in questo caso Maria
• Può servirvi?

Metodo POST

• Con il metodo POST le informazioni da passare al server non compaiono nell'URL ma in una richiesta http separata
• La sintassi è:

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

GET vs POST

• Con il metodo GET:
  
  • i parametri sono uniti alla URL: una pagina "parametrica" può essere memorizzata nei bookmark
  • le informazioni passate sono visibili nella barra degli indirizzi del browser (problemi di sicurezza)
  • se il form ha molti campi la query string diventa eccessivamente lunga (vincolo 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 della query string

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

input type="text"

• value permette di inserire il testo che compare nel form (qui svolge il ruolo di suggerimento)
• 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 da inserire
• name è il nome del valore che lo identifica nella query string

input type="submit"

• Ogni form ha tipicamente un bottone di invio per trasmettere i dati al server

<input type="submit" value="Invia i dati"  /> 

Esempio

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

Esempio

input: type="hidden"

<input type="hidden" 	
       name="urlDiProvenienza" 	
       value="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

input type="checkbox"

• Le checkbox sono usate per opzioni multiple
  
  • checked: spuntato inizialmente (un default)
  • disabled: disabilitato

Esempio

input type="radio"

Esempio

input type="reset"

• Il bottone di Reset consente di riportare il form allo stato originario, cancellando ogni dato inserito

<input type="reset" value="cancella">  

input type="button"

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

input type="image"

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

Esempio

input type="file"

• Consente di fare upload (dal client al server) di 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">
  <input type="file" >
  

Esempio

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 scrollbar nel caso il testo inserito sia più lungo delle dimensioni specificate

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

Nota: ampiezza e altezza si possono inserire con i CSS

Esempio

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 select

<select name="colore">

<option>rosso</option>
<option>giallo</option>
<option selected="selected">
	verde
</option>
<option>blu</option>
<option>arancione</option>

</select>

<select name="colore" 
        size="3" 
        multiple="multiple">

  <option>rosso</option>
  <option>giallo</option>
  <option>verde</option>
  <option>blu</option>
  <option>arancione</option>

</select>

Etichette - labels

• È buona pratica descrivere il significato dei campi di un form associando loro una etichetta (label)
• Due modi di associare etichette ai controlli di un 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> 

Le novità nei web form HTML5

• Comportamenti ricorrenti implementati dai browser invece che dagli sviluppatori in Javascript
• Nuovi controlli
  
  • Datalist
• Input specializzati con comportamenti particolari
  
  • Slider
  • Spinner
  • Date e tempi
  • Color picker

Placeholder

• Il pattern prevede:
  
  • Campo senza valore: scrivici dentro cosa ti aspetti in grigio
  • Quando si inizia a scrivere la scritta sparisce
  • Se l'utente esce dal campo senza dare un valore, rimettila

<form action="#">
  <input type="text" name="fname" placeholder="Nome"><br>
  <input type="text" name="lname" placeholder="Cognome"><br>
  <input type="submit" value="Submit">
</form>

Esempio da w3schools

Autofocus

• Il pattern prevede:
  
  • Al caricamento di una pagina, focus su campo specifico

<form action="demo_form.asp">
  Nome:<input type="text" name="fname" autofocus><br>
  Cognome: <input type="text" name="lname"><br>
  <input type="submit">
</form>

Esempio da w3schools

Required

• Serve per la validazione dell'input:
  
  • Garantisce che un campo venga riempito

<form action="demo_form.asp">
  Nome utente: <input type="text" name="usrname" required>
  <input type="submit">
</form>

Esempio da w3schools

Autocomplete

• Il pattern prevede:
  
  • il browser completa i valori in base a quello che l'utente ha immesso precedentemente

<form action="demo_form.asp" autocomplete="on">
  Nome:<input type="text" name="fname"><br>
  Cognome: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Esempio da w3schools

Nuovi controlli: datalist

• Incrocio tra:
  
  • una input box normale, in cui si digita testo
  • una select

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">

Esempio da w3schools

Nuovi tipi di input

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

Fieldset e legend

• 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: <input type="text" name="name" /></label></li>
     <li><label>Email: <input type="text" name="email" /></label></li>
   </ul>
</fieldset>

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
• Esempio di pagina a frame
• Motivi per cui sembrava una buona idea:
  
  • Si può far variare una parte della pagina e tenere fisso il resto
  • Si può riutilizzare uno stesso componente in più pagine
  • Si possono integrare pagine da server diversi (mashup)
• Gli svantaggi e i motivi per non utilizzarli sono comunque tanti:
  
  • 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

Esempio 1    Esempio di inclusione di orario

Questioni legali e limitazioni

• Nel caso dei frame e degli iframe è il browser che richiede al server un documento via http e non c’è modo di sapere sul lato server se il documento verrà incluso nella pagina di un altro (framing).
  
  • Alcuni servizi, tipo YouTube o l'orario, ci consentono di includere contenuti in un iframe
  • Altri no, consentono solo visualizzazioni a tutto schermo (basta un po' di Javascript)
• I browser, non consentono di accedere al contenuto incluso, per modificarlo o adattarlo alla pagina "ospite". Vale anche per Javascript.
• Il framing è considerato scorretto e una violazione del copyright, quando fatto senza chiedere autorizzazioni.

Alternative all'uso dei frame

• Lato server: 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.
• 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 Origin Policy), per motivi di sicurezza

Rich media: inclusione semplice di audio e video

• Includere audio e video è sempre stato un incubo: richiede plugin (Flash o Silverlight) o l' uso di iframe
• HTML5 introduce importanti novità:
  
• Audio
  

  <audio id="player" ... >
    <source src="song.mp3">
    ... altri formati ...
  </audio>
  

• Video
  

  <video id="player" ... >
    <source src="movie.mp4">
    ... altri formati ...
  </video>
  

Audio

• Attributi
  
  • booleani: autoplay, loop, controls
  • multivalore: src (file audio), preload (none | auto | metadata)
• Formati audio
  
  • mp3 (mpeg): proprietario, non supportato da Firefox
  • Vorbis .ogg: aperto, supportato da Firefox, non da Safari

<audio id="player" controls preload="none" >
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
</audio>

Esempio

Video

• Attributi
  
  • booleani: autoplay, loop, controls
  • multivalore: src (file audio), preload (none | auto | metadata), width, height, poster
• Formati video
  
  • mp4 (mpeg): proprietario, non supportato da Firefox
  • Theora video: aperto, supportato da Firefox, non da Safari

<video id="player" width="320" height="240" controls preload="none" >
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="audio/mp4">
</video>

Esempio

Conclusioni

• I 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 comportamenti standard e buone pratiche
• Si può iniziare a usarli da subito anche se i nuovi tag possono non essere supportati
• Un uso graduale di HTML5 può iniziare ...