Guida HTML5: i form – parte 4

Ed eccoci, finalmente, all’ultima parte della guida dedicata ai form!

Nello scorso capitolo abbiamo introdotto nuovi tipi di input per gestire email, url, date, numeri ed altro. Quest’oggi, invece, affronteremo alcuni interessanti elementi come le datalist e le progress bar, e sperimenteremo l’interessante feature che ci permette di modificare, dal browser stesso, il codice html di elementi o, addirittura, di intere pagine!

Datalist

L’elemento <datalist> non fa altro che mostrare all’utente una serie di possibili scelte all’interno di un determinato campo di testo, dandogli la facoltà di selezionare una delle opzioni già presenti. In pratica, quello che sto descrivendo, appare nel browser così:

Schermata 2014-04-22 alle 11.20.08

Per creare una datalist occorre, prima di tutto, partire da un comune campo di testo:

 

<legend>Qual è il tuo colore preferito?</legend>
<input id=”colorePreferito”>

A questo punto, possiamo creare una datalist con le relative opzioni:

 

<datalist id="coloreScelta">
     <option label="nero" value="nero">
     <option label="bianco" value="bianco">
     <option label="rosso" value="rosso">
     <option label="giallo" value="giallo">
     <option label="verde" value="verde">
     <option label="blu" value="blu">
</datalist>

Infine, non ci resta che associare il campo di testo alla datalist specificando, tramite l’attributo list, l’id utilizzato dalla stessa datalist:

<legend>Qual è il tuo colore preferito?</legend>
<input id=”colorePreferito” list=”coloreScelta”>

Progress Bars & Meters

L’elemento <progress>, rappresenta il progresso che una determinata azione ha compiuto tramite una barra colorata che avanza sullo sfondo grigio:

Schermata 2014-04-22 alle 11.34.35

Per crearla basta utilizzare questo semplice codice:

 

<progress value=”0.75”></progress>

dove l’attributo value rappresenta la percentuale di completamento da 0 a 1. Ovviamente è anche possibile cambiare la scala di valori a cui si fa riferimento; ad esempio, tramite l’attributo max, potremmo creare una progress bar che rappresenta il valore 20 in relazione ad una scala da 0 a 200:

 

<progress value=”20” max=”200”></progress>

Esiste, tuttavia, anche un altro modo per utilizzare la progress bar. Ad esempio, nel caso non avessimo dei valori di riferimento ma volessimo solo visualizzare un generico stato ‘in progress’, potremmo utilizzare questo codice:

<progress></progress>

per ottenere questo risultato:

Schermata 2014-04-22 alle 11.50.41

L’elemento <meters>, invece, non serve come progress a rappresentare una percentuale generica in progressione, ma bensì a visualizzare un valore preciso associato ad un altrettanto precisa scala reale. Ad esempio, possiamo usare <meters> per indicare il peso di un bagaglio:

 

<meter min="3" max="30" value="8"></meter>

Come si può facilmente intuire gli attributi min e max stabiliscono rispettivamente il valore minimo e massimo, mentre value indica il valore attuale. Il risultato visivo sarà:

 Schermata 2014-04-22 alle 12.55.39

Ad entrambi gli elementi, <progress> e <meter>, può essere associato quello che in gergo viene chiamato ‘fallback’, ovvero il valore che viene mostrato nel caso il browser non supportasse questi elementi HTML5. In pratica scrivendo:

 

<meter min="3" max="30" value="8">8 kg</meter>

un browser che supporta il tag progress ignorerà ‘8kg’, mentre un altro che non supporta il medesimo tag visualizzerà unicamente ‘8kg’. Lo stesso concetto vale per una percentuale in <progress>:

 

<progress value=”20” max=”200”>10%</progress>

Ovviamente questi tag restituiscono una visualizzazione statica, ovvero che non corrisponde ad alcun reale aggiornamento di dati. Possono però, essere associate a del codice JavaScript che modifica dinamicamente il movimento delle barre.

 contentEditable

L’attributo contentEditable rende, semplicemente, modificabile il contenuto dell’elemento a cui è assegnato. Nulla è più semplice di questo codice:

 

<div id="contenutoModificabile" contentEditable>
Se vuoi, puoi modificare questo testo!
</div>

Basterà ciò per far sì che, nel browser, l’utente possa modificare liberamente quella porzione di testo. Prova tu stesso!

Schermata 2014-04-23 alle 11.21.48

