HTML - Input-Eigenschaften: Ein umfassender Leitfaden für Anfänger

Hallo, angehende Web-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise durch die Welt der HTML-Input-Eigenschaften zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen versichern, dass das Beherrschen dieser Konzepte ein echter Game-Changer in Ihrer Web-Entwicklerkarriere sein wird. Also, tauchen wir ein!

Was sind Input-Eigenschaften?

Bevor wir uns den Details zuwenden, lassen Sie uns verstehen, was Input-Eigenschaften sind. In HTML wird das <input>-Tag verwendet, um verschiedene Arten von Formularsteuerelementen zu erstellen. Eigenschaften sind zusätzliche Merkmale, die wir diesen Eingabeelementen hinzufügen können, um ihr Verhalten oder Erscheinungsbild zu modifyzieren.

Denken Sie an Eigenschaften als spezielle Anweisungen, die Sie Ihren Eingabefeldern geben. Genau wie Sie einem neuen Hund befehlen könnten, "sitz" oder "bleib", können Sie Ihren Eingabefeldern befehlen, nur Zahlen zu akzeptieren, eine bestimmte Länge zu haben oder Platzhalbertext anzuzeigen.

Beispiele für Eigenschaften des Input-Tags

Lassen Sie uns einige der am häufigsten verwendeten Input-Eigenschaften mit Beispielen erkunden. Ich werde einen Code-Snippet für jede Eigenschaft geben, gefolgt von einer Erklärung, was es macht.

1. Type-Eigenschaft

<input type="text" name="username">
<input type="password" name="password">
<input type="email" name="email">
<input type="number" name="age">
<input type="date" name="birthdate">

Die type-Eigenschaft gibt an, welche Art von Eingabeelement angezeigt werden soll. In dem Beispiel oben haben wir:

• Ein Texteingabefeld für den Benutzernamen
• Ein Passwortfeld, das die eingegebenen Zeichen maskiert
• Ein E-Mail-Eingabefeld, das die E-Mail-Format überprüft
• Ein Zahlenfeld für das Alter
• Ein Datumsfeld, das einen Kalender zur Verfügung stellt

2. Value-Eigenschaft

<input type="text" name="country" value="Vereinigte Staaten">

Die value-Eigenschaft gibt einen Anfangswert für ein Eingabefeld an. In diesem Fall wird "Vereinigte Staaten" vorausgefüllt, wenn die Seite lädt.

3. Placeholder-Eigenschaft

<input type="text" name="search" placeholder="Geben Sie Ihre Suchbegriffe ein">

Die placeholder-Eigenschaft gibt einen Hinweis an, der die erwartete Eingabe eines Eingabefeldes beschreibt. Er wird im Eingabefeld angezeigt, bevor der Benutzer einen Wert eingibt.

4. Required-Eigenschaft

<input type="text" name="fullname" required>

Die required-Eigenschaft gibt an, dass ein Eingabefeld ausgefüllt werden muss, bevor das Formular gesendet wird. Wenn der Benutzer versucht, ohne das Feld auszufüllen zu senden, sehen sie eine Fehlermeldung.

5. Disabled-Eigenschaft

<input type="text" name="username" value="johndoe" disabled>

Die disabled-Eigenschaft gibt an, dass ein Eingabefeld deaktiviert werden soll (unbrauchbar und nicht klickbar). Dies wird oft für Felder verwendet, die vom Benutzer nicht bearbeitet werden sollen.

6. Readonly-Eigenschaft

<input type="text" name="email" value="[email protected]" readonly>

Die readonly-Eigenschaft gibt an, dass ein Eingabefeld schreibgeschützt ist (kann nicht verändert werden). Im Gegensatz zu disabled werden schreibgeschützte Felder dennoch beim Absenden des Formulars gesendet.

7. Min und Max Eigenschaften

<input type="number" name="age" min="18" max="100">

Die min und max-Eigenschaften geben die minimalen und maximalen Werte für ein Eingabefeld an. Dies ist besonders nützlich für Zahlenfelder.

8. Pattern-Eigenschaft

<input type="text" name="username" pattern="[A-Za-z0-9]{3,}" title="Der Benutzername muss mindestens 3 Zeichen lang sein und darf nur Buchstaben und Zahlen enthalten">

Die pattern-Eigenschaft gibt einen regulären Ausdruck an, gegen den der Wert des Eingabefeldes überprüft wird. In diesem Beispiel muss der Benutzername mindestens 3 Zeichen lang sein und darf nur Buchstaben und Zahlen enthalten.

9. Autofocus-Eigenschaft

<input type="text" name="search" autofocus>

Die autofocus-Eigenschaft gibt an, dass ein Eingabefeld automatisch den Fokus erhält, wenn die Seite lädt.

10. Multiple-Eigenschaft

<input type="file" name="photos" multiple>

Die multiple-Eigenschaft gibt an, dass der Benutzer mehr als einen Wert in ein Eingabefeld eingeben darf. Dies ist besonders nützlich für Datei-Eingaben, bei denen Sie mehrere Datei-Uploads erlauben möchten.

Alles zusammenbringen

Nun, da wir die einzelnen Eigenschaften abgedeckt haben, sehen wir uns an, wie wir sie kombinieren können, um ein komplexeres und funktionaleres Formular zu erstellen:

<form action="/submit" method="post">
<input type="text" name="username" placeholder="Geben Sie Ihren Benutzernamen ein" required autofocus>
<input type="email" name="email" placeholder="Geben Sie Ihre E-Mail-Adresse ein" required>
<input type="password" name="password" placeholder="Geben Sie Ihr Passwort ein" required pattern=".{8,}" title="Das Passwort muss mindestens 8 Zeichen lang sein">
<input type="number" name="age" min="18" max="100" placeholder="Geben Sie Ihr Alter ein">
<input type="file" name="profile_picture" accept="image/*">
<input type="submit" value="Registrieren">
</form>

In diesem Formular haben wir:

1. Ein erforderliches Benutzernamensfeld, das automatisch den Fokus erhält
2. Ein erforderliches E-Mail-Feld
3. Ein erforderliches Passwortfeld mit einer Mindestlänge von 8 Zeichen
4. Ein Altersfeld, das nur Werte zwischen 18 und 100 akzeptiert
5. Ein Datei-Eingabefeld, das nur Bilddateien akzeptiert
6. Eine Schaltfläche zum Senden der Formulardaten

Zusammenfassungstabelle der Input-Eigenschaften

Hier ist eine praktische Tabelle, die die Eigenschaften zusammenfasst, die wir besprochen haben:

Eigenschaft	Beschreibung	Beispiel
type	Gibt die Art des Eingabeelements an	<input type="text">
value	Gibt einen Anfangswert an	<input type="text" value="John">
placeholder	Gibt einen Hinweis an	<input type="text" placeholder="Geben Sie Ihren Namen ein">
required	Macht das Feld obligatorisch	<input type="text" required>
disabled	Deaktiviert das Eingabefeld	<input type="text" disabled>
readonly	Macht das Feld schreibgeschützt	<input type="text" readonly>
min	Gibt einen minimalen Wert an	<input type="number" min="0">
max	Gibt einen maximalen Wert an	<input type="number" max="100">
pattern	Gibt ein reguläres Muster an	<input type="text" pattern="[A-Za-z]{3}">
autofocus	焦点自动获得	<input type="text" autofocus>
multiple	Ermöglicht mehrfache Werte	<input type="file" multiple>

Denken Sie daran, der Schlüssel zum Beherrschen der HTML-Input-Eigenschaften ist die Übung. Versuchen Sie, verschiedene Formulare zu erstellen, experimentieren Sie mit verschiedenen Eigenschaften und sehen Sie, wie sie die Benutzererfahrung beeinflussen. Viel Spaß beim Coden!

Credits: Image by storyset