Warum eigentlich mehrere Seiten? Das birgt nur weitere Herausforderungen. Und eine reicht.
Zudem sind Deine Fragen nicht eine, sondern mehrere.
Also denke ich, es ist eine gute Idee, Dir ein paar Möglichkeiten zu zeigen und Dich aufzufordern das durchzuprobieren und Dich aufzufordern zu fragen, wenn Du mit dem Anschubser nicht klarkommst:
<!doctype html>
<html lang='de'>
<head>
<meta charset='utf-8'>
<style type='text/css'>
form { display:none; }
label { display: inline-block; width: 8em; }
</style>
</head>
<body>
<h1>Tolle Berechnung</h1>
<noscript>
Leider funktioniert diese Berechnung nur mit Javascript.
</noscript>
<form id='f_spannart' name='f_spannart' onsubmit='return false;'>
<h2>Spannart:</h2>
<input type='radio' name='spannart' value='einseitig' checked>einseitig</input>
<br><input type='radio' name='spannart' value='zweiseitig'>einseitig</input>
<br><button onclick='spannart_selected()'>Weiter</button>
</form>
<form id='f_profil' name='f_profil' onsubmit='return false;'>
<h2>Profil:</h2>
<input type='radio' name='profil' value='Rund' checked>Rund</input>
<br><input type='radio' name='profil' value='4Kant'>4-Kant</input>
<br><input type='radio' name='profil' value='I'>I-Profil</input>
<br><button onclick='profil_selected()'>Weiter</button>
<button onclick='berechnung_restart()'>Restart</button>
</form>
<form id='f_masze' name='f_masze' onsubmit='return false;'>
<h2>Maße:</h2>
<label for='durchmesser'>Durchmesser:</label>
<input type='number' min=0 step="any" name='durchmesser' value='0'>
<br><label for='hoehe'>Höhe:</label>
<input type='number' name='hoehe' min=0 step="any" value='0'>
<br><label for='breite'>Breite:</label>
<input type='number' name='breite' min=0 step="any" value='0'>
<br><button onclick='berechne()'>Weiter</button>
<button onclick='berechnung_restart()'>Restart</button>
</form>
<script>
function berechnung_restart () {
document.forms['f_profil'].style.display='none';
document.forms['f_masze'].style.display='none';
document.forms['f_spannart'].style.display='block';
}
function spannart_selected() {
spannart=document.forms['f_spannart'].elements['spannart'].value;
document.getElementById('f_spannart').style.display='none';
document.getElementById('f_profil').style.display='block';
}
function profil_selected() {
spannart=document.forms['f_profil'].elements['profil'].value;
if ( profil=='Rund' ) {
document.forms['f_masze'].elements['durchmesser'].value=0;
document.forms['f_masze'].elements['durchmesser'].disabled=false;
document.forms['f_masze'].elements['breite'].value='';
document.forms['f_masze'].elements['breite'].disabled=true;
document.forms['f_masze'].elements['hoehe'].value='';
document.forms['f_masze'].elements['hoehe'].disabled=true;
} else {
document.forms['f_masze'].elements['durchmesser'].value='';
document.forms['f_masze'].elements['durchmesser'].disabled=true;
document.forms['f_masze'].elements['breite'].value=0;
document.forms['f_masze'].elements['breite'].disabled=false;
document.forms['f_masze'].elements['hoehe'].value=0;
document.forms['f_masze'].elements['hoehe'].disabled=false;
}
document.getElementById('f_profil').style.display='none';
document.getElementById('f_masze').style.display='block';
}
function berechne() {
alert('Das ist jetzt Dein Job...');
}
var spannart='';
var profil='';
berechnung_restart();
</script>
</body>
<html>