0Pricing
HTML Academy · Lektion

Input-Typen: text, password, email, number und tel

Verwenden Sie für jedes Datenfeld den passenden Input-Typ.

Input-Typen: text, password, email, number und tel ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Das input-Element

Das Element <input> erstellt verschiedene Formularsteuerelemente. Das Attribut type bestimmt deren Art:

<input type="text">      <!-- single-line text -->
<input type="password"> <!-- masked text -->
<input type="email">    <!-- email address -->
<input type="number">   <!-- numeric -->
<input type="tel">      <!-- phone number -->

type=text

Der standardmäßige input-Typ — ein einzeiliges Textfeld:

<label for="username">Username</label>
<input
  type="text"
  id="username"
  name="username"
  placeholder="e.g. jane_doe"
  maxlength="50"
  autocomplete="username"
>

type=password

Das Passwortfeld maskiert die Zeichen während der Eingabe:

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  name="password"
  minlength="8"
  autocomplete="current-password"
  required
>
<!-- Browser may offer to save/fill the password -->
<!-- autocomplete="new-password" for registration forms -->

type=email

Das E-Mail-Feld validiert das E-Mail-Format auf Mobilgeräten und Desktop-Computern:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="you@example.com"
  autocomplete="email"
  required
>
<!-- Mobile: shows @ on keyboard -->
<!-- Browser validates basic email format on submit -->

type=number

Das Zahlenfeld akzeptiert numerische Werte mit Drehsteuerelementen:

<label for="qty">Quantity</label>
<input
  type="number"
  id="qty"
  name="quantity"
  min="1"
  max="100"
  step="1"
  value="1"
>
<!-- min, max, step control allowed values -->
<!-- Mobile: shows numeric keypad -->
<!-- Note: only integers with step=1; decimals need step="0.01" -->

type=tel

Das tel-Feld akzeptiert Telefonnummern ohne Formatvalidierung:

<label for="phone">Phone number</label>
<input
  type="tel"
  id="phone"
  name="phone"
  placeholder="+1 (555) 555-0100"
  pattern="[+][0-9 ()-]{7,20}"
  autocomplete="tel"
>
<!-- Mobile: shows phone keypad -->
<!-- No built-in validation — phone formats vary globally -->
<!-- Use pattern attribute for format validation -->

Das name-Attribut ist unverzichtbar

Über das Attribut name identifiziert der Server jedes Feld:

<form action="/search">
  <!-- Without name, the field is NOT sent with the form -->
  <input type="text" name="q" placeholder="Search">
  <button type="submit">Search</button>
</form>
<!-- Submits: /search?q=your+search+term -->
<!-- name="q" → the key in the submitted data -->

Platzhalter vs Label

Das Attribut placeholder stellt Beispieltext bereit — verwenden Sie ihn aber niemals anstelle eines Labels:

<!-- BAD: placeholder as label -->
<input type="text" placeholder="Enter your name">

<!-- GOOD: label + helpful placeholder -->
<label for="name">Full name</label>
<input type="text" id="name" name="name" placeholder="e.g. Jane Smith">
<!-- Placeholder disappears on typing — screen readers often skip it -->

value und defaultValue

Füllen Sie Eingabefelder mit dem Attribut value vor:

<input type="text" name="country" value="United States">
<!-- Renders with 'United States' pre-filled -->

<input type="number" name="qty" value="1" min="1" max="10">
<!-- Default quantity of 1 -->

disabled und readonly

Es gibt zwei Möglichkeiten, ein Eingabefeld nicht bearbeitbar zu machen:

<input type="text" value="Fixed value" readonly>
<!-- readonly: user can see and select text, but not edit it -->
<!-- Value IS submitted with the form -->

<input type="text" value="Disabled" disabled>
<!-- disabled: user cannot interact with it at all -->
<!-- Value is NOT submitted with the form -->
<!-- NOT in tab order -->

Autocomplete-Werte für Eingabefelder

Spezifische Autocomplete-Werte verbessern die Genauigkeit des automatischen Ausfüllens durch den Browser:

<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="street" autocomplete="address-line1">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="zip" autocomplete="postal-code">
<input type="password" autocomplete="new-password">

Schnelltest

Welchen input-Typ sollten Sie für ein Feld mit einer Telefonnummer verwenden?

Zusammenfassung: Input-Typen

Häufig verwendete input-Typen:

  • type="text" — allgemeiner Text (Standard)
  • type="password" — maskierter Text; verwenden Sie autocomplete="new-password"
  • type="email" — E-Mail-Adresse mit mobiler @-Taste
  • type="number" — numerische Eingabe mit min/max/step
  • type="tel" — Telefonnummer mit Telefontastatur
  • Fügen Sie immer name und ein zugehöriges <label> ein

Häufig gestellte Fragen

Ist die Lektion „Input-Typen: text, password, email, number und tel“ kostenlos?

Ja — der vollständige Text von „Input-Typen: text, password, email, number und tel“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Input-Typen: text, password, email, number und tel“?

Verwenden Sie für jedes Datenfeld den passenden Input-Typ. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Input-Typen: text, password, email, number und tel“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Das form-Element: action, method und enctype
  2. Input-Typen: text, password, email, number und tel
  3. Das label-Element und Barrierefreiheit
  4. Das button-Element: submit, reset und button
← Zurück zu HTML Academy