Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Formulare mit HTML und CSS

Passwortfelder, versteckte Felder, Uploads

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Versteckte Felder sind in der Browseransicht nicht sichtbar, aber nützlich bei der Weiterverarbeitung. Außerdem sehen Sie, wie Sie mit Passwortfeldern arbeiten und Formularfelder zum Hochladen von Dateien definieren.

Transkript

In diesem Film dreht sich alles um besondere Felder, nämlich Passwortfelder, versteckte Felder und Felder, um Dateien hochzuladen. Beginnen wir mit den Passwortfeldern. Sie sehen, die Besonderheit ist die, wenn ich hier reintippe, erscheinen nur Punkte. Wenn ich hingegen hier etwas schreibe, erscheint der Text ganz normal. Wie erstelle ich ein Passwortfeld? Da muss ich angeben, dass es type="password" ist. Ansonsten gibt es keine Besonderheit. Entscheidend ist aber der folgende Punkt: Dadurch, dass ich ein Feld zum Passwortfeld mache, schütze ich die Eingabe nicht wirklich. Ich schütze es nur davor, dass jemand gerade hinter einem steht und schaut, was man tippt. Aber wenn ich das zum Beispiel ganz normal verwenden würde, würde das, was ich hier eingetragen habe, ebenfalls erscheinen. Es ist dadurch nicht an sich geschützt, das muss man durch andere Mechanismen serverseitig noch wirklich schützen. Das Passwortfeld macht nichts anderes, als die Eingabe, was da angezeigt wird, zu ändern. Ebenfalls wichtig für die weitere serverseitige Verarbeitung sind die versteckten Felder. Da habe ich an dieser Stelle eins ergänzt. Bei versteckten Feldern geben Sie an type="hidden" und ein name und ein value. Das wird dann übertragen. Sichtbar ist es in der normalen Browser-Ansicht hingegen nicht. Also, Wert und 42 sieht man nicht. Wenn ich aber mal was hinschreibe und die Übertragung simuliere, Passwort schreibe ich geheim, und gehe auf Los!, dann sehen wir, zum einen bewirkt das Passwortfeld, dass die Meldung in Firefox erscheint, ob ich das Passwort speichern möchte. Möchte ich nicht. Hier oben sehen wir, was alles übertragen werden würde. Also Vorname Florence, das habe ich hingeschrieben, Nachname Maurice, das habe ich auch hingeschrieben. Das Passwort würde im Klartext erscheinen. Sie sehen den Text, den man eben nicht gesehen hat, dann auch hier. Außerdem ist oben zu sehen, der Wert = 42. Das sind Informationen, die aus dem versteckten Feld kommen. Das versteckte Feld braucht man wirklich nur für serverseitige Sachen. Man muss immer dran denken, dass es nicht wirklich versteckt ist. Der Benutzer würde ja jederzeit, wenn er sich den Seiten-Quelltext anzeigen lässt, ebenfalls diese Inhalte sehen. Kommen wir noch zu einem weiteren Formularfeld. Nämlich für den Datei-Upload. Das funktioniert folgendermaßen. Wir brauchen bei dem Form-Start-Tag zum einen noch enctype="multipart/form-data" Wir müssen als method "post" angeben. Dann gibt es ein Inputfeld, type="file". Dem kann ich irgendeinen Namen geben und wenn ich das aufrufe, sehen Sie, dass das hier erscheint. Es gibt einen Durchsuchen-Button. Wenn ich draufklicke, kann ich irgendetwas hier auswählen und kann es dann absenden. Entscheidend ist natürlich, dass ich dann serverseitig ein Script brauche, was die Datei auch entgegennimmt, sonst passiert damit nichts. Wir haben uns in diesem Film mit ein paar besonderen Feldern beschäftigt. Da war einmal type="password" für Passwortfelder, type="hidden" für versteckte Felder und type="file" für einen Datei-Upload.

Formulare mit HTML und CSS

Lernen Sie Formulare mit HTML zu erstellen und wie die Formatierung von Formularen und die responsive Anordnung der Felder vonstatten geht.

1 Std. 16 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!