HTML Formular mit Funktion zum Hochladen

Fileupload: Formularfeld zum Durchsuchen

Eine weitere Option, die das input-Feld für die Formulare unter HTML anbietet, ist die Möglichkeit, eine Datei hochzuladen. Diesmal wird die Daten nicht auf den eigenen Server per FTP hochgeladen, damit man sie im Internet nützen kann, sondern man lädt eine Datei auf eine externe Webseite ergo deren Server.

Das kann für die Datenübermittlung auf einer Behördenseite möglich sein, ein häufiger Fall ist in der täglichen Arbeit zu erleben. Denn die meisten CMS bieten diese Funktion auch an, dass man Bilder auf den Server lädt und später per Verwaltung für den Artikel auswählt, an den gerade gearbeitet wird.

Hochladen von Dateien via Formular

ergibt:

Durch die Angabe des Typs File wird HTML mitgeteilt, dass hier eine Datei erwartet wird, wobei man die Spielregeln einengen kann. Für die Besucherinnen und Besucher der Webseite bedeutet dies, dass man auf Klick der Schaltfläche, die automatisch dargestellt wird, den eigenen Computer durchsuchen kann, um die richtige Datei anzugeben.

Hat man sich für eine Datei entschieden, dann steht der Pfad im Textfeld daneben und wird als Information mitgeschickt, sobald das Formular abgeschickt wird. Allerdings muss man als Formularanbieter darauf achten, dass das Formular als Multipart definiert ist, weil sonst das Formular zwar verschickt und verarbeitet wird, die Datei wird aber nicht akzeptiert, weil das an sich nicht üblich ist.

Erst durch die Angabe des Multipart-Formulars im form-Tag kann die Datei angenommen und verarbeitet werden. Dazu gibt es zwei weitere Einstellungen. Die erste betrifft die Größe der Datei, die man durch den Parameter maxlength begrenzen kann. Ist die Datei zu groß, wird sie nicht angenommen. Der zweite Parameter ist accept und bezieht sich auf die MIME-Typen, die die Dateien als solche erkennen. Im angeführten Beispiel werden nur Textdokumente akzeptiert. Würde man ein Video hochladen wollen, würde dieses als Video und damit als böse erkannt werden und es erfolgt die Ablehnung.

Lesen Sie auch

Die Formulare sind überraschend wichtige Elemente auf der Webseite, denn jede größere Plattform hat auch eine Suchmaschine und damit auch ein Eingabefeld - ergo ein Formular für diesen Zweck. Es gibt aber unterschiedliche Methoden, was und wie man für das Formular braucht. Typisch sind das Textfeld, das versteckte Textfeld für Bearbeitungen wie der aktuellen Artikelnummer und ein großes mehrzeiliges Feld für Fragen und Kommentare. Außerdem braucht es das form-Tag als generelles Element für Formulare und die Schaltfläche zum Abschicken.

Weitere Möglichkeiten bestehen mit Auswahlfeldern. Das kann die Checkbox sein, um eine Antwortoption zu aktivieren, die Radiobuttons für ja/nein-Situationen oder auch die Auswahlliste, wenn mehrere Antworten vorgeschlagen werden.

Bei den Formularen gibt es noch weitere Möglichkeiten, die sehr wichtig sein können. Eine Variante ist die Beschreibung durch den label-Tag, wodurch auch die Formatierung besser gelingt und eine weitere kann sein, dass man schreibgeschützte Felder einsetzt.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel