Beispiel:Formular-18.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">
<title>Formular 18 - Multistep-Formular</title>
<style>
form {
fieldset {
background: white;
display: grid;
grid-template-columns: 18em 8em;
padding: 1em;
max-width: 30em;
}
legend {
margin-top: 1em;
font-weight: bold;
background: gold;
border-top: thin solid #999;
}
label {
text-align:right;
margin-right: 0.5em;
}
label::after(not:[type=checkbox]) {
content: ": ";
}
input {
margin: 0 0 1em .5em;
padding: .2em .5em;
width: 100%;
background-color: #fffbf0;
border: thin solid #e7c157;
}
button {
margin-top: 1.5em;
margin-left: 30%;
width: fit-content;
}
}
[hidden=true] {
display:none;
}
select {margin-bottom: 0.5em; }
textarea {
grid-column: 1 / -1;
}
fieldset:disabled {
background-color: #ccc;
opacity: 1;
}
.rating {
display: flex;
width: 10em;
aspect-ratio: 5 / 1;
justify-content: center;
overflow: hidden;
flex-direction: row-reverse;
position: relative;
}
.rating > input { /* visually hidden */
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px) !important;
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
}
.rating > label {
cursor: pointer;
width: 5em;
aspect-ratio: 1 / 1;
margin-top: auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext font-size='100' y='88%25' stroke-linejoin='round' fill='none' stroke='darkorange' stroke-width='4'%3E★%3C/text%3E%3C/svg%3E");
transition: 0.3s;
}
.rating > input:checked ~ label,
.rating > input:checked ~ label ~ label {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext font-size='100' y='88%25' stroke-linejoin='round' fill='gold' stroke='darkorange' stroke-width='4'%3E★%3C/text%3E%3C/svg%3E");
}
.rating > input:not(:checked) ~ label:hover,
.rating > input:not(:checked) ~ label:hover ~ label {
scale: 1.1;
filter: drop-shadow(2px 2px 2px darkOrange);
}
body {
max-width: 50em;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Die Große SELFHTML Umfrage</h1>
<h2>Multistep-Formular in 5 Schritten</h2>
<form id="umfrage">
<fieldset>
<legend>Woher kennst du SELFHTML?</legend>
<label for="check1">Ergebnis aus einer Suchmaschine</label>
<input type="checkbox" name="where" value="seo" id="check1">
<label for="check2">vom Lehrer/Prof empfohlen</label>
<input type="checkbox" name="where" value="school" id="check2">
<label for="check3">Freunde und Familie</label>
<input type="checkbox" name="where" value="private" id="check3">
<label for="check4">Diskette auf dem Speicher gefunden</label>
<input type="checkbox" name="where" value="distractor" id="check4">
<label for="check5">weiß ich nicht</label>
<input type="checkbox" name="where" value="no" id="check5">
<p>Mehrfachnennungen möglich!</p>
<button id="jump-start">Weiter!</button>
</fieldset>
<fieldset>
<legend>Wie beurteilst du SELFHTML hinsichtlich ...</legend>
<label for="comprehensibility">Verständlichkeit</label>
<div class="rating">
<input type="radio" name="comprehensibility" id="rating-5">
<label for="rating-5"></label>
<input type="radio" name="comprehensibility" id="rating-4">
<label for="rating-4"></label>
<input type="radio" name="comprehensibility" id="rating-3">
<label for="rating-3"></label>
<input type="radio" name="comprehensibility" id="rating-2">
<label for="rating-2"></label>
<input type="radio" name="comprehensibility" id="rating-1">
<label for="rating-1"></label>
</div>
<label for="completeness">Vollständigkeit</label>
<div class="rating">
<input type="radio" name="completeness" id="rating-b5">
<label for="rating-b5"></label>
<input type="radio" name="completeness" id="rating-b4">
<label for="rating-b4"></label>
<input type="radio" name="completeness" id="rating-b3">
<label for="rating-b3"></label>
<input type="radio" name="completeness" id="rating-b2">
<label for="rating-b2"></label>
<input type="radio" name="completeness" id="rating-b1">
<label for="rating-b1"></label>
</div>
<label for="usefulness">Praxisbezug</label>
<div class="rating">
<input type="radio" name="usefulness" id="rating-c5">
<label for="rating-c5"></label>
<input type="radio" name="usefulness" id="rating-c4">
<label for="rating-c4"></label>
<input type="radio" name="usefulness" id="rating-c3">
<label for="rating-c3"></label>
<input type="radio" name="usefulness" id="rating-c2">
<label for="rating-c2"></label>
<input type="radio" name="usefulness" id="rating-c1">
<label for="rating-c1"></label>
</div>
<label for="layout">Layout</label>
<div class="rating">
<input type="radio" name="layout" id="rating-d5">
<label for="rating-d5"></label>
<input type="radio" name="layout" id="rating-d4">
<label for="rating-d4"></label>
<input type="radio" name="layout" id="rating-d3">
<label for="rating-d3"></label>
<input type="radio" name="layout" id="rating-d2">
<label for="rating-d2"></label>
<input type="radio" name="layout" id="rating-d1">
<label for="rating-d1"></label>
</div>
<button id="jump-rating">Weiter!</button>
</fieldset>
<fieldset id="feedback">
<legend>Feedback</legend>
<label for="feedback-form-textarea">Möchtest du uns etwas mitteilen? (optional)</label>
<textarea maxlength="4000" rows="10" id="feedback-form-textarea"></textarea>
<button id="jump-feedback">Weiter!</button>
</fieldset>
<fieldset id="personal">
<legend>Angaben zur Person</legend>
<label for="age">Alter</label>
<select id="age" name="age">
<option value="">bitte wählen</option>
<option value="10">bis 10 Jahre alt</option>
<option value="20">bis 20 Jahre alt</option>
<option value="30">bis 30 Jahre alt</option>
<option value="40">bis 40 Jahre alt</option>
<option value="41">über 40 Jahre alt</option>
</select>
<label for="gender">Geschlecht</label>
<select id="gender" name="gender">
<option value="">bitte wählen</option>
<option value="female">weiblich</option>
<option value="male">männlich</option>
<option value="other">etwas anderes</option>
</select>
<label for="education">Bildungsstand</label>
<select id="education" name="education">
<option value="">bitte wählen</option>
<option value="primary">nur Grundschulbildung</option>
<option value="secondary">mittlere Reife</option>
<option value="a-level">Abitur</option>
<option value="study">Studium</option>
</select>
<label for="email">E-Mail</label>
<input id="email" name="email" placeholder="ich@example.org" type="email">
<p>(wird ausschließlich dazu verwendet, Mehrfachnutzungen zu verhindern - Du erhältst eine Bestätigungsmail)<br>
<button id="jump-personal">Weiter!</button> </p>
</fieldset>
<fieldset id="progress">
<label for="fortschritt" >Fortschritt: </label>
<progress id="fortschritt" value="0" max=""></progress>
<button type="submit" disabled>Absenden</button>
</fieldset>
</form>
<p>Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/Formulare/Benutzereingaben_zug%C3%A4nglich_gestalten">Formulare - Benutzereingaben zugänglich gestalten</a>.</p>
<a href="https://forum.selfhtml.org/advent/2024"><div style="display:grid;grid-template-columns: 63px 1fr; gap:0.5em;"><img src="https://wiki.selfhtml.org/images/a/ad/Selfhtml-nico.png" alt="SELFHTML-Logo mit Adventsmütze" width="63px"><p>Zurück zum <br><b>Adventskalender 2024</b>.</p></div></a>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('#umfrage');
const fieldsets = form.querySelectorAll('fieldset');
const progress = document.querySelector('#fortschritt');
const submitButton = form.querySelector('button[type="submit"]');
// Function to hide all fieldsets except the last one and show the first fieldset
function initializeForm() {
fieldsets.forEach((fieldset, index) => { console.log(fieldsets);console.log(fieldsets.length);
if (index < fieldsets.length - 1) {
fieldset.setAttribute('hidden', 'true');
}
});
const firstFieldset = fieldsets[0];
firstFieldset.removeAttribute('hidden');
firstFieldset.setAttribute('aria-current', 'step');
}
function updateProgress() {
const currentStep = form.querySelector('[aria-current="step"]');
const currentIndex = Array.from(fieldsets).indexOf(currentStep);
const totalSteps = fieldsets.length - 1; // Exclude the progress fieldset
progress.value = currentIndex;
progress.max = totalSteps;
if (currentIndex === totalSteps) {
submitButton.removeAttribute('disabled');
} else {
submitButton.setAttribute('disabled', 'true');
}
}
function handleWeiterButtonClick(event) {
event.preventDefault();
const currentFieldset = event.target.closest('fieldset');
const nextFieldset = currentFieldset.nextElementSibling;
// Check for required fields in the current fieldset
const requiredFields = currentFieldset.querySelectorAll('[required]');
let allFilled = true;
requiredFields.forEach(field => {
if (field.value.trim() === '' && !(field.type === 'checkbox' && field.checked)) {
allFilled = false;
}
});
if (!allFilled) {
alert('Bitte füllen Sie alle erforderlichen Felder aus.');
return;
}
// Hide the current fieldset and show the next one
currentFieldset.setAttribute('hidden', 'true');
nextFieldset.removeAttribute('hidden');
// Update the aria-current attribute
const currentStep = form.querySelector('[aria-current="step"]');
currentStep.removeAttribute('aria-current');
nextFieldset.setAttribute('aria-current', 'step');
const stepCount = fieldsets.length;
let filledCount = 0;
updateProgress();
}
form.addEventListener('change', updateProgress);
const weiterButtons = form.querySelectorAll('button[id^="jump-"]');
weiterButtons.forEach(button => {
button.addEventListener('click', handleWeiterButtonClick);
});
initializeForm();
});
</script>
</body>
</html>
