Weitere Formularelemente kennenlernen

Sie haben jetzt in diesem Kapitel die wichtigsten neuen HTML5-Formularfelder gesehen, aber es gibt noch so ein paar weitere. Ich komme nicht umhin, die Ihnen auch mal kurz zu zeigen, aber die sind vielleicht ein bisschen exotischer oder teilweise komplett kurios. Ich habe mich für drei entschieden, und zwar zunächst zwei, die so eine Art von Fortschritt innerhalb eines Prozesses oder eines Assistenten oder Wizards anzeigen sollen, und zwar gibt es das Element progress, was also einen entsprechenden Fortschritt anzeigen soll. Da ist der Name schon klar. Und dann gibt es noch meter, also jetzt nicht der Meter, sondern eher im Sinne von Messer, von messen, jetzt nicht von schneiden, und bei beiden kann man, ähnlich wie bei range, einen Minimalwert und einen Maximalwert angeben und auch einen aktuellen Wert. Ich mache das mal, ich nehme mal hier den Wert 4 und bei meter, dass wir vielleicht einen kleinen Unterschied sehen, nehmen wir den Wert, sagen wir mal, 5. So, und jetzt haben wir also diese beiden Elemente, linsen mal in den Browser, was der davon hält -- neu laden und jetzt sehen wir also hier einen Fortschrittsbalken und bei meter auch einen entsprechenden Bereich. Die Darstellung ist also relativ unterschiedlich. Bei progress sieht man noch relativ klar die Skala, aber bei meter tut sich da ziemlich wenig. Nehmen wir mal den Edge und auch hier, progress und meter sind von der Darstellung gar nicht so unähnlich zum Google Chrome, aber es wird halt einfach ein entsprechender Zustand angezeigt. Der Unterschied zwischen beiden liegt ein bisschen darin begründet, dass progress etwas ist, was man in der Regel auch clientseitig verändert, was auch animiert werden kann, was bei meter nicht der Fall ist. Das heißt, wenn sich dieser Zustand, während man auf der Seite ist, noch ändert, dann ist vielleicht progress ein recht guter Aspekt, bei meter eher nicht. Trotz allem, wenn man die eine Darstellung besser als die andere findet für den Sinn und Zweck, mit dem man das einsetzen möchte, dann kann man natürlich das jeweilige nehmen, was die bessere UI hat. Das heißt, die leichter eingebaute Semantik ist da eigentlich völlig egal, wenn die Darstellung passt, aber das gilt ja für vieles im Web. Andererseits, wenn man so eine Art von Fortschritt hat, zeigt man den wieder häufig auch numerisch an, fünf von zehn oder so, aber klar, so was wie range, das lässt sich verändern, aber progress und meter ist entsprechend fest, ist so ein bisschen wie ein Fortschrittsbalken bei einer Installation. Da lasse ich es mir ja noch eingehen, dass das eine nützliche Sache ist, es gibt aber dann auch noch meinen, ich sage mal, meinen Lieblingsexoten, und zwar input type= -- und es steht relativ weit oben, wir sind schon ein bisschen drübergeflogen -- input type="color". Was könnte das denn bloß sein? Na ja, Sie vermuten es wahrscheinlich schon, es wird irgendwie eine Form von Farbpicker sein. Ein Farbpicker? Auf einer Website? Ja, tatsächlich. Ich klicke drauf und jetzt kommt tatsächlich der Farbpicker des Betriebssystems. Ich kann also hier eine wunderschöne Farbe auswählen. Wie wäre es mit diesem, na ja, wird orange sein. Ha, jetzt habe ich hier ein Orange. Was bedeutet das in der Praxis? Ich klicke mal auf Abschicken. Ach, wir haben ja noch ein Pflichtfeld, also test@example.com, unter 20 Zeichen, passt also. Abschicken und jetzt ganz am Ende sehen wir, okay, color, dann %23, ist das Doppelkreuz URL-codiert, FF8040, na ja, und wenn wir uns die Farbe anschauen, die ich gewählt habe: FF entspricht ja 255, das ist also der Rotwert. Na ja, und die restlichen Werte entsprechen wohl dann auch dem, was in der URL steht. Das heißt, wir bekommen den RGB-Farbwert mit einem vorangestellten Doppelkreuz übermittelt. Mein Level von "Ich bin beeindruckt" hält sich ein wenig in Grenzen. Es gibt sicherlich Einsatzzwecke, wo man tatsächlich eine Farbe angeben will, vielleicht im Backend von einem Content-Managementsystem. Aber ist das wirklich so wichtig, wie jetzt zum Beispiel so ein Slider hier oder ein E-Mail-Feld? Ich habe da so meine Zweifel, ist aber meine persönliche Einschätzung. Und mit diesen Exoten haben wir meiner Meinung nach die wichtigsten neuen HTML-Felder uns alle angeschaut, haben auch einen Blick auf die Validierung geworfen, sowohl mit Mark-up, als auch mit Code, und haben damit diesen Themenblock, denke ich, umfassend behandelt.