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 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. Zum einem 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. Allerdings ist die eigentliche Bezeichnung abhängig vom jeweiligen Browser.
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
Gibbet hier nicht. Im Firefox 2 war es früher möglich, erst auf das <label>-Element zu klicken und dann mit
der Return-/Enter-Taste das "Datei auswählen"-Dialogfeld zu öffnen. Aber das ist eine einmalige Ausnahme gewesen.