HTML5 biedt met tel een veldtype aan dat bedoeld is voor het gebruik in verband met telefoonnummers.
Je telefoonnummer: <input type="tel" name="telefoon">
Op smartphones en tablets opent bij het klikken op het veld het numerieke toetsenblok voor het invoeren van het telefoonnummer.
Velden voor webadressen met url
Velden van het type url zijn bedoeld voor het invoeren van webadressen.
<input type="url" />
URL-velden worden automatisch gevalideerd. Browsers zouden bij dergelijke velden moeten controleren of er daadwerkelijk een syntactisch correcte URL is ingevoerd.
Uitvoerveld met output
Met het output-veld kunnen inhouden worden weergegeven. Dit is bijvoorbeeld interessant in combinatie met JavaScript. Zo kan dit veld worden gebruikt voor de uitvoer van variabelen. Evenzo kan het veld worden gebruikt voor de uitvoer van berekende waarden. Het veld is uitsluitend bedoeld voor gegevensuitvoer. Gebruikersinvoer is dus niet mogelijk.
Een voorbeeld:
<script>
/* <![CDATA[ */
function uitvoer(){
woord1="Hallo,"
woord2="Wereld!"
document.forms[0][0].value=woord1+woord2
}
/* ]]> */
</script>In dit voorbeeld zijn twee variabelen gedeclareerd. De inhoud van deze variabelen moet worden weergegeven in het output-veld.
<body onload="uitvoer()">
<form action="evaluatie.php" method="get" name="formulier">
<output name="veld" />
</form>
</body>
Browsers zoals Opera tonen de gewenste waarde. Andere browsers die niets met output kunnen, tonen daarentegen niets.output heeft drie attributen.
• formulier – Het formulier waarin het output-element zich bevindt.
• voor – Legt de relatie met de velden of waarden vast waarnaar het output-veld verwijst. De waarden en velden moeten worden gescheiden door spaties.
• naam – Als er een naam wordt opgegeven, wordt de inhoud van het veld meegestuurd bij het verzenden van het formulier.
• waarde – Geeft de waarde van het veld aan.output is natuurlijk ook geschikt voor wiskundige berekeningen. Zo zou je bijvoorbeeld waarden kunnen opvragen via Prompt-velden en deze vervolgens met elkaar vermenigvuldigen.
<!DOCTYPE html>
<html >
<head>
<title>uitvoer</title>
<script>
/* <![CDATA[ */
function vermenigvuldig(){
a=parseInt(prompt("Cijfer 1.",0));
b=parseInt(prompt("Cijfer 2.",0));
document.forms["formulier"]["resultaat"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="vermenigvuldig()">
<form action="#" method="get" name="formulier">
<label>Het resultaat van de vermenigvuldiging:</label>
<output name="resultaat" />
</output>
</form>
</body>
</html>Als je de pagina opent, verschijnt er een Prompt-venster waarin de eerste waarde wordt gevraagd.
Als je de invoer bevestigt met OK, opent er een tweede venster. (Als je in een van de twee vensters op Annuleren klikt, zal het resultaat NaN, dus Geen getal zijn).
Als ook het tweede venster met OK wordt bevestigd, geeft het script het resultaat van de vermenigvuldiging door als waarde aan het output-veld.
Voortgangsbalken met progress
Een voortgangsbalk kan worden gerealiseerd met het progress-element. Dit is bijvoorbeeld interessant in verband met het downloaden van bestanden..gif "HTML & CSS voor beginners (Deel 16): Formulieren (4)")
Google interpreteert het element al. Andere browsers die het element niet kennen, tonen de inhoud daarvan.
Een voorbeeld:
De download is bezig ...
<progress value="250" max="1000">
<span id="downloadVoortgang">25</span>%
</progress>
Het progress-element kent twee attributen:
• max – Bepaalt hoeveel stappen er in totaal nodig zijn.
• waarde – Hiermee geef je aan hoeveel stappen er al zijn voltooid.
Het progress-element wordt eigenlijk pas echt interessant als JavaScript in beeld komt. Hoe een combinatie van progress en JavaScript kan worden gebruikt, wordt het beste gedemonstreerd aan de hand van een voorbeeld.
Bij dit voorbeeld wordt uitgegaan van een formulier dat in meerdere stappen moet worden ingevuld. Achtereenvolgens worden de volgende gegevens opgevraagd:
• Voornaam
• Achternaam
• Straat
• Postcode
• Plaats
Nu kan je deze paar waarden natuurlijk op één pagina opvragen. Maar wat als er heel veel informatie van de gebruiker moet worden opgehaald? Dan kunnen uitgebreide formulieren eerder afschrikken. Daarom is het beter om formulieren op te splitsen over meerdere pagina's.
Stel dat je het formulier oproept.
Hier wordt gevraagd naar je voornaam. De statusbalk onder het veld is gerealiseerd met het progress-element.
<fieldset id="schritt1" style="display: none;"> <p>Voornaam: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Stap 1 / 5</progress></p> <p><input type="button" value="Volgende" onclick="naechserSchritt(2)"></p> </fieldset>
Dit is de cruciale syntaxis. De afzonderlijke fieldset-elementen worden om te beginnen onzichtbaar gemaakt. Want ook al lijkt het op het eerste gezicht niet zo, het formulier bestaat eigenlijk slechts uit één pagina. De afzonderlijke velden zijn elk in hun eigen fieldset-elementen ingevoegd. En deze fieldset-elementen (inclusief hun inhoud) zijn niet zichtbaar.
Om de eigenlijk verborgen elementen zichtbaar te maken na het klikken op de respectievelijke Volgende-knoppen, wordt een JavaScript-switch-functie gebruikt. Hoe dat eruit ziet, wordt later in deze tutorial getoond.
Echter, terug naar het formulier. Door te klikken op de Volgende-knoppen wordt je door het formulier geleid. De progress-elementen tonen aan hoe ver je gevorderd bent.
Overigens is het niet erg als een browser het progress-element niet interpreteert. Deze browsers tonen dan eenvoudig de inhoud van dit element.
<progress max="5" value="1">Stap 1 / 5</progress>
Er is dus een tekst te zien volgens het schema Stap 2 / 5 in plaats van de voortgangsweergave.
Het formulier ziet er als volgt uit:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Voornaam: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Stap 1 / 5</progress></p> <p><input type="button" value="Volgende" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Achternaam: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Stap 2 / 5</progress></p> <p><input type="button" value="Volgende" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Straat: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Stap 3 / 5</progress></p> <p><input type="button" value="Volgende" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>Postcode: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Stap 4 / 5</progress></p> <p><input type="button" value="Volgende" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Plaats: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Stap 5 / 5</progress></p> <input type="submit" value="Einde"> </fieldset> </form>
Hier zijn drie dingen belangrijk:
• Elk fieldset-element krijgt een ID toegewezen.
• Alle fieldset-elementen worden ingesteld op display: none.
• De knoppen krijgen de functie naechsterSchritt(n) toegewezen.
De functie naechsterSchritt(n) ziet er als volgt uit:
<script>
/* <![CDATA[ */
function naechsterSchritt(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;
}
}
naechsterSchritt(1);
/* ]]> */
</script>
Deze functie toont het huidige fieldset-element en verbergt de andere fieldset-elementen. Let er zeker op dat je de functie achter de definitie van de velden plaatst. Voeg het dus het beste toe achter de sluitende </form>.
