Formularfelder für Dateiupload in HTML

In Formularen, die auf Webseiten bereitgestellt werden, kann es manchmal notwendig sein, Felder für Dateiuploads bereitzustellen, mit denen die Besucher dem Formular eigene Dateien anhängen können. Typische Anwendungsfälle sind z.B. Bewerbungsformulare, in denen man den Bewerbern den Upload von Unterlagen ermöglichen möchte. Stellt man Formularfelder für Dateiuploads zur Verfügung, sollte man diesen Punkt beim Aspekt IT-Sicherheit besonders berücksichtigen, da man hierbei fremde Dateien entgegennimmt und verarbeitet, die manipuliert sein könnten. Das Aussehen der Dateiupload-Felder kann in der Standardform unterschiedlich sein und ist browserabhängig. Bei manchen Browsern ist es üblich, eine Durchsuchen-Schaltfläche mit einem Eingabefeld einzublenden, in dem der komplette Pfad zur angehängten Datei angezeigt wird. Es kann auch sein, dass der Pfad zur Datei nicht angezeigt wird.

Felder für Dateiupload in HTML

HTML-Code für Dateiupload-Felder

Wie bei den meisten Formularfeldern verwendet man beim Dateiupload-Feld den INPUT-Tag, den man auch für gewöhnliche Eingabefelder verwendet. Die Unterscheidung zwischen einem Eingabefeld und einem Dateiupload-Feld erfolgt über das Typ-Attribut. Bei einem Dateiupload-Feld wird hierbei type="file" angegeben. Ein Beispielcode.

<!-- In HTML -->
<input type="file">

<!-- In XHTML -->
<input type="file" />

Bei der Verwendung von Dateiupload-Feldern ist es wichtig, beim FORM-Tag die Kodierung der Daten mit enctype="multipart/form-data" anzugeben und die Übertragungsmethode POST zu wählen.

Attribute für Dateiupload-Felder

Bei Dateiupload-Feldern können weitere Attribute mit einem Leerzeichen getrennt hinzugefügt werden. Dabei können vor allem folgende Attribute relevant sein.

  • name: Mit dem Namens-Attribut kann dem Formularfeld in der Form name="..." ein Name zugewiesen werden. Vom verarbeitenden Script kann der Name z.B. ausgelesen werden und als Rückgabewert würde man den Dateinamen erhalten. Ein Beispielcode, um für das Feld den Namen "unterlagen" zuzuweisen.
<!-- In HTML -->
<input type="file" name="unterlagen">

<!-- In XHTML -->
<input type="file" name="unterlagen" />
  • id: Einem Dateiupload-Feld kann auch eine eindeutige ID zugewiesen werden. Die ID kann z.B. für interne Links als Sprungmarke verwendet werden. Es kann identisch wie der Name des Felds sein. Ein Beispielcode.
<!-- In HTML -->
<input type="file" name="unterlagen" id="unterlagen">

<!-- In XHTML -->
<input type="file" name="unterlagen" id="unterlagen" />

Die ID und der Name werden häufig identisch gehalten. Trotzdem gibt es zwischen den beiden Attributen große Unterschiede, die auf der Seite für Eingabefelder unter Attribut für die ID erläutert werden.

  • accept: Wenn die Benutzer die Durchsuchen-Schaltfläche anklicken, wird ein Fenster geöffnet, in dem navigiert wird und die Dateien zur Auswahl angezeigt werden. Welche Dateitypen angezeigt werden sollen, kann über das Attribut beeinflusst werden. Das Attribut ist lediglich ein Komfort für den Benutzer und ersetzt nicht eine serverseitige Prüfung des Dateitypen. Denn, die Einstellung lässt sich umgehen und es ist trotzdem möglich, Dateien vom anderen Typ hochzuladen. Das Attribut dient nur dazu, die Auswahl der Datei(en) für den Benutzer zu vereinfachen, indem Dateien von anderen Typen ausgeblendet werden.

Die Angabe des Dateitypen kann z.B. über die Dateiendungen oder über den MIME-Typen erfolgen. Ein Beispielcode.

