Wie man wirklich ansprechende Formulare erstellt

Eines der wichtigsten Elemente in Webseiten sind Formulare. Ohne Formulare wäre es nicht möglich Informationen vom Anwender auf den Server zu übertragen. Es könnten keine Gästebucheinträge gemacht oder Mails über ein Kontaktformular versendet werden.

Gerade weil Formulare solch ein wichtiger Bestandteil einer Seite sind, sollte man auch beim Design eines Formulars an den Anwender denken. Klar strukturierte Formulare mit sinnvollen Bezeichnungen und Beschreibungen der einzelnen Felder helfen dem Nutzer dabei, die benötigten Daten schnell eingeben zu können. Aber auch beim HTML Code der Formulare sollte man sich an allgemein gültige Regeln halten, damit diese z.B. auch von behinderten Anwendern leicht ausgefüllt werden können.

Formulardesign Screenshot

Formulare richtig aufbauen

Um ein Formular erstellen zu können, sollte man sich zuerst alle benötigten Daten notieren und sich überlegen, wie man diese als Formularfeld darstellen kann. Namen oder Emails wird man am besten als Texteingabefeld darstellen. Für Beschreibungen oder größere Texte eignet sich die Textarea besser. Eine Auswahl, z.B. ob der Nutzer Mann oder Frau ist, lässt sich sowohl durch Radiobuttons und auch als Auswahlliste darstellen. Mit Checkboxen fragt man schließlich Daten ab, die keine Texteingabe erfordern, sondern nur ausgewählt werden müssen.

Alle verschiedenen Felder sollten möglichst durch ein Label gekennzeichnet werden. Wenn notwendig kann man dies noch durch ausführlichere Beschreibungen ergänzen, wenn sich die benötigten Daten nicht durch ein oder zwei Wörter erklären lassen.

Wenn ein Formular aus mehreren, inhaltlich nicht zusammengehörigen Abschnitten besteht, so sollte man diese durch Fieldsets logisch aufteilen und mit Legend genauer beschreiben. Weiterlesen →

Text in Spalten darstellen mit „CSS3 Columns“

Um beliebigen Text in Browsern mit HTML darzustellen, braucht es nicht vieler Kenntnisse. Am einfachsten ist es den gewünschten Text zwischen zwei <p> Tags zu packen und schon wird er als Paragraph auf der Seite dargestellt. Doch wie schafft man es Text wie in einer Zeitung über mehrere Spalten hinweg darzustellen? Also so, dass der Text unten in der ersten Spalte endet und oben in der zweiten Spalte fortgeführt wird! Das ist mit HTML nicht möglich? Falsch! Mit dem neuen CSS3 Modul: Multi-column layout soll dies nun doch möglich werden. Und wer schon den neuen Browser Firefox 1.5 besitzt, kann dies gleich hier an dieser Stelle testen!

Anzahl der Spalten festlegen

Um festzulegen, mit wievielen Spalten ein Text dargestellt werden soll, braucht man nur folgende CSS Eigenschaft anzugeben: -moz-column-count. Wobei das Prefix -moz- speziell für den Firefox definiert wurde, da es sich hierbei noch nicht um einen endgültig anerkannten Standard handelt. Sollte sich dieser Standard durchsetzen, würde man das Prefix weglassen und nur noch column-count verwenden. Als Wert gibt man nun die Anzahl der Spalten an:

Weiterlesen →

FireBug 0.4 – Der ultimative Web Debugger

Webseiten von heute bestehen meistens nicht nur aus HTML und CSS, sondern häufig auch viel JavaScript. Es sind häufig gar keine Webseiten mehr, sondern schon richtige Webanwendungen. Und wir alle wissen, dass Anwendungen häufig auch Fehler enthalten können. Auch Webanwendungen sind davon nicht ausgeschlossen.
Bisher war es meistens schwierig solche Fehler im JavaScript Code oder im HTML zu finden. Es fehlen die richtigen Tools, wie man sie z.B. bei der Programmierung mit Java ode C++ gewohnt ist, um diese Fehler aufzuspüren und zu beheben. Da HTML, CSS und JavaScript im Browser ausgeführt und angezeigt werden, braucht man auch Tools, um sie genau da - während sie ausgeführt werden - zu debuggen. Der Browser Firefox bietet hierfür einige gute Tools an. Ein guter Debugger ist z.B. Venkman. Und mit dem DOM Inspector kann man sich bequem den DOM Tree der Seiten anschauen.
Doch in Zeiten von web 2.0 und Ajax braucht man noch bessere und spezialisiertere Tools. Und eins dieser "Übertools" ist FireBug, welches jetzt in der Version 0.4 erschienen ist.

Hier ein kurzer Überblick über die neuenFeatures:

JavaScript Debugger

FireBug ermöglicht es, Breakpoints im JavaScript Code zu setzen, Schritt für Schritt durch die Codezeilen zu springen und lokale Variablen sowie den Stack zu betrachten.

