HTML / CSS - Praxistutorial 3 - Daten

1. Die Abschnitte

2. Der Codeabschnitt


<fieldset>
  <legend>Ihre Daten</legend>
</fieldset>

3. Dateiupload

In unserem Bewerberformular wollten wir den potentiellen neuen Mitarbeitern die Möglichkeit geben, das Anschreiben und den Lebenslauf in Form einer PDF-Datei hoch zu laden. Dafür benötigt man ein <input>-Element vom Typ file. Der prinzipielle Aufbau sieht dann zum Beispiel so aus.


<input type="file" name="bla" id="blubb" />

Dieses Formularelement verfügt über einen Besonderheit. Es besteht nämlich aus zwei Teilen. Und das ist auch noch browserabhängig! Im IE gibt es ein Feld, wo man händisch einen Pfad zur gewünschten Datei angeben kann und zum anderen aus einem Button, der bei Klick einen "Datei auswählen"-Dialog öffnet. Bei den anderen Browsern dagegen gibt es nur einen Button und rechts daneben den Hinweis "Keine Datei ausgewählt". Und auch der Text ist anklickbar.

4. Unser Code


<p>
  Bitte schicken Sie uns ihr Anschreiben und Lebenslauf getrennt 
  als PDF-Dokument zu. Jede Datei darf maximal ein Megabyte groß 
  sein.
</p>
<label>
  <span>Anschreiben</span>        
  <input type="file" name="anschreiben" maxlength="1048576" />
</label>
<label>
  <span>Lebenslauf</span>        
  <input type="file" name="lebenslauf" maxlength="1048576" />
</label>

Erläuterung

Zunächst mal bauen wir einen Absatz mit entsprechenden Erläuterungen ein. Die technischen Details dazu habe ich schon hier erläutert. Im Gegensatz zu den vorherigen Abschnitten arbeiten wir diesmal ein wenig anders, wenn es um die <label>-Elemente geht. Denn nun verzichten wir einfach mal auf for und id. Wir packen den entsprechenden Code komplett hinein.

Den Text, den wir vorher in ein separates <label> gesetzt haben, binden wir diesmal in ein schnödes <span> ein, damit wir ihn im anschließenden Tutorial per CSS formatieren können. Anschließend kommt dann das <input>-Element. Das Attribut maxlength legt die maximale Dateigröße fest. Auch wenn sich da einige Browser nicht daran halten (siehe auch hier).

5. Die Funktionalität

Ist wie gehabt. Wenn man auf das <label> klickt, öffnet sich ebenfalls das "Datei auswählen"-Dialogfenster.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt