Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen HTML-Eingabeattribute für Erweiterte Funktionalität | Tabellen und Formulare
HTML-Grundlagen

bookHTML-Eingabeattribute für Erweiterte Funktionalität

Wir wissen bereits, wie man Formulare mit Eingabefeldern und Beschriftungen erstellt. Nun betrachten wir weitere nützliche Attribute für Eingabeelemente, die deren Funktionalität und Benutzerfreundlichkeit verbessern.

Allgemeine Attribute für Eingabeelemente

Platzhalter

placeholder bietet einen Hinweis oder Beispieltext innerhalb des Eingabefelds und gibt Nutzern eine Orientierung, welche Art von Eingabe erwartet wird. Nützlich zur Bereitstellung von Kontext oder Anweisungen, bevor Daten eingegeben werden.

<input type="text" placeholder="Enter your email" />

Name

name legt den Namen des Eingabefelds fest, der zur Identifizierung der Eingabedaten beim Absenden des Formulars verwendet wird. Jedes Eingabefeld innerhalb eines Formulars sollte ein eindeutiges name-Attribut besitzen.

<input type="text" name="username" />

Wert

value setzt den Anfangs- oder Standardwert des Eingabefelds. Das Eingabefeld wird beim Laden der Seite mit einem bestimmten Wert vorausgefüllt.

<input type="tel" value="+1 (484) 298-9732" />

Erforderlich

required gibt an, dass das Eingabefeld ausgefüllt werden muss, bevor das Formular abgeschickt werden kann. Verhindert das Absenden des Formulars, wenn das erforderliche Feld leer bleibt.

<input type="password" required />

Deaktiviert

disabled deaktiviert das Eingabefeld und verhindert, dass Benutzer damit interagieren oder Daten eingeben. Nützlich zur Anzeige von schreibgeschützten oder inaktiven Eingabefeldern.

<input type="text" value="New York" disabled />

Schreibgeschützt

readonly macht das Eingabefeld schreibgeschützt, sodass Benutzer den Wert sehen, aber nicht ändern können. Ähnlich wie das Attribut disabled, aber das Feld kann weiterhin fokussiert und ausgewählt werden.

<input type="text" value="USA" readonly />

Min und Max

min und max geben die minimal und maximal erlaubten Werte für numerische Eingabefelder an. Nützlich zur Durchsetzung von Einschränkungen bei numerischen Eingaben, wie Alter oder Menge.

<input type="number" min="21" max="99" />

Beispiel: Im Folgenden ein Beispiel, das alle notwendigen Attribute und Elemente für das Formular enthält.

index.html

index.html

copy

Video-Tutorial

1. Welches Attribut zeigt einen Hinweis oder Beispieltext innerhalb eines Eingabefeldes an, um Benutzer über die erwartete Eingabe zu informieren?

2. Welches Attribut legt den Namen des Eingabefeldes fest, der zur Identifizierung der Eingabedaten beim Absenden des Formulars verwendet wird?

3. Welches Attribut verhindert das Absenden des Formulars, wenn das erforderliche Feld leer bleibt?

question mark

Welches Attribut zeigt einen Hinweis oder Beispieltext innerhalb eines Eingabefeldes an, um Benutzer über die erwartete Eingabe zu informieren?

Select the correct answer

question mark

Welches Attribut legt den Namen des Eingabefeldes fest, der zur Identifizierung der Eingabedaten beim Absenden des Formulars verwendet wird?

Select the correct answer

question mark

Welches Attribut verhindert das Absenden des Formulars, wenn das erforderliche Feld leer bleibt?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 3.13

bookHTML-Eingabeattribute für Erweiterte Funktionalität

Swipe um das Menü anzuzeigen

Wir wissen bereits, wie man Formulare mit Eingabefeldern und Beschriftungen erstellt. Nun betrachten wir weitere nützliche Attribute für Eingabeelemente, die deren Funktionalität und Benutzerfreundlichkeit verbessern.

Allgemeine Attribute für Eingabeelemente

Platzhalter

placeholder bietet einen Hinweis oder Beispieltext innerhalb des Eingabefelds und gibt Nutzern eine Orientierung, welche Art von Eingabe erwartet wird. Nützlich zur Bereitstellung von Kontext oder Anweisungen, bevor Daten eingegeben werden.

<input type="text" placeholder="Enter your email" />

Name

name legt den Namen des Eingabefelds fest, der zur Identifizierung der Eingabedaten beim Absenden des Formulars verwendet wird. Jedes Eingabefeld innerhalb eines Formulars sollte ein eindeutiges name-Attribut besitzen.

<input type="text" name="username" />

Wert

value setzt den Anfangs- oder Standardwert des Eingabefelds. Das Eingabefeld wird beim Laden der Seite mit einem bestimmten Wert vorausgefüllt.

<input type="tel" value="+1 (484) 298-9732" />

Erforderlich

required gibt an, dass das Eingabefeld ausgefüllt werden muss, bevor das Formular abgeschickt werden kann. Verhindert das Absenden des Formulars, wenn das erforderliche Feld leer bleibt.

<input type="password" required />

Deaktiviert

disabled deaktiviert das Eingabefeld und verhindert, dass Benutzer damit interagieren oder Daten eingeben. Nützlich zur Anzeige von schreibgeschützten oder inaktiven Eingabefeldern.

<input type="text" value="New York" disabled />

Schreibgeschützt

readonly macht das Eingabefeld schreibgeschützt, sodass Benutzer den Wert sehen, aber nicht ändern können. Ähnlich wie das Attribut disabled, aber das Feld kann weiterhin fokussiert und ausgewählt werden.

<input type="text" value="USA" readonly />

Min und Max

min und max geben die minimal und maximal erlaubten Werte für numerische Eingabefelder an. Nützlich zur Durchsetzung von Einschränkungen bei numerischen Eingaben, wie Alter oder Menge.

<input type="number" min="21" max="99" />

Beispiel: Im Folgenden ein Beispiel, das alle notwendigen Attribute und Elemente für das Formular enthält.

index.html

index.html

copy

Video-Tutorial

1. Welches Attribut zeigt einen Hinweis oder Beispieltext innerhalb eines Eingabefeldes an, um Benutzer über die erwartete Eingabe zu informieren?

2. Welches Attribut legt den Namen des Eingabefeldes fest, der zur Identifizierung der Eingabedaten beim Absenden des Formulars verwendet wird?

3. Welches Attribut verhindert das Absenden des Formulars, wenn das erforderliche Feld leer bleibt?

question mark

Welches Attribut zeigt einen Hinweis oder Beispieltext innerhalb eines Eingabefeldes an, um Benutzer über die erwartete Eingabe zu informieren?

Select the correct answer

question mark

Welches Attribut legt den Namen des Eingabefeldes fest, der zur Identifizierung der Eingabedaten beim Absenden des Formulars verwendet wird?

Select the correct answer

question mark

Welches Attribut verhindert das Absenden des Formulars, wenn das erforderliche Feld leer bleibt?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 7
some-alt