In questo caso contentEditable è stato associato ad un div, ma niente ci vieta di associarlo a qualsiasi altro elemento o contemporaneamente a elementi multipli.

Con poche righe di JavaScript possiamo rendere il tutto ancora più funzionale, creando due semplici pulsanti che attivano e disattivano l’editor.

   function iniziaModifica() {
    // Seleziono l’id dell’elemento e lo rendo editabile
    var element = document.getElementById("contenutoModificabile");
    element.contentEditable = true;
}
function terminaModifica() {
    // Seleziono l’id dell’elemento e lo rendo NON editabile
    var element = document.getElementById("contenutoModificabile");
    element.contentEditable = false;
}

Associato a:

 

<button onclick="iniziaModifica()">inizia modifica</button>
<button onclick="terminaModifica()">termina modifica</button>

designMode

L’attributo designMode funziona in maniera similare a quanto abbiamo appena visto con contentEditable. Ovviamente, per impedire all’utente di modificare anche l’editor stesso potrebbe essere una cosa saggia racchiudere la pagina modificabile in un iframe in questo modo:

<h1>pagina modificabile</h1>
<iframe id="paginaModificabile" src="pagina_modificabile.html"></iframe>
<br/>
<button onclick="iniziaModifica()">inizia modifica</button>
<button onclick="terminaModifica()">termina modifica</button>
<h1>pagina modificata</h1>
<div id="paginaModificata"></div>

Anche il relativo codice JavaScript risulterà simile al precedente esempio:

 

function iniziaModifica() {
    // Seleziono l’id dell’elemento e lo rendo editabile
    var editor = document.getElementById("paginaModificabile");
    editor.contentWindow.document.designMode = "on";
}
function terminaModifica() {
    // Seleziono l’id dell’elemento e lo rendo NON editabile
    var editor = document.getElementById("paginaModificabile");
    editor.contentWindow.document.designMode = "off";
    // Mostro l'iframe modificato
    var htmlDisplay = document.getElementById("paginaModificata");
    htmlDisplay.textContent = editor.contentWindow.document.body.innerHTML;
}

N.B. Se utilizzi Internet Explorer o Chrome non riuscirai ad eseguire correttamente la pagina con questo esempio in modalità locale, questo perché entrambi posseggono una ‘modalità di sicurezza’ che impedisce il corretto funzionamento. Puoi testare il file in locale utilizzando, invece, Mozilla Firefox.

Conclusioni

Con questo articolo si chiude la lunga serie di puntate dedicate ai form. Inoltre ti ricordo che, come consuetudine, puoi scaricare il codice completo della lezione da questo link.

È tempo di riflessioni! Molti sono stati i cambiamenti e le innovazioni apportate dall’HTML5 in questo settore. Credi siano sufficienti? Credi che siano necessarie? Quali di questi elementi pensi di introdurre da subito nelle pagine da te sviluppate?

Concludo con un’anticipazione: il prossimo appuntamento sarà incentrato sui nuovi elementi <audio> e <video>. Non perderlo!

GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici 
6) Guida HTML5: i form – Parte 1 
7) Guida HTML5: i form – Parte 2
8) Guida HTML5: i form – Parte 3
9) Guida HTML5: i form – Parte 4
10) Guida HTML5:i tag audio e video – parte 1
11) Guida HTML5:i tag audio e video – parte 2
12) Guida HTML5: I player video
13) HTML5: Il Canvas – Parte 1
14) Guida HTML5: Il Canvas – Parte 2
15) HTML5: Il Canvas – Parte 3
16) HTML5: Il Canvas – Parte 4
17) HTML5: Web storage
18) Web worker

Tag: ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

4 commenti

Trackback e pingback

  1. Guida HTML5: i tag audio e video – parte 2 | Your Inspiration Web
    […] HTML5: i form – Parte 1  7)Guida HTML5: i form – Parte 2 8)Guida HTML5: i form – Parte 3…
  2. Guida HTML5: il Canvas – Parte 3 | Your Inspiration Web
    […] i form – Parte 1  7) Guida HTML5: i form – Parte 2 8) Guida HTML5: i form –…
  3. Guida HTML5: il Canvas – Parte 4 | Your Inspiration Web
    […] i form – Parte 1  7) Guida HTML5: i form – Parte 2 8) Guida HTML5: i form –…
  4. Guida HTML5: la prima pagina | Your Inspiration Web
    […] i form – Parte 1  7) Guida HTML5: i form – Parte 2 8) Guida HTML5: i form –…