HTML5 Forms mit Firefox 4

Vor kurzem hab ich ja meinen Firefox auf die Beta 7 gehoben. Und damit steht mir jetzt endlich die HTML5 Form Validation zur Verfügung. Das klingt vorerst ja mal toll, aber was heißt das eigentlich wirklich?

Erstens kann man für Text-Inputs mit Bordmitteln einen Platzhaltertext definieren, der sofort verschwindet wenn der Cursor im Feld ist, oder das Feld ausgefüllt wurde.

<input placeholder="Enter your text here !!!" />

Selbiges funktioniert auch wunderbar für Textareas.

Als erste wirkliche Validierungsfunktionalität sticht gleich mal das Attribut required ins Auge:

<input required />
<textarea required></textarea>


Hier markiert der Browser diese Felder sofort mit einem roten Rand und verhindert ein Submit der Form, falls das Feld leer ist.

Dazu gibt es noch das maxlength Attribut, um die Anzahl der Zeichen zu begrenzen.

<input maxlength="4" />

Firefox blockiert hier einfach die Eingabe nach den angegebenen Zeichen, das funktioniert aber auch schon in der Version 3.6

Zusätzlich sind in HTML 5 auch noch die Attribute min, max und step definiert:

<input min="100" max="400" step="10" />

Leider ist dieses Feature aber noch nicht im Firefox implementiert, wobei ich aber davon ausgehe, dass das spätestens mit der 4.0 Final fertig sein wird.

Neu in der 4er Beta sind jedoch die zusätzlichen Typen für die Input Boxen:

  <input type="search" />
  <input type="tel" />
  <input type="url" />
  <input type="email" />

Wobei ich beim type=”search noch keine spezielle Funktionalität erkennen konnte, type=”tel validiert in der Basiseinstellung vorerst alles.
Url und email hingegen prüfen out of the box auf gültige Werte.
Genauer konfigurieren lassen sich diese Typen mit dem pattern Attribut, dann macht auch der Tel-type Sinn.

Eine Vorschlagsliste für potentielle Werte deckt HTML5 auch ab:

  <input placeholder="list" list="nameslist"/>

  <datalist id="nameslist">
    <option value="Daniel" />
    <option value="Kreiseder" />
    <option value="XYZ" />
  </datalist>

Hier ist endlich kein JavaScript mehr notwendig und die Datalist ließe sich sehr einfach am Server generieren. Toll wär jetzt auch noch, wenn man auch nur Items, die in der Datalist auftauchen zulassen könnte, obwohl sich da doch auch eine Select Box anbietet. Aber schön wärs trotzdem.

Will man jetzt schlußendlich noch die Validation-Error-Meldungen anpassen, kann man das Mozilla spezifisch mit dem Attribut x-moz-errormessage auch machen. Ist zwar blöd, dass das über keinen Standard geht, aber grundsätzlich kann man das tun.

Firefox 4 Beta 7

Ich bin ja schon seit einiger Zeit Firefox 4 Beta User. Heute meldete sich ein Update desselben auf die neue Beta 7.

Große Erwartungen hatte ich eigentlich nicht wirklich, umso überraschender fand ich dann doch die markanten Änderungen. Markant deswegen, weil man die Changes sofort sieht und erst recht fühlt.

Ich hab vom Feeling her ein gutes Gefühl (Andi Möller)

Mit Fühlen meine ich die (subjektiv) merkbar bessere Performance im Seitenaufbau. Große, schwergewichtige Websites laden irgendwie schneller, es wirkt einfach runder, flinker. Grund für die gespürte schnellere Geschwindigkeit ist die neue JavaScript Engine Jägermonkey, erste Benchmarks hinterlegen den subjektiven Eindruck auch mit Zahlen.

Neben dem schnelleren Surfen wirkt auch der ganze Browser flinker, mir ist das extrem beim TabCandy aufgefallen, das neuerdings Firefox Panorama genannt wird. Hier wirkt der Firefox endlich rund und fertig.

Ich habe ihn nur ganz leicht retuschiert (Olaf Thon)

Ins Auge sticht aber auch sofort die überarbeitete GUI der Beta 7. Angelehnt an die Webkit Browser kann man jetzt getrost die Statusleiste am unteren Ende des Fensters ausblenden, weil sie schlichtweg nicht mehr gebraucht wird. Ich brauchte die Leiste nur zum Starten vom Firebug und wenn ich wissen wollte wohin mich ein Link führt. Firebug lässt sich bekanntlich mit <F12> starten, die Adresse eines Links beim Mouse-over erscheint jetzt in der neu gestalteten Navigation Toolbar.

