HTMLInputElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.type

Beschreibung

Die Eigenschaft type spiegelt das gleichnamige HTML-Attribut eines <input>-Elements wider. Sie legt fest, welche Art von Daten das Feld annimmt und wie der Browser es darstellt: als Textfeld, Checkbox, Datumsauswahl, Schieberegler, Datei-Upload usw. Außerdem hängen davon die eingebaute Validierung (z. B. bei email oder url), die Bildschirmtastatur auf Mobilgeräten und die verfügbaren Eigenschaften wie checked, files oder valueAsNumber ab.

Beim Lesen liefert die Eigenschaft immer einen normalisierten Wert in Kleinbuchstaben. Fehlt das Attribut oder enthält es einen unbekannten Wert (z. B. type="foo"), gibt type den Standardwert "text" zurück – das Attribut selbst behält jedoch den ursprünglichen Wert. Genau dieses Verhalten eignet sich zur Feature-Erkennung: Man setzt einen Typ und prüft, ob der Browser ihn übernimmt.

Beim Schreiben wird das Attribut type aktualisiert und das Element wechselt sofort sein Verhalten. Typische Anwendungsfälle sind ein „Passwort anzeigen“-Schalter (password ↔ text), dynamisch erzeugte Formulare oder das gezielte Behandeln von Feldern je nach Typ beim Auslesen eines Formulars.

Gültige Werte sind: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url und week.

Parameter

Name	Typ	Default	Beschreibung
$value (beim Setzen)	string	"text"	Neuer Typ des Eingabefelds, z. B. `"password"` oder `"number"`. Groß-/Kleinschreibung wird ignoriert; unbekannte Werte führen beim Lesen zu `"text"`.

Rückgabewert

Typ

string

Beschreibung

Der normalisierte Typ in Kleinbuchstaben, z. B. "email". Bei fehlendem oder ungültigem Attribut "text".

Beispiele

Typ auslesen und normalisiertes Verhalten

const input = document.createElement('input');
console.log(input.type); // kein Attribut gesetzt

input.setAttribute('type', 'EMAIL');
console.log(input.type);

input.setAttribute('type', 'foo');
console.log(input.type, input.getAttribute('type'));

text email text foo

„Passwort anzeigen“-Schalter

// HTML: <input id="pw" type="password"> <button id="toggle">Anzeigen</button>
const pw = document.querySelector('#pw');
const toggle = document.querySelector('#toggle');

toggle.addEventListener('click', () => {
  const hidden = pw.type === 'password';
  pw.type = hidden ? 'text' : 'password';
  toggle.textContent = hidden ? 'Verbergen' : 'Anzeigen';
  toggle.setAttribute('aria-pressed', String(hidden));
});

Feature-Erkennung für Eingabetypen

const supportsInputType = (type) => {
  const input = document.createElement('input');
  input.setAttribute('type', type);
  return input.type === type;
};

console.log(supportsInputType('date'));
console.log(supportsInputType('datetime')); // veraltet, nie standardisiert

true false

Formularwerte typabhängig auslesen

const collect = (form) => {
  const data = {};
  for (const el of form.querySelectorAll('input[name]')) {
    switch (el.type) {
      case 'checkbox':
        data[el.name] = el.checked;
        break;
      case 'radio':
        if (el.checked) data[el.name] = el.value;
        break;
      case 'number':
      case 'range':
        data[el.name] = el.valueAsNumber;
        break;
      case 'file':
        data[el.name] = [...el.files].map((f) => f.name);
        break;
      default:
        data[el.name] = el.value;
    }
  }
  return data;
};

console.log(collect(document.querySelector('form')));

{ newsletter: true, alter: 42, name: "Anna" }

// Wichtig · Fallstricke

Normalisierung: el.type und el.getAttribute('type') können sich unterscheiden. Für Vergleiche immer die Eigenschaft verwenden, nicht das Attribut.
Wert beim Typwechsel: Wechselt man z. B. von text auf number, wird ein nicht passender value bereinigt (leerer String). Beim Wechsel zu file wird der Wert geleert; umgekehrt lässt sich value eines Datei-Felds aus Sicherheitsgründen nicht per Skript setzen (nur auf "").
Altes IE-Verhalten: Internet Explorer ≤ 8 erlaubte das Ändern von type nach dem Einfügen ins DOM nicht. In modernen Browsern ist das problemlos möglich.
Browser-Unterstützung: Typen wie date, time, datetime-local und color sind heute breit verfügbar; month und week fehlen in Firefox (Desktop) und Safari teilweise und fallen auf text zurück. Feature-Erkennung wie oben verwenden.
Keine Sicherheitsgrenze: type="email" oder type="number" validieren nur clientseitig; Eingaben müssen serverseitig immer erneut geprüft werden. type="hidden" verbirgt Daten nicht vor dem Nutzer.
Barrierefreiheit: Beim Umschalten von password auf text den Zustand für Screenreader kenntlich machen (z. B. aria-pressed) und vor dem Absenden ggf. zurück auf password setzen, damit Passwortmanager und Autovervollständigung korrekt arbeiten.
Die Pseudo-Klasse bzw. das CSS-Selektor-Muster input[type="…"] bezieht sich auf das Attribut, nicht auf den normalisierten Wert.

Siehe auch

HTMLInputElement.name HTMLInputElement.size HTMLInputElement.step HTMLInputElement.alpha HTMLInputElement.alt