9.1 Wichtige Formularereignisse
Um Formularfunktionalitäten zu gewährleisten, muss man die Ereignisse verstehen und verwalten können, die beim User-Interaktion mit Formularelementen auftreten. Unten betrachten wir genauer die wichtigsten Formularereignisse in HTML, deren Verarbeitung mit JavaScript und Beispiele ihrer Nutzung.
In HTML können Formulare verschiedene Ereignisse erzeugen, die bei der Interaktion des Benutzers mit Formularelementen wie Eingabefeldern, Buttons, Checkboxen und Radiobuttons auftreten. Die wichtigsten Formularereignisse umfassen:
- submit — Ereignis beim Absenden des Formulars
- reset — Ereignis beim Zurücksetzen des Formulars
- focus — Ereignis, wenn ein Element den Fokus erhält
- blur — Ereignis, wenn ein Element den Fokus verliert
- change — Ereignis bei Änderung des Wertes eines Formularelements
- input — Ereignis bei Dateneingabe in ein Formularelement
- select — Ereignis bei Textauswahl in einem Formularelement
9.2 Ereignis submit
Das Ereignis submit geschieht beim Absenden eines Formulars. Normalerweise, wenn der Benutzer den "Submit"-Button im Formular drückt. Die Verarbeitung dieses Ereignisses ermöglicht die Dateneingabevalidierung, bevor diese an den Server gesendet wird, verhindert das Absenden des Formulars bei Eingabefehlern und führt andere Aktionen aus.
Beispiel zur Verarbeitung des Ereignisses submit:
<form id="my-form" action="/submit" method="post">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">
<button type="submit">Absenden</button>
</form>
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Bitte gib einen Benutzernamen ein.');
event.preventDefault(); // verhindert das Absenden des Formulars
} else {
alert(`Benutzername erhalten: ${username}`);
event.preventDefault();
}
});
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Bitte gib einen Benutzernamen ein.');
event.preventDefault(); // verhindert das Absenden des Formulars
}
});
9.3 Ereignis reset
Das Ereignis reset tritt auf, wenn ein Formular auf seinen ursprünglichen Zustand zurückgesetzt wird. Normalerweise, wenn der Benutzer den "Reset"-Button drückt. Die Verarbeitung dieses Ereignisses kann nützlich sein, um zusätzliche Aktionen beim Zurücksetzen des Formulars auszuführen, wie das Löschen von Fehlermeldungen.
Beispiel zur Verarbeitung des Ereignisses reset:
<div style="min-height: 220px">
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Passwort:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button id="btn" type="button">Zurücksetzen</button>
</div>
</form>
<p id="log"></p>
</div>
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Passwort:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button type="reset">Zurücksetzen</button>
</div>
</form>
<p id="log"></p>
const form = document.getElementById('my-form');
const btn = document.getElementById('btn');
const n = document.getElementById('name');
const e = document.getElementById('email');
const p = document.getElementById('password');
const log = document.getElementById('log');
document.addEventListener('DOMContentLoaded', () => {
n.value = "John";
e.value = "john@mail.com";
p.value = "qwerty";
});
btn.addEventListener('click', () => {
n.value = "";
e.value = "";
p.value = "";
log.textContent = 'Formular wurde zurückgesetzt!';
});
const form = document.getElementById('my-form');
const log = document.getElementById('log');
form.addEventListener('reset', function () {
log.textContent = 'Formular wurde zurückgesetzt!';
});
9.4 Ereignisse focus und blur
Ereignisse focus und blur treten auf, wenn ein Formularelement den Fokus erhält und verliert. Diese Ereignisse werden häufig verwendet, um die Benutzerinteraktion mit einem Formular zu verbessern, beispielsweise um Hinweise oder Fehlermeldungen anzuzeigen.
Beispiel zur Verarbeitung des Ereignisses focus:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Diesen Hinweis siehst du, wenn das Feld fokussiert wird.
Es bleibt sichtbar, auch wenn der Fokus sich ändert.
</div>
</form>
</div>
<form id="my-form">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Diesen Hinweis siehst du, wenn das Feld fokussiert wird.
Es bleibt sichtbar, auch wenn der Fokus sich ändert.
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('focus', function (event) {
hint.style.display = 'block';
});
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
usernameInput.addEventListener('focus', function () {
hint.style.display = 'block';
});
Beispiel zur Verarbeitung des Ereignisses blur:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
Fehler erscheint nur, wenn das Feld leer bleibt, nachdem es den Fokus verloren hat
</div>
</form>
</div>
<form id="my-form">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
Fehler erscheint nur, wenn das Feld leer bleibt, nachdem es den Fokus verloren hat
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('blur', function (event) {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
usernameInput.addEventListener('blur', function () {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
9.5 Ereignis input
Das Ereignis input tritt auf, jedes Mal, wenn sich der Wert eines Formularelements ändert, unabhängig davon, ob das Element den Fokus verliert. Dieses Ereignis wird häufig verwendet, um die Benutzereingaben sofort zu überprüfen, z.B. bei der Echtzeitvalidierung von Eingabefeldern.
Beispiel zur Verarbeitung des Ereignisses input:
<html lang="de">
<head>
<style>
input {
outline: none;
}
.valid {
border-color: green;
}
.invalid {
border-color: red;
}
.wrapper-valid::after {
content: "Email gültig";
margin-left: 5px;
color: green;
}
.wrapper-invalid::after {
content: "Email ungültig";
margin-left: 5px;
color: red;
}
</style>
</head>
<body>
<form id="my-form">
<label for="email">Email:</label>
<div id="wrapper">
<input type="email" id="email" name="email">
</div>
</form>
</body>
</html>
const form = document.getElementById('my-form');
const inputWrapper = document.getElementById('wrapper');
const emailInput = document.getElementById('email');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
inputWrapper.classList.add('wrapper-valid');
inputWrapper.classList.remove('wrapper-invalid');
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
inputWrapper.classList.add('wrapper-invalid');
inputWrapper.classList.remove('wrapper-valid');
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
const emailInput = document.getElementById('email');
const inputWrapper = document.getElementById('wrapper');
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
9.6 Ereignis select
Das Ereignis select tritt auf, wenn der Benutzer Text in einem Formularelement, wie einem Eingabefeld oder Textfeld, auswählt. Dieses Ereignis kann nützlich sein, um Aktionen bei der Textauswahl auszuführen, z.B. um einen Kopier-Button anzuzeigen.
Beispiel zur Verarbeitung des Ereignisses select:
<div style="min-height: 55px">
<form id="my-form">
<label for="text-input">Text eingeben:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
</div>
<form id="my-form">
<label for="text-input">Text eingeben:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Du hast den Text ausgewählt!';
});
});
document.addEventListener('DOMContentLoaded', function () {
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Du hast den Text ausgewählt!';
});
});
9.7 Ereignis change
Das Ereignis change tritt auf, wenn sich der Wert eines Formularelements ändert und der Benutzer das Element verlässt (den Fokus verliert). Dieses Ereignis wird häufig verwendet, um Änderungen in Formularfeldern wie Dropdowns oder Checkboxen zu überprüfen.
Beispiel zur Verarbeitung des Ereignisses change:
<form id="my-form">
<label for="color-select">Farbe auswählen:</label>
<select id="color-select" name="color">
<option value="red">Rot</option>
<option value="green">Grün</option>
<option value="blue">Blau</option>
</select>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const selectElement = document.getElementById('color-select');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
selectElement.addEventListener('change', function () {
alert('Du hast die Farbe ausgewählt: ' + selectElement.value);
});
});
document.addEventListener('DOMContentLoaded', function () {
const selectElement = document.getElementById('color-select');
selectElement.addEventListener('change', function () {
alert('Du hast die Farbe ausgewählt: ' + selectElement.value);
});
});
GO TO FULL VERSION