HTML5 mette a disposizione il tipo di campo tel, progettato per l'uso con i numeri di telefono.
Il tuo numero di telefono: <input type="tel" name="telefon">
Su smartphone e tablet, cliccando sul campo, si apre la tastiera numerica per inserire il numero di telefono.
Campi per gli indirizzi internet con url
I campi di tipo url sono pensati per l'inserimento degli indirizzi internet.
<input type="url" />
I campi URL vengono validati automaticamente. I browser dovrebbero controllare se è stato inserito effettivamente un URL sintatticamente corretto in tali campi.
Campo di output con output
Con il campo output è possibile visualizzare contenuti. È interessante ad esempio in combinazione con JavaScript. Questo campo può essere utilizzato per la visualizzazione di variabili. Tuttavia, il campo può essere utilizzato anche per la visualizzazione di valori calcolati. Il campo è destinato esclusivamente all'output dei dati. Gli input degli utenti non sono ammessi.
Un esempio:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Ciao,"
wort2="mondo!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>In questo esempio sono state dichiarate due variabili. I contenuti di queste variabili dovrebbero essere visualizzati nel campo output.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
I browser come Opera mostrano il valore desiderato. I browser che non possono gestire output invece non mostrano nulla.output ha tre attributi:
• form – Il modulo in cui è contenuto l'elemento output.
• for – Stabilisce il riferimento ai campi o valori a cui si riferisce il campo di output. I valori e campi devono essere separati da spazi.
• name – Se si specifica un nome, il contenuto del campo viene trasmesso con l'invio del modulo.
• value – Indica il valore del campo.output è adatto anche per calcoli matematici. Ad esempio, si potrebbero chiedere valori tramite campi di Prompt e poi moltiplicarli insieme.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Cifra 1.",0));
b=parseInt(prompt("Cifra 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Il risultato della moltiplicazione:</label>
<output name="result" />
</output>
</form>
</body>
</html>Visitando la pagina, si apre una finestra di prompt che richiede il primo valore.
Confermando l'inserimento con OK, si apre una seconda finestra. (Se si fa clic su Annulla in una delle due finestre, il risultato sarà NaN, ovvero Not a Number).
Confermando anche la seconda finestra con OK, lo script trasmette il risultato della moltiplicazione come valore al campo output.
Barra di avanzamento con progress
È possibile realizzare una barra di avanzamento tramite l'elemento progress. È interessante ad esempio in relazione al download di file..gif "HTML & CSS per principianti (Parte 16): Formulari (4)")
Google interpreta già l'elemento. Altri browser che non conoscono l'elemento mostrano il suo contenuto.
Un esempio:
Download in corso ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
L'elemento di progresso conosce due attributi:
• max – Specifica quanti passaggi sono necessari in totale.
• value – Qui si indica quanti passaggi sono stati completati fino ad ora.
L'elemento progress diventa davvero interessante quando JavaScript entra in gioco. Come utilizzare una combinazione di progress e JavaScript può essere meglio mostrato tramite un esempio.
In questo esempio si considera un modulo che deve essere compilato in più passaggi. Vengono richieste sequenzialmente le seguenti informazioni:
• Nome
• Cognome
• Via
• CAP
• Città
Ora potresti naturalmente chiedere questi pochi valori in una sola pagina. Ma cosa succede se bisogna raccogliere molte informazioni dall'utente? In tal caso, i formulari estesi sembrano piuttosto spaventosi. È meglio pertanto suddividere i formulari su più pagine.
Immagina di accedere al modulo.
Qui ti verrà chiesto il tuo nome. La barra di stato sotto il campo è stata realizzata con l'elemento progress.
<fieldset id="schritt1" style="display: none;"> <p>Nome: <input type="text" name="nome" size="30"></p> <p><progress max="5" value="1">Passo 1 / 5</progress></p> <p><input type="button" value="Avanti" onclick="prossimoPasso(2)"></p> </fieldset>
Questa sintassi ha molteplici significati. I singoli elementi fieldset vengono innanzitutto resi invisibili. Anche se a prima vista potrebbe non sembrare, il modulo è infatti composto da una sola pagina. I singoli campi sono stati inseriti in elementi fieldset separati. E questi elementi fieldset (insieme ai loro contenuti) non sono visibili.
Per far sì che gli elementi effettivamente nascosti diventino visibili dopo aver cliccato sui rispettivi pulsanti Avanti, viene utilizzata una funzione JavaScript switch. Come appare verrà mostrato nel corso di questo tutorial.
Iniziamo però dal modulo. Cliccando sui pulsanti Avanti verrà guidato attraverso il modulo. Gli elementi progress mostrano il progresso compiuto.
Non è particolarmente grave se un browser non interpreta l'elemento progress. In tal caso il browser mostra semplicemente il contenuto di questo elemento.
<progress max="5" value="1">Passo 1 / 5</progress>
Invece della barra di avanzamento, si vede un testo come Passo 2 / 5.
Il modulo appare come segue:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Nome: <input type="text" name="nome" size="30"></p> <p><progress max="5" value="1">Passo 1 / 5</progress></p> <p><input type="button" value="Avanti" onclick="prossimoPasso(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Cognome: <input type="text" name="cognome" size="30"></p> <p><progress max="5" value="2">Passo 2 / 5</progress></p> <p><input type="button" value="Avanti" onclick="prossimoPasso(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Indirizzo: <input type="text" name="indirizzo" size="30"></p> <p><progress max="5" value="3">Passo 3 / 5</progress></p> <p><input type="button" value="Avanti" onclick="prossimoPasso(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>CAP: <input type="text" name="cap" size="30"></p> <p><progress max="5" value="4">Passo 4 / 5</progress></p> <p><input type="button" value="Avanti" onclick="prossimoPasso(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Città: <input type="text" name="città" size="30"></p> <p><progress max="5" value="5">Passo 5 / 5</progress></p> <input type="submit" value="Fine"> </fieldset> </form>
Qui sono tre le cose cruciali:
• Ogni elemento fieldset viene assegnato un'ID.
• Tutti gli elementi fieldset vengono impostati su display: none.
• Ai pulsanti viene assegnata la funzione prossimoPasso(n).
La funzione prossimoPasso(n) si presenta così:
<script>
/* <![CDATA[ */
function prossimoPasso(n) {
switch(n) {
case 1:
document.getElementById('schritt1').style.display = "block";
break;
case 2:
document.getElementById('schritt1').style.display = "none";
document.getElementById('schritt2').style.display = "block";
break;
case 3:
document.getElementById('schritt2').style.display = "none";
document.getElementById('schritt3').style.display = "block";
break;
case 4:
document.getElementById('schritt3').style.display = "none";
document.getElementById('schritt4').style.display = "block";
break;
case 5:
document.getElementById('schritt4').style.display = "none";
document.getElementById('schritt5').style.display = "block";
break
default: break;
}
}
prossimoPasso(1);
/* ]]> */
</script>
Questa funzione visualizza l'elemento fieldset attuale e nasconde gli altri elementi fieldset. Assicurati di collocare la funzione dopo la definizione dei campi. Pertanto, posizionala preferibilmente dopo il tag di chiusura </form>.