Der reload Button sitzt jetzt an der rechten Ende der Adresszeile, die ganze Toolbar wirkt aufgeräumter und eleganter.

Das ist Schnee von morgen (Jens Jeremies)

Gerade letzte Woche wünschte ich mir die HTML 5 Form Validation für den Firefox, jetzt funktionert es schon.
Hardware Acceleration für diverse Renderings und per default aktiviertes WebGL sind weitere Neuerungen, die komplette Feature Liste und Details findet man in den Release Notes.

Manni Bananenflanke, ich Kopf, Tor! (Horst Hrubesch)

Und dann war noch dieses kleine, versteckte Feature. Oft bekomme ich Links geschickt, auf die ich nicht klicken kann. Sprich ich muss den Text markieren – Rechtsklick – kopieren – klick auf “neuen Tab öffnen” – Rechtsklick . Und jetzt kommt die Neuerung:

Mit Paste & Go wird die Seite sofort geladen, ich erspare mir einen unnötigen Schritt. Das mag jetzt trivial und irrelevant klingen, macht man diese Abfolge (so wie ich) mehrmals täglich ist das eine erhebliche Erleichterung. Für mich ist dieses Feature schlichtweg genial.

Das war europäische Weltklasse (Felix Magath)

Mich hat die Beta 7 erstmal voll überzeugt. Jetzt kann eigentlich nur mehr Instabilität diesen Eindruck stören, ich gehe aber nicht davon aus. Jetzt hoffe ich nur mehr, dass bald das Beta aus der Versionsbezeichnung raus fällt.

Ich habe fertig.

Firefox 4 Beta 2

Heute machte mich mein Vierer – Firefox darauf aufmerksam, dass er sich gerne aktualisieren würde. Nämlich auf Version 4.0 Beta 2.
Das natürlicherweise nur, weil ich mit der Beta 1 surfte, eine stabile Version will sich natürlich nicht auf eine Beta heben lassen. Klar.

Blöderweise habe ich mir mit der ersten Beta meinen “normalen” 3.6.x Firefox etwas zerschossen. Ganz so rund lief er nicht mehr, irgendwie klappte das mit den Tabs nicht mehr so richtig. Das kommt davon wenn man eine Beta nicht mit einem neuen Profil startet. Aber egal, da war ich wenigstens gezwungen mit dem Vierer zu arbeiten. Muss ja nicht unbedingt ein Nachteil sein. So merkt man natürlich sofort alle Änderungen:

Obenliegende Tabs

Die erste offensichtliche Neuerung sind die jetzt über der Adressleiste liegenden Tabs. Ziemlich ungewohnt, aber gefällt mir besser. Ich musste das aber manuell aktivieren:

Add-ons

Dann der erste Schrecken: Viele Add-ons funktioniern (noch) nicht. Foxmarks zum Beispiel. Auch der Firebug macht noch ein bisschen Probleme. Zumindest ersteres betrifft mich nicht mehr, ich hab zu Firefox Sync gewechselt.

Installiert man dieses Add-on: Add-on Compatibility Reporter, so kann man wenigstens “ältere” (=noch nicht auf die neue Version gehobene) Add-ons aktivieren und selber austesten. Das funktioniert in vielen Fällen gar nicht so schlecht.

Das alles gabs aber schon in der Beta 1. Neu dazugekommen ist mit der Beta 2:

App Tabs

Für mich ist das die beste Neuerung. Mit dieser Funktion wird die Tableiste verkleinert (nur das Icon wird angezeigt) und ganz nach Links verschoben. Somit brauchen Tabs, die ich dauernd offen habe viel weniger Platz. Optimal für Webmail, Google Reader, Twitter usw.

Wirklich praktisch. Optimal wär hier, wenn man – ähnlich dem OS-X Dock – als Overlay zum Icon noch die Anzahl der neuen Beiträge/ungelesen Mails etc. angezeigt bekommen würde. Dann wärs wirklich perfekt.

Fazit

Für mich ist der neue Firefox wirklich ein großer Fortschritt. Die bessere Performance, die neuen tollen Innovationen überzeugen mich (hier kann man alle neuen Features im Detail nachlesen). Und das alles in einer sehr guten Stabilität, ich hatte kaum Probleme mit Abstürzen.

Ein Einsatz lohnt sich also jetzt schon. Trotz Beta.