Beispiel:Formular-18.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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;
	}
}
	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);
}
}
  </style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('#gewinnen');
    const inputs = form.querySelectorAll('input');
    const progress = document.querySelector('#fortschritt');
    const submitButton = form.querySelector('button[type="submit"]');
    
    // Set the max value of progress to the number of input elements
    const inputCount = inputs.length;
    progress.max = inputCount;
		
		form.addEventListener('change', updateProgress);
    
    // Function to update progress and check if all fields are filled
    function updateProgress() {
      let filledCount = 0;
      
      inputs.forEach(input => {
        if (input.value.trim() !== '') {
          filledCount++;
        }
      });
      
      progress.value = filledCount;
      
      // If all inputs are filled, enable the submit button
      if (filledCount === inputCount) {
        submitButton.disabled = false;
      } else {
        submitButton.disabled = true;
      }
    }
    
  });
	</script>
</head>

<body>
  <h1>Die Große SELFHTML Umfrage</h1>
<h2>Multistep-Formular in 5 Schritten</h2>
<form id="umfrage "> 
	<fieldset aria-current="step">
		<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>
	</fieldset>
	<fieldset disabled>
		<legend>Wie beurteilst du SELFHTML hinsichtlich ...</legend>
		
			<p for="comprehensibility">Verständlichkeit</p>		
		<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>

		<p for="completeness">Vollständigkeit</p>
		<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>
	</fieldset>
  <fieldset disabled> 
    <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>    
  </fieldset> 
				<fieldset disabled>
					<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)</p>

				</fieldset>  
    
  <fieldset>
  	<label for="fortschritt" >Fortschritt: </label>
    <progress id="fortschritt" value="0" max=""></progress>
    
    <button type="submit" disabled>Absenden</button>
  </fieldset>
</form> 
 
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Formular-18.html&oldid=98943“