Bei interaktiven Websites und Anwendungen müssen Benutzer häufig Formulare ausfüllen. Eines der wichtigsten Elemente eines Formulars ist ein Texteingabefeld oder ein Eingabefeld. Manchmal füllen Benutzer dieses Feld jedoch nicht aus, was zu Fehlern oder Fehlfunktionen des Systems führen kann.
Um solche Probleme zu vermeiden, können Sie das Eingabefeld zum Ausfüllen obligatorisch machen. Es gibt ein Attribut in HTML required, mit dem Sie angeben können, dass das Feld vor dem Senden des Formulars unbedingt ausgefüllt werden muss. Hier ist ein Beispiel:
In diesem Beispiel erstellen wir ein Textfeld mit einem Tag und geben ein Attribut an required. Jetzt lässt der Browser das Formular erst dann senden, wenn das Feld ausgefüllt ist.
In einigen Fällen unterstützen Browser das Attribut jedoch nicht required oder der Benutzer kann diese Überprüfung umgehen, indem er JavaScript deaktiviert. Es wird daher empfohlen, auch eine clientseitige Validierung mit JavaScript hinzuzufügen. Hier ist ein Beispiel für eine einfache Funktion, die überprüft, ob ein Feld ausgefüllt ist:
function validateForm() >Besucher Ihrer Website können das Formular jetzt erst einreichen, wenn sie das Feld "Benutzername" ausgefüllt haben.
Hinzufügen des Attributs "required" zu HTML
Um dem Formularelement ein Attribut "required" hinzuzufügen, fügen Sie es einfach in das entsprechende Tag ein. Zum Beispiel:
Ein Beispiel:
In diesem Beispiel fügen wir dem Textfeld das Attribut "required" hinzu. Dies bedeutet, dass der Benutzer dieses Feld ausfüllen muss, bevor das Formular gesendet wird, andernfalls wird das Formular nicht gesendet.
Anmerkung: Für andere Feldtypen, z. B. "email", "number" und "checkbox", kann auch ein obligatorisches Ausfüllen angegeben werden.
Feldpflicht-Symbole
Die folgende Tabelle enthält Beispiele für Symbole, mit denen Sie angeben können, ob ein Feld erforderlich ist:
Der Wert ist für die Auffüllung erforderlich
Das Feld muss ausgefüllt werden
Sie können Symbole neben einem Feld hinzufügen, indem Sie HTML-Entitäten oder Unicode-Zeichen verwenden.
Um beispielsweise ein 🚫-Symbol hinzuzufügen, um ein Pflichtfeld zu kennzeichnen, können Sie den folgenden Code verwenden:
Sie können auch Symbole anstelle von Textbeschreibungen neben dem Feld verwenden, um den Benutzer visuell ansprechender und verständlicher zu machen.
Durch die Verwendung von Symbolen für obligatorische Felder können Sie den Benutzern helfen, beim Ausfüllen eines Formulars schneller zu navigieren und die Anzahl der Fehler beim Senden von Daten zu reduzieren.
Überprüfen der Inputfüllung in JavaScript
JavaScript bietet uns die Möglichkeit zu überprüfen, ob die erforderliche Eingabe ausgefüllt ist, bevor das Formular gesendet wird. Dazu können wir die Eigenschaft required im Input-Tag verwenden.
Um eine Eingabe obligatorisch zu machen, müssen Sie dem Input-Tag das required-Attribut hinzufügen :
Wenn der Benutzer versucht, das Formular zu senden, prüft JavaScript automatisch, ob die erforderliche Eingabe ausgefüllt ist. Wenn die Eingabe leer bleibt, wird eine Fehlermeldung angezeigt, und das Formular wird nicht gesendet:
Sie können das required-Attribut verwenden, um das Formular unbedingt auszufüllen. Wenn der Benutzer das Feld leer lässt und versucht, das Formular zu senden, zeigt der Browser eine Warnung an, dass dieses Feld zum Ausfüllen erforderlich ist.
Sie können auch eine eigene Validierung hinzufügen, um ein Feld mit JavaScript zu füllen. Sie können beispielsweise eine Funktion schreiben, die überprüft, ob mindestens ein Zeichen im Input vorhanden ist, und wenn das Feld leer ist, wird dem Benutzer eine Warnung angezeigt.
function validateForm() >document.querySelector("form").onsubmit = validateForm;Das Hinzufügen einer Warnung, wenn ein Feld in einem Formular leer ist, kann daher mithilfe des Attributs required in HTML und/oder mithilfe der Validierung des Feldwerts in JavaScript implementiert werden.
Anpassung der Warnmeldung
Eine Möglichkeit, eine Warnmeldung anzupassen, besteht darin, ein Attribut zu verwenden required im Tag input. Zum Beispiel:
Wenn Sie also versuchen, ein Formular mit einem leeren Feld "username" zu senden, zeigt der Browser automatisch die Meldung "Bitte füllen Sie dieses Feld aus" an.
Wenn Sie jedoch den Text einer Warnmeldung ändern möchten, können Sie JavaScript verwenden. Der folgende Code ändert beispielsweise die Nachricht in "Dieses Feld muss ausgefüllt werden":
document.getElementById("username").setCustomValidity("Dieses Feld muss ausgefüllt werden");
In diesem Beispiel ist "username" der Wert des Attributs "id" für das entsprechende Element. Sie können den Text ändern und eine geeignete ID für Ihr Element auswählen.
Sie können der Warnmeldung auch eine Stilisierung hinzufügen, indem Sie CSS verwenden. Zum Beispiel:
In diesem Beispiel wird eine Warnmeldung in einem roten Rahmen angezeigt. Sie können verschiedene Stile anwenden, um zu betonen, wie wichtig es ist, die erforderlichen Felder auszufüllen.
Auf diese Weise können Sie die Warnmeldung so anpassen, dass sie Ihren Bedürfnissen und dem Stil Ihrer Website entspricht. Denken Sie daran, dass die Anpassung der Warnmeldung am besten unter Berücksichtigung der besten Praktiken und Anforderungen an die Verfügbarkeit erfolgt.
Hervorhebung von leeren Feldern
Um Inputs in HTML und JavaScript obligatorisch zu füllen, können Sie für leere Felder eine Stilisierung hinzufügen. Dadurch kann der Benutzer leichter erkennen, welche Felder ausgefüllt werden müssen, und das Formular wird verständlicher.
Sie können dazu die CSS-Pseudoklasse :required verwenden, die alle erforderlichen Felder auswählt. Anschließend können Sie die Hintergrundfarbe eines leeren Feldes mithilfe der CSS-Eigenschaft background-color so ändern, dass sie sich von den ausgefüllten Feldern unterscheidet.
In diesem Beispiel haben alle erforderlichen Felder einen hellroten Hintergrund. Wenn der Benutzer versucht, das Formular zu senden, ohne die erforderlichen Felder auszufüllen, werden diese Felder hervorgehoben, um den Fehler zu beheben.
Neben dem Ändern des Hintergrunds können Sie auch andere Methoden verwenden, um leere Felder hervorzuheben, z. B. die Farbe des Rahmens zu ändern oder ein Warnsymbol neben dem Feld hinzuzufügen. Alles hängt vom Design Ihrer Form und den Anforderungen an die Benutzererfahrung ab.
Wenn Sie ein Formular mit JavaScript validieren, können Sie auch eine Klasse mit den entsprechenden Stilen für die leeren Felder hinzufügen. Zum Beispiel:
In diesem Beispiel fügt die validateForm-Funktion dem leeren Feld die Klasse "required" hinzu, wenn sie die Validierung nicht bestanden hat. Sie können den Stil der "required" -Klasse in CSS definieren, um leere Felder hervorzuheben.
Auf diese Weise kann die Hervorhebung von leeren Feldern Benutzern helfen, die erforderlichen Felder im Formular leichter zu definieren und das Senden eines Formulars mit leeren Feldern zu verhindern.
Erforderliche Felder in HTML einfärben
HTML5 stellt integrierte Attribute bereit, um sicherzustellen, dass Formularfelder erforderlich sind. Es kann jedoch manchmal notwendig sein, diese Felder hervorzuheben und Benutzer visuell darauf hinzuweisen, dass sie erforderlich sind.
Um die erforderlichen Felder in HTML zu malen, können Sie Folgendes verwenden CSS. Erstellen Sie eine Klasse, die die gewünschten Stile für die Anzeige dieser Felder festlegen wird.
Beispiel für eine einfache Klasse zum Bemalen von Pflichtfeldern:
.required-field
In diesem Beispiel eine Klasse .required-field setzt die Hintergrundfarbe des Formfelds auf eine hellrosa Farbe und fügt einen roten Rahmen hinzu.
Um eine Klasse auf erforderliche Felder anzuwenden, müssen Sie diese Klasse mithilfe eines Attributs zu Formularelementen hinzufügen class.
Beispielcode zum Anwenden einer Klasse auf ein Eingabefeld:
In diesem Beispiel eine Klasse .required-field wird auf ein Eingabefeld angewendet, das über ein Attribut verfügt required, das das Feld zum Ausfüllen obligatorisch macht.
Also, wenn Sie eine Klasse verwenden .required-field , die erforderlichen Felder werden visuell hervorgehoben und die Benutzer können leicht feststellen, welche Felder ausgefüllt werden müssen.
