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.

HTML5 Grundkurs

Farbauswahl und Schlüsselgenerierung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Abseits vom "Mainstream" gibt es noch weitere HTML5-Formularfelder, beispielsweise eine Farbauswahl oder die Generierung von Schlüsseln. Nicht bei all diesen Feldern ergibt sich sofort ein massenkompatibles Einsatzszenario.
04:04

Transkript

Die neuen Formularfelder von HMTL5 sind durchaus praktisch. Es gibt allerdings auch einige, wo ich mir nicht so ganz sicher bin, ob das wirklich ein großer Maßenmarkt kompatibler Usecase ist. Ich zeige Ihnen jetzt zwei Beispiele, und Sie urteilen bitte selbst für sich, ob Sie das für ein sinnvolles Formularelement halten oder nicht. Das eine Feld heißt 'color' und zwar wieder als Input-Feld, also Input-Type gleich 'color' hat irgendwas mit Farbe zu tun, Sie werden es gleich sehen. Und das zweite Feld heißt 'keygen', ist aber kein Eingabefeld, sondern wieder ein eigenes Element. Und dieses Element wird ebenfalls direkt ins Formular eingefügt und dann im Chrome angesehen. Wir gehen also auf "formular.html" und haben zum einen mal dieses Farbfeld. Wir sehen hier so einen schwarzen Balken. Klicken mal drauf! Und dann erhalten wir den Farbpicker des Betriebsystems, das heißt, wenn Sie das auf einem Mac ausführen, dann würden Sie den Mac-Farbpicker sehen, und bei Linux dann den Farbpicker des jeweils gewählten Fenster-Managers, ist also wieder etwas mit semantischer Information und wieder etwas, wo sich das Betriebsystem eben an dem bedient, was vorhanden ist. Na ja! Und wir wählen jetzt hier mal irgendeine mehr oder weniger schöne Farbe aus, zum Beispiel, dieses Orange, 255 Rot, 128 Grün, 64 Blau. Nun, gut! Und haben das schon mal uns angesehen. Das zweite 'keygen', also wohl irgendeine Schlüsselgenerierung mit zwei Einstellungsmöchlichkeiten - hochgradig oder nicht ganz so hochgradig: Ich nehme hochgradig, geht hier irgendwie um Sicherheit. Und dann noch das Feld hier ausfühlen, also "name@domain.de". Senden. Yeah! Und jetzt schauen wir mal, was angefügt wurde an die URL, denn die Daten wurden hier gerade verschickt. Also müssen Sie ein wenig nach vorne scrollen. 'color' ist...das ist das Zeichen für Doppelkreuz, dann 'ff', also 255, 80, 40, also 128 und 64. Das ist also der RGB-Farbcode der gewählten Farbe. Wir sehen also hier wieder einen Fallback-Mechanismus: 'Input-Type' gleich 'color' wird in Browsern, die das nicht unterstützen, als normales Textfeld angezeigt. Und dann müsste der Benutzer halt einen Farbecode mit vorangestelltem Doppelkreuz angeben. So fern es sinnvoll ist auf einer Webseite eine Farbe auszuwählen. Ich kann das mir vielleicht im Administrationsbereich eines Content-Managementsystems vorstellen, ansonsten ist es vielleicht aber nicht unbedingt das Hauptszenario und nicht unbedingt das Highlight der HTML5-Spezifikation. Ja, und 'keygen' hat uns jetzt tatsächlich einen sehr, sehr langen Schlüssel erzeugt. Geht hier also um private und öffentliche Schlüssel, und wenn man dem Server nicht traut, so etwas zu erzeugen, dann kann man das mit diesem Element eben client-seitig erledigen. Ob man wiederum der Client-Seite so vertrauen will, ist auch noch ein Punkt, über den man mal nachdenken könnte. Aus meiner persönlichen Sicht stehen diese beiden Felder, ich sage mal, so ein bisschen am Rande der Spezifikation. Wir selber setzen sie eigentich nicht ein. Wir haben tatsächlich mal in den Farbpicker eingesetzt in einem Projekt, aber, das war auch dann wirklich die einzige Ausnahme und das war tatsächlich eine Art von Administationsfeature, aber ansonsten ist das jetzt nicht unbedingt Kern dessen, was HTML5 anbietet. Ich wollte Ihnen damit aber zeigen, wie, ja, vielfältig Varianten, und ja auch abwechslungsreich diese Formularfeldoptionen sind, die wir dank HTML5 und den neuen Formularfeldern haben. Und je nach Anwendungsszenario sind manche Felder vielleich absolut uninteressant, andere aber vielleicht auch absolut interessant und absolut einsetzenswert. Wie wir auch gesehen haben gerade im Hinblick auf semantische Informationen mit dem Klassiker E-Mail-Feld haben wir wirklich einen ja deutlichen Bedienvorteil wenn wir diese neuen Felder einsetzen, plus eben, dass wir trotzdem eine Abwärtskompatibiltät hinzu älteren Browser haben.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 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!