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

Zahlen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Eingabe von Zahlen wird von HTML5 auf unterschiedliche Art und Weise unterstützt. So ist es möglich, eine Art "Slider" zu implementieren. Aber auch ein "normales" Textfeld nebst Schaltflächen zum Hinauf- und Herunterzählen ist neu mit dabei.
07:15

Transkript

Bei der Eingabe von Zahlenwerten in ein Formularfeld, gab es vor HTML5 eigentlich nur zwei Varianten, erstens simples einzeiliges Textfeld, keine semantischen Informationen, vielleicht noch eine JavaScript Validierung hinten dran, aber sonst überhaupt keine Bequemlichkeit, keine Funktionalität. Variante zwei etwas selbstgestricktes, also beispielsweise so ein Stepper, wo man hoch und runter zählen konnte oder ein Schieber, wo man Daten eingehen konnte, schon ein bisschen spannender, aber JavaScript war nützlich und wir mussten sie eben von Hand machen. Jetzt in HTML5 hat sich das geändert und es gibt mehrere Möglichkeiten Zahlen einzugeben, zwei davon schauen wir uns jetzt spezifisch an. Je nach Einsatzzweck ist die eine oder die andere vielleicht durchaus gut geeignet. Ich will beginnen mit dem was vom Namen her schon eindeutet, worum es geht, nämlich number, also input type gleich number und ich gebe einen Namen entsprechend an und würde sagen wir schauen uns das direkt mal im Browser an. Also hinten noch den Dateinamen anhängen. Jetzt haben wir das Zahlenfeld ich kann jede Zahl eingeben, ich kann die hoch und runter zählen mit der Maus und wenn ich irgendein Mist eingebe, geht das auch, aber wenn ich hoch zähle, fange ich sozusagen wieder bei null an und wir haben die gewisse Browser Unterschiede, ich kopiere die URL mal in die Zwischenablage und rufe dann zum Beispiel ein Firefox auf. Im Firefox sehen Sie, wie auch bei den anderen Feldern schon, einfach ein normales Textfeld. Im Internet Explorer sieht es nicht anders aus, ist also auch abhängig davon, welchen Browser Sie verwenden und insbesondere natürlich auch, ob es ein Desktop Browser oder ein mobiler Browser ist. Sie ahnen sicher, wie es auf einem mobilen Browser aussieht, bei dem Zahlenfeld. Sie bekommen eine angepasste Tastatur. Der Browser hat die semantischen Informationen, das ist ein Zahlenfeld, also kann beispielsweise eine Tastatur angezeigt werden, auf der sich nur Ziffern befinden. Auf einem Tablet ist meistens mehr Platz, das heißt, zu bekommen da häufig eineTastatur, auf der sich dazu auch ein paar Buchstaben befinden, aber vor allem schon, alle Ziffern. Sie müssen nicht extra umschalten, um auf das Ziffern Layout zu kommen. Das heißt, diese semantischen Informationen können hier wieder mit verwendet werden und zur Validierung gibt es hier auch noch denn ein oder anderen Aspekt zu berichten. Das ist hier eine Möglichkeit, also ein Zahlenfeld input type gleich number zur Eingabe von Zahl. Das heißt, man hat immer noch ein freies Eingabefeld, es gibt aber noch eine zweite Möglichkeit, die in Frage kommt und zwar heißt die range, input type gleich range und bei input type gleich range sind wir in einer ganz klassischen Situation, wir wollen, dass ein Benutzer eine Zahl aus einem bestimmten Intervall angibt, beispielsweise wenn man eine Umfrage hat und man soll etwas bewerten auf einer Skala von sagen wir mal eins bis zehn. Dann könnten wir so ein Range anzeigen, es gibt da diverse Attribute zum Beispiel max, also der Maximalwert, sagen wir einfach mal Zehn und den Minimalwert normalerweise ist der Null, aber jetzt würde ich sagen der ist mal Eins, ansonsten geht es standardmäßig von eins bis hundert beispielsweise. Speichern wir das mal an, gehen wieder in den Browser, laden neue und tatsächlich wir haben hier ein Eingabefeld für eine Zahl, aber das ist ein Schieber und Sie sehen, wenn ich hier ziehe, das ist jetzt keine fließene Animation, ich kann nicht jeden beliebigen Wert angeben, sondern eins, zwei, drei, vier, fünf, sechs, sieben, acht, neun und zehn, sozusagen auf unsere Skala. Auch hier wieder der Cross-Browser- Test was sagt der Firefox, der Firefox bietet auch den Schieber an, der ein bisschen anders aussieht, aber auch hier haben wir dieser Schritt weiter, das heißt ich kann auch hier nicht irgendwer einen Wert zwischen drin angeben, funktioniert also wunderbar und vielleicht ein bisschen überraschend ist wenn wir die URL nehmen, kopieren und dann im Internet Explorer anzeigen, dann bekommen wir bei neu laden, diesen Schieber und man kann hier zwar relativ freimütig angeben, wo man hin will, also dieser Bereich vier, der zieht sich ein bisschen, aber er rastet dann ein. Sie sehen gleich die Animation, ich bin jetzt hier doch ein bisschen rechts von diesem Vierer Mark lass los und es rutscht rein. Diese UI hier, die haben Sie jetzt nicht nur auf diesen Windows 8 System, die hätten Sie auch beim aktuellen Internet Explorer und zum Beispiel Windows 7, aber woher kennen wir diesen Schieber? Das ist der Schieber im wesentlichen von Windows Phone, also von dieser oberflächen Gestaltung dort und zum Teil natürlich auch von Windows 8. Hier sehen wir einen wichtigen Aspekt - mobile Endgeräte. Auf einem mobilen Endgerät ist das oder kann das sein, wenn es der Browser so umsetzt der Schieber des Betriebssystems, das heißt obwohl es eine Website ist, sieht das fast schon aus wie innerhalb von einer nativen App und das ist natürlich auch eine Richtung, in die es gehen soll, wir machen jetzt Webanwendungen nicht mehr normale Webseiten und diese Webanwendungen, die sollen sich so verhalten, wie eine eine richtige Anwendung unter dem Betriebssystem und da hilft es natürlich, wenn die oberflächen Elemente ähnlich oder gar genauso aussehen und das sieht man hier eben im Internet Explorer sehr sehr schön und sehr sehr deutlich, dass hier also ein oberflächen Element verwendet wird, dass es unter dem mobilen Betriebssystemen und eben auch unter dem Betriebssystemen hier standardmäßig eingebaut gibt. Wenn man das Standardverhalten nimmt und das ist ein wichtiger Aspekt, die Zeiten sind vorbei, bei der eine Anwendung immer eins zu eins überall aussieht. Klar per CSS kann man das so steilen, dass es überall dasselbe Aussehen hat, aber vielleicht ist es gar keine schlechte Idee, in vielen Fällen zu sagen, ich will dass solche oberflächen Elemente aussehen, wie eben auf dem Ziel-Betriebssystem. Wen den ganzen Tag auf einem iPhone arbeitet, der will möglicherweise, dass die oberflächen Elemente genauso aussehen auf der Website, wie anderswo auf dem mobilen Endgerät. Wer ein Windows Phone hat, will das die entsprechende Windows Phone UI-Elemente angezeigt werden und dieses eben möglich weil wir jetzt semantische Informationen haben. Wir haben nicht denn nur Textfelder, sondern wir haben Felder, in die bestimmten Arten von Daten eingegeben werden sollen, bei Range eben etwas zwischen eins und zehn und wenn wir zurückschalten einen älteren Browser, zum Beispiel den Internet Explorer 9, der hat diese Formularfelder noch nicht unterstützt, dann ist es eben wieder ein ganz normales Textfeld. Wir haben also eine Art Fallback-Mechanismus gefunden für ältere Browser, komplett ohne Skriptunterstützung. Das Bedarf jetzt also keines JavaScripts, hätten wir den Schieber lösen wollen für ältere Browser, dass er dort auch so aussieht, dann hätten wir wohl zur Script-Waffe greifen müssen und das eben wichtiger Aspekt, dadurch dass die semantischen Informationen mit übergeben werden, kann der Browser entscheiden, wie optimal diese Daten angezeigt werden und wie eine optimale Bedienoberfläche für Benutzer angeboten werden kann. Bei Zahlen eben gibt es dass vor allem in zwei Varianten nämlich input type gleich number und input type gleich range.

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!