<!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>

Die Große SELFHTML Umfrage

Multistep-Formular in 5 Schritten

<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">

Mehrfachnennungen möglich!

   <button id="jump-start">Weiter!</button>

</fieldset>

<fieldset> <legend>Wie beurteilst du SELFHTML hinsichtlich ...</legend>

<label for="comprehensibility">Verständlichkeit</label>

     <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>

<label for="completeness">Vollständigkeit</label>

     <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>

<label for="usefulness">Praxisbezug</label>

     <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>

<label for="layout">Layout</label>

     <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>

       <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>

   <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>

(wird ausschließlich dazu verwendet, Mehrfachnutzungen zu verhindern - Du erhältst eine Bestätigungsmail)
<button id="jump-personal">Weiter!</button>

</fieldset>

 <fieldset id="progress">
 	<label for="fortschritt" >Fortschritt: </label>
   <progress id="fortschritt" value="0" max=""></progress>
   
   <button type="submit" disabled>Absenden</button>
 </fieldset>

</form>

Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/Formulare/Benutzereingaben_zug%C3%A4nglich_gestalten">Formulare - Benutzereingaben zugänglich gestalten</a>.

Zurück zum
Adventskalender 2024.

</a>

 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>

Beispiel:Formular-18.html

Die Große SELFHTML Umfrage

Multistep-Formular in 5 Schritten

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Starten

Werkzeuge

Mitmachen

SELFHTML