Hauptmenü

Untermenü

HTML5 - Formulare - Attributwerte Teil 2

1. email

Kennt ihr auch noch diese wahnsinnig komplizierten regulären Ausdrücke, um auf eine syntaktisch korrekte E-Mail zu prüfen? Ich auch. Habe mir selbst mal die Mühe gemacht und einen eigenen dafür geschrieben. Mit HTML5 hat diese Müh gottlob ein Ende. Denn ab sofort übernimmt das der Browser für uns.

Beispiel

Irgendwas reintippern und absenden.


<input type="email" name="mail">

Aber!

So wahnsinnig pralle ist das im Endeffekt doch nicht, da bei der Domain nicht auf die Endung geprüft wird. So lassen alle Browser Eingaben wie asdf@asdf.asdf zu. Wenn man es also bei der Validierung ganz genau nimmt, so muss man leider wieder auf die ach so geliebten regulären Ausdrücke zurückgreifen.

2. number

Hiermit wird auf Ganzzahlen geprüft. Alle unterstützenden Browser bieten dabei rechts neben dem Textfeld Schaltflächen an, um sich zur gewünschten Zahl durchzuklicken. Allerdings kann man trotzdem irgendwelchen Blödsinn reinschreiben. Nur werden in dem Fall die Daten nicht übermittelt. Einen möglichen Standardwert setzt man wie gehabt mit value.

required

Wenn man damit arbeitet, so muss der Eintrag einen gültigen Wert haben. Das gilt besonders bei der Verwendung von min und max (siehe weiter unten). Allerdings klappt das nur im Opera.

Beispiel

Irgendwas reintippern und absenden.


<input type="number" name="num" value="2" />

Screenshot aus Opera

number im Opera

min, max und step

Klappt in allen drei Browsern wunderbar bei time und week. Nur der Safari und Chrome zicken gerne bei step herum. Offenbar haben die auch ein PISA-Problem und können nicht richtig rechnen. Oder es liegt mal wieder an einer völlig hirnrissigen Spezifikation, die irgendeinen Blödsinn vorschreibt und die Entwickler von Opera gesagt haben:

"Den Schwachsinn machen wir nicht mit. Wir machen es vernünftig."

<input type="number" name="num" value="12" 
  min="4" max="40" step="3" required />

3. range

Definiert einen, wie soll ich sagen, mehr oder weniger unbestimmten Wert innerhalb eines Bereiches. Man könnte das zum Beispiel bei einer Abstimmung à la "Wie gefällt ihnen das" einsetzen. Dabei wird bei obigen Browsern eine Art Schieberegler "von - bis" eingeblendet, den man munter hin und her ziehen kann. Und wehe einer von euch zieht den ganz nach links.

Beispiel

Wie gefällt euch mein Auftritt?

Mies Total supi


Mies <input type="range" name="points" /> Total supi

Screenshot aus dem IE 10

Weil es da meiner Meinung nach am Besten umgesetzt worden ist. Sieht optisch ganz nett aus und blendet vor allem den aktuell ausgewählten Wert ein.

range IE

Ein Hinweis

Ohne weitere Angaben nehmen die Browser einen Bereich von 0 bis 100 an. Und setzen den Schieberegler genau in die Mitte.

min, max und step

Werden alle unterstützt. Bei einer Angabe von min und max (sollte man beide angeben) legt man einen eigenen Bereich fest. Mit step kann man die Intervalle bestimmen, auch wenn das wohl nur sehr selten notwendig sein sollte. Und value gibt den Standardwert vor, also den Punkt, wo der Schieberegler seinen Ausgangspunkt hat.


<input type="range" min="1" max="20" step="2" value="15" />

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt