Eines der wichtigsten Elemente in Webseiten sind mit Sicherheit Formulare. Sie helfen dem Benutzer mit der Seite zu interagieren, indem er Daten eingeben und diese an den Server zur Verarbeitung senden kann. Formulare werden also überall dort eingesetzt, wo Eingaben vom Benutzer notwendig sind.
Jedoch sehen die normalen Formularelemente, so wie sie von HTML bereitgestellt werden, recht unspektakulär aus. Im Folgenden möchte ich ein paar Tipps und Tricks zeigen, wie man Formulare ansprechender und schöner gestalten kann. Alles was dazu benötigt wird sind ein paar Kenntnisse in HTML und CSS (Cascading Style Sheets).
Textfelder anpassen
Die wohl am häufigsten verwendeten Elemente in Formularen sind einfache Textfelder. Sie dienen zur Eingabe von Text und sehen standardmäßig wie folgt aus:
Um dieses Textfeld nun an die eigenen Wünsche anzupassen, kann man dem Input Tag das Attribut style hinzufügen. Hier werden nun die CSS Formatierungen vorgenommen. Möchte man zum Beispiel die Länge des Feldes verändern, kann man width verwenden.
Weitere Möglichkeiten wären, die Hintergrundfarbe zu ändern:
Oder die Farbe des Textes innerhalb des Feldes:
Und schließlich kann man auch noch den Rahmen des Textfeldes den eigenen Wünschen anpassen. Wie wäre es zum Beispiel mit einer farbigen, durchgängigen Linie?
Doch bei so vielen Stilattributen ist es sinvoller den Stil in eine separate Styledefinition im HEAD Bereich der HTML Datei zu schreiben.
Dieser Stil wird dann über das class Attribut dem Input Tag zugeordnet.
Wenn man nun alles eben Erlernte zusammenpackt, kann man Formulare gestalten die wie das folgende aussehen.
So, ich hoffe jetzt habt ihr genug Anregungen bekommen, um euch individuelle Textfelder zu gestalten.