html mit Adi Prinz

Zahlen eingeben

Mit type="number" wird ein Eingabefeld für Zahlen erstellt. Viele Browser zeigen zusätzlich Schaltflächen zum Erhöhen und Verringern des Wertes an.

<label for="anzahl">Anzahl:</label>
<input
  type="number"
  id="anzahl"
  name="anzahl"
  min="1"
  max="20"
  step="1"
  value="1">
    

Wichtige Attribute

• min legt den kleinsten erlaubten Wert fest.
• max legt den größten erlaubten Wert fest.
• step bestimmt die Schrittweite.
• value trägt einen anfänglichen Wert ein.
• required macht die Eingabe verpflichtend.

Dezimalzahlen eingeben

Über das Attribut step kann festgelegt werden, welche Zahlenwerte zulässig sind. Für Geldbeträge können beispielsweise Schritte von 0.01 verwendet werden.

<label for="preis">Preis in Euro:</label>
<input
  type="number"
  id="preis"
  name="preis"
  min="0"
  step="0.01">
    

Im HTML-Code wird als Dezimaltrennzeichen immer ein Punkt verwendet, zum Beispiel step="0.01". Wie der Wert im Eingabefeld angezeigt wird, hängt von den Spracheinstellungen des Browsers ab.

Beliebige Zahlenwerte erlauben

Mit step="any" können auch Werte eingegeben werden, die nicht einer festgelegten Schrittweite entsprechen.

<label for="messwert">Messwert:</label>
<input
  type="number"
  id="messwert"
  name="messwert"
  step="any">
    

Das ist beispielsweise bei Messwerten oder anderen Zahlen mit unterschiedlich vielen Nachkommastellen sinnvoll.

Werte mit einem Schieberegler auswählen

Mit type="range" wird ein Schieberegler erstellt. Er eignet sich, wenn ein ungefährer Wert innerhalb eines begrenzten Bereichs ausgewählt werden soll.

<label for="lautstaerke">Lautstärke:</label>

<input
  type="range"
  id="lautstaerke"
  name="lautstaerke"
  min="0"
  max="100"
  step="10"
  value="50">
    

Ein Schieberegler zeigt den gewählten Zahlenwert normalerweise nicht automatisch an. Soll der aktuelle Wert sichtbar sein, kann er mithilfe von JavaScript und einem output-Element ausgegeben werden.

Praxisbeispiel: Schieberegler mit Wertausgabe

<label for="bewertung">Bewertung:</label>

<input
  type="range"
  id="bewertung"
  name="bewertung"
  min="1"
  max="10"
  value="5"
  oninput="bewertungAusgabe.value = this.value">

<output id="bewertungAusgabe" for="bewertung">5</output>
    

Datum auswählen

Mit type="date" kann ein vollständiges Datum ausgewählt werden. Die Attribute min und max begrenzen den erlaubten Zeitraum.

<label for="geburtsdatum">Geburtsdatum:</label>

<input
  type="date"
  id="geburtsdatum"
  name="geburtsdatum"
  min="1900-01-01"
  max="2026-12-31">
    

Datumswerte werden im HTML-Code im Format JJJJ-MM-TT angegeben, beispielsweise 2026-07-26. Die sichtbare Darstellung richtet sich nach den Spracheinstellungen des Browsers.

Uhrzeit auswählen

Mit type="time" wird ein Eingabefeld für eine Uhrzeit erstellt. Auch hier können min, max und step verwendet werden.

<label for="beginn">Beginn:</label>

<input
  type="time"
  id="beginn"
  name="beginn"
  min="08:00"
  max="18:00"
  step="900">
    

Der Wert von step wird bei einer Uhrzeit in Sekunden angegeben. step="900" entspricht daher Schritten von 15 Minuten.

Datum und Uhrzeit kombinieren

Mit type="datetime-local" können ein Datum und eine Uhrzeit gemeinsam eingegeben werden. Dabei wird keine Zeitzone übertragen.

<label for="termin">Termin:</label>

<input
  type="datetime-local"
  id="termin"
  name="termin"
  min="2026-07-26T08:00"
  max="2026-12-31T18:00">
    

Der frühere Eingabetyp datetime ist veraltet und darf nicht mit datetime-local verwechselt werden.

Monat auswählen

Mit type="month" wird ein Monat gemeinsam mit einem Jahr ausgewählt. Ein bestimmter Tag gehört nicht zum übertragenen Wert.

<label for="abrechnungsmonat">Abrechnungsmonat:</label>

<input
  type="month"
  id="abrechnungsmonat"
  name="abrechnungsmonat"
  min="2026-01"
"
  max="2026-12">
    

Der übertragene Wert hat das Format JJJJ-MM, zum Beispiel 2026-07.

Kalenderwoche auswählen

Mit type="week" können ein Jahr und eine Kalenderwoche ausgewählt werden.

<label for="lieferwoche">Lieferwoche:</label>

<input
  type="week"
  id="lieferwoche"
  name="lieferwoche">
    

Der übertragene Wert besteht aus dem Jahr, dem Buchstaben W und der Kalenderwoche, beispielsweise 2026-W30.

Praxisbeispiel: Termin vereinbaren

In einem echten Terminformular müssen Datum und Uhrzeit zusätzlich auf dem Server geprüft werden. Die HTML-Validierung allein verhindert keine ungültigen oder manipulierten Anfragen.

Eine Farbe auswählen

Mit type="color" wird eine Farbauswahl geöffnet. Als Wert wird eine Farbe in hexadezimaler Schreibweise verwendet.

<label for="farbe">Wunschfarbe:</label>

<input
  type="color"
  id="farbe"
  name="farbe"
  value="#0d6efd">
    

Der übertragene Wert hat normalerweise die Form #rrggbb, zum Beispiel #0d6efd. Die Auswahlmöglichkeit für einen Alphakanal wird von input type="color" nicht allgemein unterstützt.

Eine Datei auswählen

Mit type="file" können Benutzer eine Datei auf ihrem Gerät auswählen. Das Eingabefeld überträgt nicht nur einen Dateinamen, sondern stellt die ausgewählte Datei für den Upload bereit.

<label for="dokument">Dokument auswählen:</label>

<input
  type="file"
  id="dokument"
  name="dokument">
    

Aus Sicherheitsgründen kann der Wert eines Dateifeldes nicht mit einem beliebigen lokalen Dateipfad vorbelegt werden. Die Datei muss vom Benutzer selbst ausgewählt werden.

Erlaubte Dateitypen angeben

Das Attribut accept gibt dem Browser einen Hinweis, welche Dateitypen ausgewählt werden sollen.

<label for="profilbild">Profilbild auswählen:</label>

<input
  type="file"
  id="profilbild"
  name="profilbild"
  accept="image/png, image/jpeg">
    

Für accept können unter anderem verwendet werden:

• Dateiendungen wie .pdf, .docx oder .xlsx
• MIME-Typen wie image/png oder application/pdf
• image/* für alle Bildtypen
• audio/* für alle Audiotypen
• video/* für alle Videotypen

accept ist keine zuverlässige Sicherheitsprüfung. Der Server muss den tatsächlichen Dateityp, die Dateigröße und den Dateiinhalt zusätzlich kontrollieren.

Mehrere Dateien auswählen

Das boolesche Attribut multiple erlaubt die Auswahl mehrerer Dateien.

<label for="bilder">Bilder auswählen:</label>

<input
  type="file"
  id="bilder"
  name="bilder[]"
  accept="image/*"
  multiple>
    

Die eckigen Klammern in name="bilder[]" sind für HTML nicht zwingend. Bei der Verarbeitung mehrerer Dateien mit PHP sorgen sie jedoch dafür, dass die Eingaben als zusammengehörige Werte behandelt werden.

Formular für einen Dateiupload

Ein echtes Uploadformular muss die Übertragungsmethode post und die Codierungsart multipart/form-data verwenden.

<form
  action="upload-verarbeiten.php"
  method="post"
  enctype="multipart/form-data">

  <label for="upload-datei">PDF-Dokument auswählen:</label>

  <input
    type="file"
    id="upload-datei"
    name="upload-datei"
    accept=".pdf, application/pdf"
    required>

  <button type="submit">Datei hochladen</button>
</form>
    

Ohne enctype="multipart/form-data" wird der Dateiinhalt nicht korrekt übertragen. Die Verarbeitung und sichere Speicherung des Uploads erfolgt anschließend auf dem Server, beispielsweise mit PHP.

Praxisbeispiel: Bewerbungsunterlagen

Dieses ausführbare Lernbeispiel lädt keine Datei hoch, weil das Absenden mit onsubmit="return false;" verhindert wird. Die HTML-Validierung kann dennoch ausprobiert werden.