Ausführbare HTML-Docs: Input-Typen

Q: Wie viele Input-Typen gibt es in HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url und week. Ein unbekannter oder fehlender Typ verhält sich wie text.

Q: Was ist der Standard-Input-Typ in HTML?

text. Ein ohne type oder mit einem Typ, den der Browser nicht kennt, ist ein einzeiliges Textfeld.

Q: Soll ich type="number" für Telefonnummern oder Postleitzahlen verwenden?

Nein. number ist für Mengen: Es fügt Pfeiltasten hinzu und lehnt das +, Leerzeichen und Bindestriche ab, die in Telefonnummern vorkommen. Nimm type="tel" für Telefonnummern und type="text" mit inputmode="numeric" für Codes wie Postleitzahlen und Kartennummern.

Q: Welches Format hat input type date?

Der Wert ist immer YYYY-MM-DD, etwa 2026-09-24, egal in welchem Format der Leser das Datum auf dem Bildschirm sieht. Die Anzeige folgt dem Gebietsschema des Lesers; der gesendete und per Skript gelesene Wert nicht.

Q: Braucht das input-Tag ein schließendes Tag?

Nein. ist ein Void-Element: Schreib . Ein schließendes ist ungültig, und der Schrägstrich in ist erlaubt, bewirkt aber nichts.

Das input-Tag und seine Typen

<input> ist ein Formularfeld, und sein type-Attribut entscheidet, welche Art. Dasselbe Tag erzeugt ein Textfeld, einen Schieberegler, eine Datumsauswahl oder eine Farbauswahl. Probier jedes Feld unten aus und drück auf Submit, um zu sehen, was das Formular sendet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> ist ein Void-Element und hat daher kein schließendes Tag. Sein name ist der Schlüssel, unter dem der Wert gesendet wird, und value ist der Startwert. Ein fehlender oder falsch geschriebener type ergibt ein normales Textfeld.

Alle HTML-Input-Typen

`type`	Was es ist	Hinweise
`text`	Eine Zeile Text	Der Standard
`password`	Text, der als Punkte angezeigt wird	Wird dadurch nicht verschlüsselt; über HTTPS senden
`email`	Eine E-Mail-Adresse	Prüft das Format; `@`-Taste auf Handytastaturen
`url`	Eine Webadresse	Muss mit einem Schema wie `https://` beginnen
`tel`	Eine Telefonnummer	Ziffernblock auf dem Handy, keine Formatprüfung
`search`	Ein Suchfeld	Zeigt oft einen Löschen-Button
`number`	Eine Zahl	Pfeiltasten, `min`, `max`, `step`
`range`	Ein Schieberegler	Absichtlich ungenau; der Wert ist eine Zahl
`date`	Ein Datum	Wert ist `YYYY-MM-DD`
`time`	Eine Uhrzeit	Wert ist `HH:MM` (24 Stunden)
`datetime-local`	Datum und Uhrzeit, ohne Zeitzone	Wert ist `YYYY-MM-DDTHH:MM`
`month`	Ein Jahr und Monat	Nicht in jedem Browser unterstützt
`week`	Ein Jahr und eine Kalenderwoche	Nicht in jedem Browser unterstützt
`color`	Eine Farbauswahl	Wert ist `#rrggbb` in Kleinbuchstaben
`checkbox`	Ein Kästchen zum An- und Abhaken	Siehe HTML Checkbox
`radio`	Eine Auswahl aus einer Gruppe	Siehe HTML Radio Button
`file`	Eine Dateiauswahl	`accept`, `multiple`
`hidden`	Ein Wert, der gesendet, aber nicht angezeigt wird	Für IDs und Tokens
`submit`	Ein Absende-Button	`<button type="submit">` ist flexibler
`reset`	Ein Zurücksetzen-Button	Selten eine gute Idee
`button`	Ein Button, der von selbst nichts tut	Für JavaScript
`image`	Ein Absende-Button in Form eines Bildes	Sendet auch die Klickkoordinaten

Texttypen und Handytastaturen

email, url, tel, search und text sehen auf dem Desktop alle wie ein Textfeld aus. Der Unterschied liegt in der Validierung und auf Handys darin, welche Tastatur sich öffnet. Der Rahmen in diesem Beispiel wird grün oder rot, je nachdem, wie der Browser den Wert beurteilt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example ist für den Browser eine gültige E-Mail-Adresse: Er prüft nur auf Text, @ und eine Domain, nicht darauf, dass die Domain einen Punkt enthält. Die echte Prüfung passiert auf dem Server.
example.com ist keine gültige url, weil das Schema fehlt. https://example.com ist gültig.
tel akzeptiert alles. Telefonformate unterscheiden sich zwischen Ländern zu stark, deshalb gibt es keine eingebaute Prüfung; füg ein pattern hinzu, wenn du eine brauchst.
inputmode="numeric" fordert auf Handys eine Zifferntastatur an, ohne die Probleme von type="number". Deshalb ist es die richtige Wahl für Postleitzahlen, Einmalcodes und Kartennummern.

