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.Mehr lesenWie man wirklich ansprechende Formulare erstellt

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:

Mehr lesenText in Spalten darstellen mit „CSS3 Columns“

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 imMehr lesenFireBug 0.4 – Der ultimative Web Debugger

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!
Mehr lesenRunde Tabellen mit Mozilla

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!
Mehr lesenCSS Button Tricks

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.


Mehr lesenDer kleine Pfeil mal anders

Back to Top