Input ist eines der Hauptelemente von HTML-Formularen, das dem Benutzer die Möglichkeit gibt, Informationen einzugeben. Mit input können Sie Textfelder, Checkboxen, Radioknöpfe, Dropdown-Listen und vieles mehr erstellen. Außerdem unterstützt dieses Element verschiedene Attribute, mit denen Sie sein Verhalten und Aussehen anpassen können.
Eine der Hauptfunktionen von input ist die Texteingabe. Dazu wird das type-Attribut mit dem Wert text verwendet. Der Benutzer kann einen beliebigen Text in das Feld eingeben, und der Browser sendet den eingegebenen Wert beim Senden des Formulars an den Server. Sie können jedoch bei Bedarf mögliche Zeichen mithilfe des Attributs maxlength einschränken oder ein Muster verwenden, um zu überprüfen, ob die Eingabe korrekt ist.
Mit Input können Sie auch Checkboxen und Radioknöpfe erstellen, um eine oder mehrere Optionen aus den vorgeschlagenen Optionen auszuwählen. Dazu werden die type-Attribute mit den Werten checkbox (für Checkbox) und radio (für Radioknopf) verwendet. Mit dem name-Attribut können Sie Elemente gruppieren und eine gemeinsame ID angeben, sodass Sie nur eine Option innerhalb derselben Gruppe auswählen können.
Wichtig ist, dass input viele andere Funktionen und Funktionen hat, wie das Erstellen einer Dropdown-Liste (type-Attribut mit select-Wert), das Eingeben von Datum und Uhrzeit (type-Attribut mit date-, time-Werten usw.), das Laden von Dateien (type-Attribut mit file-Wert) und vieles mehr. Mit diesen Funktionen ist input eines der wichtigsten und am weitesten verbreiteten Elemente von HTML-Formularen.
Input: Die wichtigsten Funktionen und Funktionen des Elements
Grundlegende Elementattribute :
- type: gibt den Typ des Eingabefeldes an. Einige der am häufigsten verwendeten Typen sind "text" (Textfeld), "number" (Zahlenfeld), "email" (E-Mail-Adressfeld) und "password" (Passwort-Feld).
- name: gibt den Namen des Eingabefeldes an, das auf dem Server zur Identifizierung der eingegebenen Daten verwendet werden soll.
- value: gibt den Standardwert für das Eingabefeld an. Wenn nicht angegeben, ist das Feld leer.
- placeholder: zeigt den Quickinfo-Text an, der beim Fokussieren auf das Eingabefeld ausgeblendet wird.
- required: gibt an, dass das Eingabefeld vor dem Senden des Formulars ausgefüllt werden muss.
Zusätzlich zu den angegebenen Attributen kann ein Element je nach Typ auch andere Attribute aufweisen, z. B. "min" und "max" für numerische Felder oder "pattern" für Felder mit einem bestimmten Eingabemuster.
Ein Element kann auch mehrere mögliche Werte haben, wenn das Attribut "type" mit den Werten "radio" oder "checkbox" verwendet wird. Dadurch kann der Benutzer einen oder mehrere Werte aus den bereitgestellten Optionen auswählen.
Zusätzlich zu den grundlegenden Attributen und Typen kann das Element auch mit CSS gestylt werden, um dem Design der Seite zu entsprechen.
Input-Typen und ihre Merkmale
In HTML stehen verschiedene Input-Typen zur Verfügung, von denen jeder seine eigene Besonderheit hat und für eine bestimmte Art von Eingabe bestimmt ist. Betrachten Sie einige der gebräuchlichsten Typen:
- Textfeld (type="text") ist der einfachste input-Typ, der es dem Benutzer ermöglicht, beliebigen Text einzugeben. Wird als einzeiliges Feld angezeigt, in dem nur Text eingegeben werden kann.
- Passwort (type="password") - ähnelt einem Textfeld, verbirgt jedoch den vom Benutzer eingegebenen Text unter Sternchen oder Punktsymbolen. Wird verwendet, um ein Passwort oder andere vertrauliche Informationen einzugeben.
- Radio-Taste (type="radio") - ist ein Schalter, der es dem Benutzer ermöglicht, eine von mehreren Antwortoptionen auszuwählen. Die Radioknöpfe werden mit dem name-Attribut gruppiert, und es kann nur ein Radioknopf aus der Gruppe ausgewählt werden.
- Fähnchen (type="checkbox") - stellt ein separates Häkchen dar, das der Benutzer einstellen oder deaktivieren kann. Wird verwendet, um die Zustimmung des Benutzers zu erhalten oder mehrere Antwortmöglichkeiten auszuwählen.
- Dateiauswahlfeld (type="file") - Ermöglicht dem Benutzer, eine Datei auszuwählen, die auf den Server hochgeladen werden soll. Wird als Schaltfläche "Durchsuchen" angezeigt, auf die der Benutzer klickt, um ein Dialogfeld zur Dateiauswahl zu öffnen.
- Schaltfläche zum Senden eines Formulars (type="submit") - Ermöglicht es dem Benutzer, Formulardaten an den Server zu senden. Wird normalerweise als Schaltfläche mit der Aufschrift "Senden" angezeigt.
Neben den oben aufgeführten Input-Typen gibt es noch viele weitere, wie Datum, Uhrzeit, Zahl, Farbe usw., die jeweils eine einzigartige Funktionalität für die Eingabe bestimmter Datentypen bieten. Bei der Verwendung jedes Typs ist es wichtig, die korrekte Verwendung und Einstellungen zu überwachen, um eine korrekte und bequeme Benutzerinteraktion mit dem Formular zu gewährleisten.
Input-Attribute und ihre Verwendung
| Attribut | Die Beschreibung | Ein Beispiel |
|---|---|---|
| type | Gibt den Typ des input-Elements an. | type="text" (Textfeld) |
| name | Legt den Namen des Eingabefeldes fest, das an den Server gesendet wird. | name="username" |
| value | Legt den Anfangswert des Eingabefeldes fest. | value="John Doe" |
| placeholder | Zeigt eine Eingabeaufforderung im Eingabefeld an, bis die Daten eingegeben wurden. | placeholder="Geben Sie Ihren Namen ein" |
| required | Erfordert, dass der Benutzer das Eingabefeld ausfüllen muss, bevor das Formular eingereicht wird. | required |
| disabled | Sperrt das Eingabefeld und verhindert so, dass es bearbeitet wird. | disabled |
| readonly | Erlaubt nur das Lesen des Eingabefelds, aber nicht das Bearbeiten des Eingabefelds. | readonly |
| maxlength | Legt die maximale Anzahl von Zeichen fest, die in das Feld eingegeben werden können. | maxlength="10" |
Dies sind nur einige Beispiele für Input-Attribute, mit denen Sie das Verhalten und Aussehen eines input-Elements anpassen können. Wenn Sie diese Attribute kennen und richtig verwenden, können Sie interaktive Webformulare für Ihre Benutzer erstellen.
Formatieren von Text im Eingabefeld
Mit dem input-Element können Benutzer Text in ein bestimmtes Feld eingeben. Neben der Möglichkeit, Nur-Text einzugeben, unterstützt das Input-Feld auch die Textformatierung, damit Benutzer das Erscheinungsbild ihrer Eingabe ändern können. Hier sind einige Möglichkeiten, den Text in einem Eingabefeld zu formatieren:
1. Fetthaltiger Text: Um den Text im Eingabefeld als fett zu formatieren, verwenden Sie ein Tag . Um beispielsweise das Wort "Hallo" fett zu machen, können Sie den folgenden Code verwenden:
2. Kursiver Text: Um den Text im Eingabefeld als kursiv zu formatieren, verwenden Sie ein Tag . Um beispielsweise das Wort "Hallo" kursiv zu machen, können Sie den folgenden Code verwenden:
3. Kombinierter Text: Eine Kombination aus fettem und kursivem Text im Eingabefeld ist ebenfalls möglich. Verwenden Sie beide Tags und für die Formatierung. Um beispielsweise das Wort "Hallo" fett und kursiv zu machen, können Sie den folgenden Code verwenden:
Dies sind nur einige der Möglichkeiten, den Text im Eingabefeld zu formatieren. Mit CSS- und JavaScript-Stilen können Sie auch eine erweiterte Formatierung bereitstellen. Denken Sie daran, dass die Formatierung des Textes im Eingabefeld je nach Browser und den Betriebssystemeinstellungen des Benutzers variieren kann.
Einschränken der Eingabe von Daten im Feld input
Das input-Element ermöglicht es dem Benutzer, Daten über die Tastatur einzugeben. Manchmal ist es jedoch erforderlich, den Typ oder das Format der eingegebenen Daten einzuschränken.
In HTML5 gibt es dafür mehrere Attribute, mit denen Sie Einschränkungen für die Dateneingabe festlegen können:
- required - gibt an, dass das Feld vor dem Senden des Formulars ausgefüllt werden muss;
- maxlength - legt die maximale Anzahl von Zeichen fest, die eingegeben werden können;
- minlength - gibt die minimale Anzahl von Zeichen an, die eingegeben werden sollen;
- pattern - legt die Vorlage fest, der der eingegebene Text entsprechen soll;
- type - hier können Sie den Datentyp angeben, der in das Feld eingegeben werden kann (z. B. E-Mail, Nummer, Datum usw.);
- step - Gibt den Schritt an, mit dem sich der Wert im Feld ändert (für Felder vom Typ number).
Diese Attribute können zusammen oder separat verwendet werden, um die Dateneingabe einzuschränken. Beispielsweise können Sie für das Eingabefeld E-Mail die Attribute type="email" und required verwenden, um sicherzustellen, dass der Benutzer eine gültige E-Mail-Adresse eingibt und das Feld nicht leer lässt.
Sie können auch JavaScript verwenden, um die eingegebenen Daten zu überprüfen. Beispielsweise können Sie das input-Ereignis verwenden, um Änderungen an einem Wert in einem Feld zu verfolgen und zu überprüfen, ob er mit bestimmten Bedingungen übereinstimmt. Wenn die Daten nicht den erforderlichen Bedingungen entsprechen, können Sie eine Fehlermeldung anzeigen oder das Senden des Formulars verhindern.
Durch die Einschränkung der Eingabe im Feld input können Sie die Benutzererfahrung verbessern, fehlerhafte Daten vermeiden und die Verarbeitung von Informationen schützen.
Validierung der Daten im Feld input
Das input-Element in HTML ermöglicht es dem Benutzer, Daten über die Tastatur einzugeben. Manchmal müssen Sie jedoch die eingegebenen Werte kontrollieren und sicherstellen, dass sie korrekt sind. Dazu gibt es einen Validierungsmechanismus für die Daten im Feld input.
Mit der Datenvalidierung können Sie überprüfen, ob die eingegebenen Werte bestimmte Anforderungen erfüllen. Sie können beispielsweise überprüfen, ob es sich bei dem Wert um eine Zahl, ein Datum oder eine E-Mail handelt. Wenn der eingegebene Wert nicht den Anforderungen entspricht, können Sie eine Fehlermeldung anzeigen und das Senden des Formulars verhindern.
Die Daten im Input-Feld werden mit dem pattern-Attribut validiert. Dieses Attribut gibt den regulären Ausdruck an, dem die eingegebenen Werte entsprechen müssen. Um beispielsweise zu überprüfen, ob der eingegebene Wert eine Zahl ist, können Sie den folgenden Code verwenden:
Im obigen Beispiel gibt das pattern -Attribut den regulären Ausdruck \d+ an, der eine oder mehrere Ziffern bedeutet. Das title-Attribut gibt den Text der Fehlermeldung an, der angezeigt wird, wenn Sie einen falschen Wert eingeben.
Neben der Verwendung von regulären Ausdrücken kann die Validierung von Daten auch mit anderen Attributen wie required , min , max und anderen durchgeführt werden. Mit dem required-Attribut können Sie beispielsweise angeben, dass ein Feld vor dem Senden eines Formulars unbedingt ausgefüllt werden muss.
Insgesamt ist die Validierung von Daten in einem Input-Feld ein wichtiger Mechanismus, der Ihnen hilft, die Qualität der vom Benutzer eingegebenen Daten zu überwachen und zu verbessern. Wenn die Validierung korrekt konfiguriert ist, können Sie die Anzahl der Fehler reduzieren und die Genauigkeit der eingegebenen Informationen verbessern.
Speichern und Übertragen von Daten mit input
Sie können das value-Attribut verwenden, um Daten mit input zu speichern. Damit können Sie den Wert des Eingabefeldes vordefinieren und beim Senden des Formulars an den Server übergeben. Zum Beispiel:
In diesem Beispiel ist das Eingabefeld auf "John Doe" voreingestellt. Wenn Sie das Formular an den Server senden, wird der Wert dieses Feldes übergeben.
Wenn der Wert des Eingabefeldes vom Benutzer geändert wird, wird er beim Senden des Formulars an den Server übergeben. Auf diese Weise können Sie mit dem input-Element die vom Benutzer eingegebenen Daten speichern und übertragen.
Abhängig vom Typ des type-Attributs kann das input-Element verschiedene Datentypen speichern und übergeben. Beispielsweise können Sie den Typ "number" zum Speichern von numerischen Werten verwenden und den Typ "text" zum Speichern von Text verwenden.
Darüber hinaus kann das input-Element verwendet werden, um eine Datei auszuwählen, die auf den Server hochgeladen werden soll. Dazu wird der Typ "file" verwendet. Wenn Sie eine Datei auswählen, wird ihr Name im Eingabefeld angezeigt und die Datei wird beim Senden des Formulars an den Server gesendet.
Daher ermöglicht das input-Element nicht nur den Empfang von Daten von Benutzern, sondern bietet auch die Möglichkeit, diese Daten zu speichern und an den Server zu senden. Dies macht es zu einem der am häufigsten verwendeten Elemente eines HTML-Formulars.