<!-- Kommagetrennt über Dateiendung -->
<input type="file" name="unterlagen" accept=".jpg,.png">

<!-- Kommagetrennt über MIME-Typen mit Platzhalter -->
<input type="file" name="unterlagen" accept="image/*,audio/*">

In XHTML muss lediglich beachtet werden, den abschließenden Trailing-Slash mit " /> anzugeben.

  • disabled: Über das Attribut kann das Dateiupload-Feld deaktiviert werden. Bei der Schreibweise kann man in HTML die verkürzte Form (ohne Wert) verwenden. In XHTML muss dagegen die Langform (mit Wert) verwendet werden. Ein Beispielcode.
<!-- In HTML -->
<input type="file" name="unterlagen" disabled>

<!-- Kommagetrennt über MIME-Typen mit Platzhalter -->
<input type="file" name="unterlagen" disabled="disabled">

Attribute in HTML5

Ab HTML5 sind für Formulare neue Attribute hinzugekommen. Für ein Dateiupload-Feld können folgende Attribute wichtig sein.

  • multiple: Normalerweise wird pro Dateiupload-Feld nur eine Datei ausgewählt. Für den Upload mehrerer Dateien kann das Attribut multiple gesetzt werden. Das Attribut zählt zu den leeren Attributen. Ab HTML5 kann die Schreibweise in verkürzter Form (ohne Wert) oder in Langform (XHTML-Schreibweise) mit Wert erfolgen.

Es sollte auch bedacht werden, dass wenn man mehrere Dateien hochlädt und vom verarbeitenden Script z.B. die Namen der Dateien ausgelesen werden, der Rückgabewert zunächst ein Array ist. Hierfür muss das Namens-Aattribut mit eckigen Klammern enden und wird z.B. in der Form name="unterlagen[]" geschrieben. Ein Beispielcode.

<!-- HTML-Schreibweise -->
<input type="file" name="unterlagen[]" multiple>

<!-- XHTML-Schreibweise -->
<input type="file" name="unterlagen[]" multiple="multiple" />
  • form: Vor HTML5 musste der Code für die Formularfelder innerhalb des FORM-Tags eingefügt werden. Ab HTML5 ist es auch möglich, diese außerhalb einzufügen. Die Zuordnung zum Formular erfolgt über das Attribut form und als Wert wird die ID des FORM-Tags eingefügt. Ein Beispielcode.
<!-- Ab HTML5 -->
<form id="formularid">
</form>

<!-- Dateiuploadfeld außerhalb des FORM-Tags -->
<input type="file" name="unterlagen" form="formularid">
  • required: Definiert ein Pflichtfeld. Ist lediglich eine clientseitige Prüfung durch den Browser und ersetzt nicht eine serverseitige Prüfung.
  • autofocus: Legt fest, dass nach dem Laden der Webseite der Fokus auf das Formularfeld gelegt wird. Darf auf einer Seite nur einem Formularfeld zugewiesen werden.

Beide Elemente gehören zu den leeren Attributen und können in gewöhnlicher HTML-Schreibweise (ohne Wert) in Kurzform oder in XHTML-Schreibweise (mit Wert) in Langform geschrieben werden. Ein Beispielcode.

<!-- HTML-Schreibweise -->
<input type="file" name="unterlagen1" required>
<input type="file" name="unterlagen2" autofocus>

<!-- XHTML-Schreibweise -->
<input type="file" name="unterlagen1" required="required" />
<input type="file" name="unterlagen2" autofocus="autofocus" />

Inline-Element in Block-Element platzieren

Inline-Elemente müssen in Block-Elementen positioniert werden, z.B. in DIV-Container. Da der INPUT-Tag zu den Inline-Elementen gehört, haben die zuvor gezeigten Codebeispiele einen Schönheitsfehler. Für die korrekte Syntax sollten sie in Block-Elementen platziert werden. Ein Beispielcode.

<div><input type="file" name="unterlagen"></div>

Die Formatierung des Dateiupload-Felds und des umschließenden Block-Elements kann über CSS erfolgen.