Tipps zur Erstellung großartiger Web Formulare

1. Labels verwenden

Sie benötigen keine Labels, damit Ihr Formular funktioniert, aber wie ein Leser von CSS-Tricks einmal sagte, ist es ein Verbrechen gegen die Barrierefreiheit, sie nicht zu verwenden. Labels geben an, wofür das Eingabefeld bestimmt ist, und verbinden sie miteinander. Die Verwendung des <label>-Tags ist nicht nur semantisch korrekt, sondern bietet Ihnen auch die Möglichkeit, sie mit CSS einzigartig zu gestalten.

2. Labels spalten

So erzielen Sie diese tabellenähnliche Struktur in Formularen, ohne tatsächlich eine Tabelle verwenden zu müssen. Legen Sie einfach eine feste Breite fest, spalten Sie sie nach links, richten Sie den Text rechts aus und geben Sie ihr einen kleinen rechten Rand. Wunderschön.

label {
  float: left;
  text-align: right;
  margin-right: 15px;
  width: 100px;
}

3. Achten Sie darauf, Ihre Standardstile nicht zu ruinieren

Viele Browser haben standardmäßig Stile für Eingabeschaltflächen. Dies sorgt für eine schöne, konsistente Benutzererfahrung. Wenn Sie also davon abweichen, stellen Sie sicher, dass Sie einen guten Grund dafür haben. Eine gängige Methode, dies zu untergraben, ist die Verwendung einer CSS-Reset-Technik, die etwas wie folgt enthält:

* {
  border: none;
}

Das kann gut sein, da es unerwünschte Rahmen verhindert, die um unerwünschte Objekte erscheinen könnten. Es kann jedoch auch die Standardstile für Eingabeschaltflächen in Firefox beeinträchtigen. Einige Browser sind widerstandsfähiger und manche sind schwer zu ändern, selbst wenn Sie möchten (Safari).

4. Die :focus Pseudoklasse verwenden

Sie können Ihren Eingabefeldern und Textbereichen Stile zuweisen, die nur dann wirksam werden, wenn ein Benutzer in diesen Bereich geklickt hat, und zwar mit der :focus Pseudoklasse. Sie könnten zum Beispiel die Rahmenfarbe dieser Elemente ändern, wie hier:

textarea:focus, input:focus {
  border: 2px solid #900;
}

Die meisten Browser unterstützen sie, also können Sie sie auch gleich verwenden. Denken Sie an Forward-Enhancement.

5. Mit Hinweisen vorbelegen, aber diese dann löschen

Es kann nützlich sein, Ihre Eingabefelder und Textbereiche mit kleinen Hinweisen oder Erinnerungen vorab zu befüllen. Wenn Sie beispielsweise ein allgemeines Kontaktformular und einen Textbereich mit der Beschriftung "Nachricht:" haben, möchten Sie diesen Textbereich möglicherweise mit etwas wie "Ihre positiven Kommentare oder konstruktive Kritik hier." vorab befüllen. Oder Sie haben ein Namensfeld, das mit "Vorname Mittelname Nachname" vorab befüllt ist, um Benutzer an die Reihenfolge zu erinnern, in der sie ihren Namen eingeben sollen. Dies können Sie einfach tun, indem Sie Text innerhalb Ihrer Tags einfügen.

<textarea cols="20" name="Message" rows="20">Hint goes here.</textarea>

Wenn Sie hier aufhören, muss der Benutzer jedoch manuell alles löschen, was Sie eingegeben haben, und das ist nicht gut. Sie können ein kleines Javascript hinzufügen, um diesen Hinweis zu löschen, wenn der Benutzer in das Feld klickt. Dieses kleine Code-Snippet erlaubt auch nur, dass dies einmal geschieht. Wenn der Benutzer wegklickt und dann wieder hineinklickt, verliert er nicht, was er eingegeben hat.

<textarea name="Message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">Hint goes here.</textarea>

6. Mit Web Form Factory arbeiten lassen

Formulare sind nicht nur dazu da, gut auszusehen, sie müssen auch funktionieren. Ein Webformular kann zwei Hauptfunktionen haben: die Schnittstelle zu einer Datenbank oder die Generierung einer E-Mail. Web Form Factory ist ein Open-Source-Dienst, der Ihr Formular nimmt und den benötigten Code generiert, um es so funktionieren zu lassen, wie es soll.

7. Eine vorgefertigte Lösung in Betracht ziehen

Webformulare sind ein Gebiet, das immer wieder und wieder bearbeitet wurde. Dies ist ein Bereich, in dem "das Rad nicht neu erfinden" vielleicht die beste Entscheidung ist, die Sie treffen können.

Ich denke, jeder sollte sich Wufoo ansehen. Wufoo ist einfach der absolut großartigste Formularersteller aller Zeiten. Die Preise reichen von kostenlos bis angemessen, der Erstellungswizzard ist erstaunlich, und die Implementierung der Formulare auf Ihrer Website könnte nicht einfacher sein.