HTMLInputElement.min — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.min

Beschreibung

Die Eigenschaft min spiegelt das HTML-Attribut min eines <input>-Elements wider. Sie ist immer ein String, auch bei type="number". Wenn Sie ihr etwas zuweisen, wird das Attribut im DOM gesetzt, beim Lesen erhalten Sie den aktuellen Attributwert zurück. Fehlt das Attribut, ist das Ergebnis ein leerer String "".

Wirksam ist min nur bei den Typen number, range, date, month, week, time und datetime-local. Das Format richtet sich nach dem Typ: Bei number/range ist es eine Gleitkommazahl wie "0" oder "-2.5", bei date ein Datum im Format "2024-01-31", bei time eine Uhrzeit wie "08:30" und bei month zum Beispiel "2024-05".

Liegt der eingegebene Wert unter min, ist das Feld ungültig: validity.rangeUnderflow wird true, checkValidity() gibt false zurück, das Formular wird nicht abgeschickt und die CSS-Pseudoklassen :out-of-range bzw. :invalid greifen. Zusammen mit step legt min außerdem den Startpunkt für die erlaubten Schritte fest. stepUp() und stepDown() halten diese Grenze ein.

Typische Anwendungsfälle: ein Buchungsformular, in dem kein Datum in der Vergangenheit gewählt werden darf, oder abhängige Felder, bei denen das Enddatum frühestens das Startdatum sein darf.

Parameter

Name	Typ	Default	Beschreibung
$wert	string	""	Beim Setzen: der neue Minimalwert im passenden Format für den Eingabetyp (z. B. `"10"`, `"2024-06-01"`, `"09:00"`). Zahlen werden automatisch in Strings umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des min-Attributs. Ist das Attribut nicht gesetzt, ist es ein leerer String.

Beispiele

Minimalwert lesen und setzen

const alter = document.createElement('input');
alter.type = 'number';

console.log(JSON.stringify(alter.min)); // noch kein Attribut

alter.min = 18;               // Zahl wird zu String
console.log(alter.min, typeof alter.min);
console.log(alter.getAttribute('min'));

"" 18 string 18

Kein Datum in der Vergangenheit erlauben

// <input type="date" id="anreise">
const anreise = document.querySelector('#anreise');

// Heutiges Datum lokal als YYYY-MM-DD
const heute = new Date();
const iso = [
  heute.getFullYear(),
  String(heute.getMonth() + 1).padStart(2, '0'),
  String(heute.getDate()).padStart(2, '0')
].join('-');

anreise.min = iso;
console.log(`Frühestes Anreisedatum: ${anreise.min}`);

Frühestes Anreisedatum: 2024-06-15 (je nach aktuellem Datum)

Abhängige Felder: Enddatum ab Startdatum

// <input type="date" id="start"> <input type="date" id="ende">
const start = document.querySelector('#start');
const ende = document.querySelector('#ende');

start.addEventListener('change', () => {
  ende.min = start.value;
  // Bereits gewähltes Enddatum ungültig? Dann zurücksetzen
  if (ende.value && ende.value < start.value) {
    ende.value = start.value;
  }
});

Unterschreitung per Constraint Validation prüfen

const menge = document.createElement('input');
menge.type = 'number';
menge.min = '1';
menge.value = '0';

console.log(menge.validity.rangeUnderflow);
console.log(menge.checkValidity());
console.log(menge.validationMessage !== '');

menge.value = '3';
console.log(menge.checkValidity());

true false true true

// Wichtig · Fallstricke

Immer ein String: Für Vergleiche vorher mit Number(input.min) oder parseFloat() umwandeln. Ein Vergleich von "10" mit "9" als Strings ergibt ein falsches Ergebnis. Datums-Strings im ISO-Format lassen sich dagegen korrekt als Strings vergleichen.
Nicht für alle Typen: Bei text, email usw. wird min zwar gespeichert, aber ignoriert. Für die Textlänge gibt es minLength.
Ungültiges Format: Passt der Wert nicht zum Typ (z. B. "31.12.2024" bei type="date"), wird die Grenze stillschweigend ignoriert.
Kein Ersatz für serverseitige Prüfung: Die Grenze kann über die Entwicklerwerkzeuge oder direkte HTTP-Anfragen umgangen werden. Prüfen Sie den Wert deshalb immer auch auf dem Server.
Bei type="range" gilt ohne Attribut der Standardwert 0, die Eigenschaft gibt dann trotzdem "" zurück.
Wird min per Skript geändert, ändert sich der aktuelle value nicht automatisch. Nur bei range wird der Wert in den gültigen Bereich eingepasst.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt. Die Datums- und Zeittypen werden in sehr alten Browsern teils als Textfeld angezeigt, dort hat min keine Wirkung.

Siehe auch

HTMLInputElement.max HTMLInputElement.alt HTMLInputElement.list HTMLInputElement.size HTMLInputElement.src