JavaScript-Formulare im DOM
Formulare sind grundlegende Komponenten von Webanwendungen. Diese Anleitung erklärt, wie man Formularelemente auswählt, Werte liest und schreibt sowie Formulardaten validiert.
Formulare sind grundlegende Komponenten von Webanwendungen, die Benutzerinteraktion und Datenerfassung ermöglichen. Diese Anleitung behandelt die praktischen DOM-Kenntnisse, die Sie für die Arbeit mit ihnen benötigen: Zugriff auf Formular- und Eingabeelemente, Lesen und Schreiben von Feldwerten, gleichzeitiges Erfassen aller Daten mit FormData, Reagieren auf Formularereignisse und Validieren von Benutzereingaben vor dem Absenden.
Wenn Sie neu im DOM sind, beginnen Sie mit DOM-Elemente auswählen und Einführung in Browser-Ereignisse und kehren Sie dann hierher zurück.
Zugriff auf Formularelemente
Formularelemente auswählen
Sie können Formularelemente mit denselben DOM-Methoden erreichen, die Sie für jeden Knoten verwenden: getElementById, getElementsByName, getElementsByTagName sowie querySelector / querySelectorAll. In den meisten Fällen bevorzugen Sie getElementById (am schnellsten, wenn Sie das Markup kontrollieren) oder querySelector (am flexibelsten, unterstützt jeden CSS-Selektor).
<!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 ihre Werte in einer Meldung angezeigt werden, wenn die Schaltfläche "Show Input Values" angeklickt wird.
Die document.forms-Sammlung verwenden
Jedes Formular auf einer Seite ist auch über die integrierte document.forms-Sammlung verfügbar, und jedes benannte Feld innerhalb eines Formulars ist als Eigenschaft dieses Formulars erreichbar. Dies ist oft die prägnanteste Möglichkeit, Werte zu lesen, ohne für jedes Feld getElementById aufzurufen.
// <form name="userForm">
// <input name="username">
// <input name="email">
// </form>
const form = document.forms.userForm; // or document.forms[0]
console.log(form.username.value); // value of the username field
console.log(form.elements['email'].value); // same via the elements collectionDie form.elements-Sammlung enthält alle Steuerelemente (Eingaben, Auswahllisten, Textbereiche, Schaltflächen), die zum Formular gehören, indiziert nach Position und name. Eine vollständige Liste finden Sie unter Formulareigenschaften und -methoden.
Eingabewerte lesen und setzen
Auf Eingabewerte zugreifen und sie ändern
Auf Eingabewerte kann über die value-Eigenschaft zugegriffen und diese 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 gelesen und gesetzt werden. Ein Klick auf "Show Values" zeigt die aktuellen Eingabewerte an, und "Set New Values" ändert sie und zeigt eine Bestätigungsmeldung an.
Formularereignisse
Formularübermittlung mit Submit- und Reset-Ereignissen verarbeiten
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 Verhindern des Standardverhaltens, Validierung und Datenverarbeitung durchzuführen.
Benutzerinteraktionen in Echtzeit verarbeiten
Neben submit und reset verwenden Formulare häufig die Ereignisse input, change, focus und blur, 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. Einen tieferen Einblick finden Sie unter Ereignisse: change, input, cut, copy, paste.
<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>Alle Formulardaten mit FormData erfassen
Das manuelle Lesen jedes Feldes ist für zwei Eingaben in Ordnung, aber bei größeren Formularen ermöglicht das FormData-Objekt, alle benannten Steuerelemente auf einmal zu erfassen. Es ist auch die Standardmethode, um Daten für fetch-Anfragen zu verpacken.
const form = document.getElementById('userForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(form);
// Read a single field
console.log(formData.get('username'));
// Iterate over every name/value pair
for (const [name, value] of formData.entries()) {
console.log(`${name}: ${value}`);
}
// Convert to a plain object (handy for JSON APIs)
const data = Object.fromEntries(formData.entries());
console.log(data); // { username: '...', email: '...' }
// Send it to a server
// fetch('/api/users', { method: 'POST', body: formData });
});Nur Steuerelemente mit einem name-Attribut werden einbezogen, was widerspiegelt, wie ein Browser ein Formular nativ übermittelt.
Validierung und Verhindern des Standardverhaltens
Formulardaten validieren
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 Pflichtfelder und E-Mail-Format-Validierung, sowie das Verhindern der Formularübermittlung bei fehlgeschlagener Validierung.
Verwenden Sie querySelector und querySelectorAll für eine effiziente Auswahl von Formularelementen, und validieren Sie Eingabewerte immer vor der Formularübermittlung, um Datenintegrität und eine reibungslose Benutzererfahrung sicherzustellen.
Clientseitige Validierung verbessert die Benutzererfahrung, ist aber kein Ersatz für serverseitige Validierung. Validieren und bereinigen Sie Daten immer auch im Backend.
Fazit
Die Arbeit mit Formularen in JavaScript umfasst den Zugriff auf Formularelemente, das Lesen und Setzen von Eingabewerten, das Erfassen von Daten mit FormData, die Verarbeitung von Formularereignissen und die Validierung von Formulardaten. Durch die Beherrschung dieser Techniken können Sie dynamische und reaktionsschnelle Webformulare erstellen, die Benutzerinteraktion und Datenerfassung verbessern. Um tiefer einzutauchen, erkunden Sie Formulare: Ereignis und Methode submit und Formulareigenschaften und -methoden.