number und range

Beide nehmen min, max und step. number ist für exakte Werte; range ist ein Schieberegler für Werte, bei denen die genaue Zahl weniger zählt. Ein range-Regler zeigt keine Zahl an, kombiniere ihn also mit einem <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

step ist bei number standardmäßig 1, ein Preisfeld ohne step="0.01" lehnt 4.99 beim Absenden also ab. In JavaScript ist input.value immer ein String; mit input.valueAsNumber bekommst du eine Zahl.

Datum und Uhrzeit

Die Typen für Datum und Uhrzeit öffnen die eigene Auswahl des Browsers. Was der Leser sieht, folgt seinem Gebietsschema (09/24/2026, 24.09.2026), aber der Wert hat immer dasselbe feste Format:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Dieses feste Format bekommt der Server und liest JavaScript, du musst also nie „24.09.2026“ parsen. min und max nehmen dasselbe Format. datetime-local hat keine Zeitzone: Wenn sie wichtig ist, rechne auf dem Server mit der Zeitzone des Lesers um.

color und file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" beschränkt die Dateiauswahl auf Bilder (und bietet auf Handys die Kamera an); es nimmt auch Dateiendungen wie accept=".pdf,.docx". Es ist nur ein Hinweis für die Auswahl, prüf den Dateityp also auf dem Server. multiple erlaubt mehrere Dateien. Ein echter Upload braucht außerdem method="post" und enctype="multipart/form-data" am Formular.

Vorschläge mit datalist

Eine <datalist> gibt einem Textfeld eine Liste von Vorschlägen und erlaubt trotzdem jeden Wert. Verbunden werden sie über das Attribut list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Tipp „ja“ in das Feld, um die passenden Vorschläge zu sehen. Anders als bei einem Select kann der Leser einen Wert eintippen, der nicht in der Liste steht.

Attribute für Inputs

Attribut	Macht
`name`	Der Schlüssel, unter dem der Wert gesendet wird
`value`	Der Startwert
`placeholder`	Ein Hinweis, solange das Feld leer ist (kein Label)
`required`	Muss vor dem Absenden ausgefüllt sein
`disabled`	Nicht benutzbar und wird nicht gesendet
`readonly`	Nicht bearbeitbar, wird aber gesendet
`autocomplete`	Was automatisch ausgefüllt wird: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Grenzen für Zahlen, Bereiche, Datum und Uhrzeit
`minlength`, `maxlength`	Längengrenzen für Texttypen
`pattern`	Ein regulärer Ausdruck, auf den der ganze Wert passen muss
`inputmode`	Welche Handytastatur erscheint: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	Die `id` einer `<datalist>`
`multiple`	Mehrere Werte, bei `email` und `file`
`accept`	Dateitypen bei `file`

Häufige Fehler

type="number" für Telefonnummern, Postleitzahlen oder Kartennummern. Das sind keine Mengen. Nimm tel oder text mit inputmode="numeric".
Ein Preisfeld ohne step="0.01". Dezimalwerte fallen durch die Validierung.
placeholder als Label verwenden. Es verschwindet, sobald der Leser tippt.
Sich für die Sicherheit auf accept oder type="email" verlassen. Sie dienen der Bequemlichkeit; der Server prüft erneut.
type="month" oder type="week" ohne Fallback. Manche Browser zeigen ein normales Textfeld.
Ein schließendes </input>-Tag. <input> ist ein Void-Element.

Häufig gestellte Fragen

Wie viele Input-Typen gibt es in HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url und week. Ein unbekannter oder fehlender Typ verhält sich wie text.

Was ist der Standard-Input-Typ in HTML?

text. Ein <input> ohne type oder mit einem Typ, den der Browser nicht kennt, ist ein einzeiliges Textfeld.

Soll ich type="number" für Telefonnummern oder Postleitzahlen verwenden?

Nein. number ist für Mengen: Es fügt Pfeiltasten hinzu und lehnt das +, Leerzeichen und Bindestriche ab, die in Telefonnummern vorkommen. Nimm type="tel" für Telefonnummern und type="text" mit inputmode="numeric" für Codes wie Postleitzahlen und Kartennummern.

Welches Format hat input type date?

Der Wert ist immer YYYY-MM-DD, etwa 2026-09-24, egal in welchem Format der Leser das Datum auf dem Bildschirm sieht. Die Anzeige folgt dem Gebietsschema des Lesers; der gesendete und per Skript gelesene Wert nicht.

Braucht das input-Tag ein schließendes Tag?

Nein. <input> ist ein Void-Element: Schreib <input type="text" name="city">. Ein schließendes </input> ist ungültig, und der Schrägstrich in <input /> ist erlaubt, bewirkt aber nichts.

Verwandte Konzepte