Stack Traces bei JavaScript Fehlern

Jeder JavaScript Fehler wird mit einem Stack Trace angezeigt. So kann man genau sehen, an welcher Stelle im Code und durch welchen Aufruf ein Fehler genau aufgetreten ist.

JavaScript Fehler debuggen

Wenn ein Fehler auftritt, reicht es meistens nicht, nur den Stack Trace zu sehen. Meistens möchte man auch sehen, welche Werte bestimmte Variablen gerade hatten, als der Fehler auftrat. Mit FireBug kann man durch die Einstellung "Break On Error" den Debugger automatisch anhalten lassen, wenn ein Fehler auftritt. Man wird dann sofort zur richtigen Stelle im Code gebracht.

Logging Funktionalitäten

Über das console Objekt kann man verschiedene Nachrichten auf der Konsole ausgeben lassen, während der JavaScript Code ausgeführt wird. Dabei kann man verschiedene Stufen wählen, wie z.B. console.debug(), console.info(), console.warn() oder console.error(). Diese Meldungen werden dann auch noch in unterschiedlicher Farbdarstellung in der Konsole kenntlich gemacht.

Außerdem besitzt FireBug noch viele weitere wichtige und nützliche Funktionen. So kann man sich detailiert den Request anschauen, der bei Ajax gesendet wird. FireBug liefert auch eine sinnvolle JavaScript command line, um schnell kleine JavaScript Schnipsel ausführen zu können. Und über die verschiedensten Inspektoren können alle möglichen Aspekte von HTML, DOM, CSS und JavaScript genau betrachtet werden.

Ich finde das FireBug ein "Must Have" Tool für Webentwickler ist. Es läßt sich leicht als Erweiterung in den aktuellen Firefox 1.5 Browser integrieren.

Runde Tabellen mit Mozilla

In einem meiner ersten Artikel beschrieb ich, wie man seine Tabellen mit einfachen, runden Ecken versehen kann. Alles was man damals dazu benötigte waren vier Grafiken. Für jede runde Ecke eine.

Doch inzwischen sind einige Winter durchs Land gezogen und ich habe mich gefragt, ob es nicht doch eine andere, leichtere Möglichkeit geben könnte. Und siehe da, eine kurze Suche im Netz brachte mich auf den richtigen Weg!

CSS3 ist die Antwort!

In CSS3 sind einige Erweiterungen zum aktuellen Standard CSS2 vorgesehen, unter anderm auch die Möglichkeit runde Ecken darstellen zu können. Das CSS3 Modul: Border existiert momentan jedoch nur als Arbeitspapier (Working Draft) des W3C. Jedoch hat sich Mozilla einiger dieser Erweiterungen angenommen und schon als vorläufige Erweiterung (Proprietary Extensions) umgesetzt. Diese werden durch ein vorangestelltest -moz- gekennzeichnet. Bei einer dieser Erweiterungen handelt es sich um -moz-border-radius. Und eben diese benötigen für unsere runden Ecken!
Weiterlesen →

CSS Button Tricks

Jeder der schon Formulare in HTML erstellt hat, wird sich bestimmt schon einmal die Frage gestellt haben, ob es nicht eine Möglichkeit gibt, um den Buttons ein anderes Aussehen zu geben.

Standard Button

Standardmäßig haben die Buttons ein graues langweiliges Äußeres. Je nach Betriebssystem und Browser können diese zwar etwas unterschiedlich aussehen, aber sie könnten dennoch viel individueller aussehen, wenn man nur weiß wie.



HTML Code:


Farbiger Button

Doch wie man leicht erkennen kann, will so ein Button nicht wirklich in das Design der Seite passen. Er sticht förmlich heraus und sieht wie ein Fremdkörper aus. Warum passen wir nicht einfach die Farbe an? Okay!
Weiterlesen →

Der kleine Pfeil mal anders

Ihr habt Euch vielleicht schon einmal gefragt, warum auf manchen anderen Seiten euer Cursor anders aussieht, als er standardmäßig eingestellt ist? Dieser Effekt wird durch CSS (Cascading Style Sheets) ermöglicht und in diesem Artikel erkläre ich, wie Ihr diesen Effekt auf euren Seiten einbinden könnt.

Im Voraus ist zu sagen, dass derzeit nur wenige Browser diesen CSS-Effekt unterstützen. Allen voran der neue Opera 5.02 und Netscape 4.75. Wie der MSIE 5.5 unterstützt auch der neue Netscape 6 Browser diesen Effekt, jedoch nicht mit dem Funktionsumfang wie der MSIE.

Den Cursor auf der ganzen Seite ändern

Dafür gibt es zwei Möglichkeiten:

1. Man legt die Cursor-Art im Tag fest.


2. Der Befehl wird zwischen den Tags eingefügt.


Weiterlesen →