JavaScript-Formulare im DOM
Formulare sind grundlegende Bestandteile von Webanwendungen, die Benutzerinteraktionen und Datenerfassung ermöglichen. Dieser Leitfaden hilft Ihnen zu verstehen, wie Sie Formularelemente zugreifen, Eingabewerte abrufen und festlegen, Formularereignisse verarbeiten und Formulare validieren können.
Zugriff auf Formularelemente
Formularelemente auswählen
Formularelemente können mit verschiedenen Methoden wie getElementById, getElementsByName, getElementsByTagName und querySelector ausgewählt werden.
<!DOCTYPE html>
<html>
<head>
<title>Selecting Form Elements</title>
</head>
<body>
<h4>Fill the form inputs, and press 'Show Input Values' button.</h4>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="email" id="email" name="email" placeholder="Email" />
</form>
<button id="showInputs">Show Input Values</button>
<script>
// Select elements by ID
const username = document.getElementById('username');
const email = document.getElementById('email');
const showInputsButton = document.getElementById('showInputs');
// Using querySelector for selection
const emailByQuery = document.querySelector('#email');
showInputsButton.addEventListener('click', () => {
alert(`Username: ${username.value}, Email: ${emailByQuery.value}`);
});
</script>
</body>
</html>Dieses Beispiel zeigt, wie Formularelemente mit verschiedenen Methoden ausgewählt und deren Werte angezeigt werden, wenn auf die Schaltfläche „Eingabewerte anzeigen“ geklickt wird.
Eingabewerte abrufen und festlegen
Zugreifen auf und Ändern von Eingabewerten
Eingabewerte können über die Eigenschaft value abgerufen und geändert werden.
<!DOCTYPE html>
<html>
<head>
<title>Getting and Setting Input Values</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="email" id="email" name="email" placeholder="Email" />
<button type="button" id="showValues">Show Values</button>
<button type="button" id="setValues">Set New Values</button>
</form>
<script>
const username = document.getElementById('username');
const email = document.getElementById('email');
const showValuesButton = document.getElementById('showValues');
const setValuesButton = document.getElementById('setValues');
showValuesButton.addEventListener('click', () => {
alert(`Username: ${username.value}\nEmail: ${email.value}`);
});
setValuesButton.addEventListener('click', () => {
username.value = 'newUsername';
email.value = '[email protected]';
alert('Values have been set to new values.');
});
</script>
</body>
</html>Dieses Beispiel zeigt, wie die Werte von Eingabefeldern abgerufen und festgelegt werden. Ein Klick auf „Werte anzeigen“ zeigt die aktuellen Eingabewerte an, und „Neue Werte festlegen“ ändert sie und zeigt einen Bestätigungsdialog an.
Formularereignisse
Verarbeiten der Formularübermittlung mit Submit- und Reset-Ereignissen
Formulare können Ereignisse wie submit und reset auslösen, die verarbeitet werden können, um Aktionen wie Validierung oder Datenverarbeitung durchzuführen.
<!DOCTYPE html>
<html>
<head>
<title>Form Events</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="email" id="email" name="email" placeholder="Email" />
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
<script>
const form = document.getElementById('userForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
alert('Form submitted!');
// Perform form validation or data processing here
});
form.addEventListener('reset', () => {
alert('Form reset!');
});
</script>
</body>
</html>Dieses Beispiel zeigt, wie die submit- und reset-Ereignisse eines Formulars verarbeitet werden, um Aktionen wie das Unterbinden des Standardverhaltens, die Validierung und die Datenverarbeitung durchzuführen.
Verarbeiten von Echtzeit-Benutzerinteraktionen
Zusätzlich zu submit und reset verwenden Formulare häufig input, change, focus und blur Ereignisse, um in Echtzeit auf Benutzerinteraktionen zu reagieren. Das input-Ereignis wird sofort ausgelöst, während der Benutzer tippt, während change ausgelöst wird, wenn das Element den Fokus verliert, nachdem sich sein Wert geändert hat.
<script>
const inputField = document.getElementById('username');
inputField.addEventListener('input', (e) => {
console.log('User is typing:', e.target.value);
});
inputField.addEventListener('change', (e) => {
console.log('Value changed:', e.target.value);
});
</script>Validierung und Unterbinden des Standardverhaltens
Validieren von Formulardaten
Eine clientseitige Validierung kann durchgeführt werden, um die Datenkorrektheit vor der Formularübermittlung sicherzustellen.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username" required />
<input type="email" id="email" name="email" placeholder="Email" required />
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('userForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
if (!username || !email) {
alert('Please fill in all fields.');
return;
}
// Modern approach: use checkValidity() for built-in validation
if (!form.checkValidity()) {
form.reportValidity();
return;
}
// Fallback/custom regex validation if needed
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert('Please enter a valid email address.');
return;
}
alert('Form submitted successfully!');
});
</script>
</body>
</html>Dieses Beispiel demonstriert die clientseitige Formularvalidierung, einschließlich erforderlicher Felder und der Validierung des E-Mail-Formats, sowie das Unterbinden der Formularübermittlung bei einem Validierungsfehler.
INFO
Verwenden Sie querySelector und querySelectorAll für eine effiziente Auswahl von Formularelementen und validieren Sie Eingabewerte vor der Formularübermittlung immer, um die Datenintegrität und ein nahtloses Benutzererlebnis zu gewährleisten.
WARNING
Die clientseitige Validierung verbessert das Benutzererlebnis, ersetzt jedoch nicht die serverseitige Validierung. Validieren und bereinigen Sie Daten immer auch auf Ihrer Backend-Seite.
Fazit
Die Arbeit mit Formularen in JavaScript umfasst das Zugreifen auf Formularelemente, das Abrufen und Festlegen von Eingabewerten, das Verarbeiten von Formularereignissen und das Validieren von Formulardaten. Durch das Beherrschen dieser Techniken können Sie dynamische und reaktionsschnelle Webformulare erstellen, die die Benutzerinteraktion und Datenerfassung verbessern.
Practice
Welche der folgenden Aussagen zur Verarbeitung von Formularen in JavaScript sind wahr?