Beispiel:HTML progress-Element.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" > <title>Fortschrittsanzeige</title> <style>
label { display: block; width: 25em; padding: .2em; text-align: right;} label > * {width: 150px; margin: 0; padding: 0;}
</style> <script>
function aktualisiere_progressbar() {
var anteil = 0;
for (var k = 0; k < document.forms[0].elements.length; k++) { if (document.forms[0].elements[k].value != ) anteil++; }
document.getElementById('fortschritt').value = anteil;
} </script> </head> <body>
Fortschrittsanzeige mit dem progress-Element
Ein kleines Formular in 3 Schritten
<form>
<label>Name: <input type="text" onchange="aktualisiere_progressbar()"> </label> <label>Vorname: <input type="text" onchange="aktualisiere_progressbar()"> </label> <label>Wohnort: <input type="text" onchange="aktualisiere_progressbar()"> </label>
<label>Fortschritt:
<progress id="fortschritt" value="0" max="3"></progress> </label>
</form>
</body> </html>
