Beispielformular (Abschnitt 13.1.2 Werte von Eingabefeldern lesen und schreiben)

Quelltext zum Beispiel, das die Eingaben in die Formularfelder »zurückwirft«. Bei der Entwicklung eines Skripts hilft das Anzeigen der Benutzereingaben beim Zusammenstellen der Prüfungen.

<form action="formhandler.php" method="post">
   <div class="test"></div>
   
   <input type="text" id="username" name="username" placeholder="Benutzername">

   Ort <select name="ort">
      <option value="ms" selected>Münster</option>
      <option value="bb">Böblingen</option>
      <option value="m">München</option>
   </select>

   Bemerkung <textarea id="bemerkung" name="bemerkung"></textarea>

   <input type="radio" value="gelb" name="choice"> Gelb
   <input type="radio" value="blau" name="choice"> Blau
   <input type="checkbox" name="agb" id="agb" checked> AGB gelesen

   <button class="btn" type="submit" id="senden">Absenden</button>
</form>
const inputUsername = document.querySelector("#username");
const ortSelection = document.querySelector("#ort");
const text = document.querySelector("#bemerkung");
const checkbox = document.querySelector("#agb");
const radio = document.getElementsByName("choice");

function checkInput(evt) {
   document.querySelector(".test").innerText = evt.target.value;
}

inputUsername.addEventListener("input", checkInput);
ortSelection.addEventListener("input", checkInput);
text.addEventListener("input", checkInput);

function isChecked(evt) {
   document.querySelector(".test").innerText = evt.target.checked;
}

checkbox.addEventListener("input", isChecked);

function radioValue(evt) {
   document.querySelector(".test").innerText = evt.target.value;
}

for (const item of radio) {
   item.addEventListener("click", radioValue);
}

inputUsername.addEventListener("focus", function() {
   this.style.cssText = "outline: 1px solid green";
});

inputUsername.addEventListener("blur", function() {
   this.style.cssText = "outline: none";
});