Das placeholder-Attribut von HTML-Formularfeldern wird eingesetzt, um innerhalb eines Eingabefelds anzuzeigen, was für eine Information der Benutzer eintragen soll. Sobald der Anwender in das Feld geklickt hat und beginnt zu schreiben, verschwindet der placeholder. In diesem Beitrag findet ihr den CSS-Code um den Placeholder-Text zu stylen.
Das HTML-Formularelement range ist sehr praktisch um dem Anwender die Möglichkeit zu bieten, Werte mit Hilfe eines Schiebereglers zu verändern. Ohne JavaScript hat der Regler allerdings keine Funktion. In diesem Beitrag archivieren wir das JavaScript-Snippet mit dessen Hilfe die Position des Range-Sliders ausgelesen und auf der Website angezeigt bzw. verwendet werden kann.
Bei der Nutzung von Formularen kann es hilfreich sein, dem Anwender anzuzeigen wie viele Zeichen er bereits eingegeben hat. In vielen Layouts gibt es beispielsweise eine ideale Textmengen für bestimmte Elemente, die möglichst eingehalten werden soll. Auch spielt die Anzahl der verfassten Zeichen für verschiedene Abrechnungsmodelle eine Rolle.
In diesem Beitrag archivieren wir ein jQuery-Snippet, mit dem die Anzahl der eingegebenen Zeichen angezeigt werden kann.
Die Validierung eines Eingabefeldes während der Eingabe kann die Benutzerfreundlichkeit erheblich verbessern. Wir zeigen euch ein einfaches Beispiel, wie ihr ein Eingabefeld mit jQuery auf verschiedene enthaltene Zeichen überprüft.
Die Gestaltung von Formularfeldern gehört zu den eher lästigen Aufgaben eines Web-Designers. Insbesondere Select-Listen, Radio-Buttons und Checkboxen ließen sich lange Zeit kaum mit CSS ansprechen, so dass für gewöhnlich mit JavaScript nachgeholfen werden musste, wenn eine individuelle Gestaltung gewünscht war. Mittlerweile lassen sich Formularfelder in modernen Browsern ohne JavaScript individuell gestalten. In diesem Zusammenhang möchte ich einige CSS-Snippets archivieren.
Der Submit-Button (input type="submit") eines HTML-Formulars lässt sich manchmal auf dem iPhone oder iPad mit CSS nicht ansprechen und folglich auch nicht gestalten. Solltet ihr euch mit diesem Problem einmal konfrontiert sehen, probiert folgenden Webkit-spezifischen CSS-Befehl aus.
Um Website-Formulare auf Fehleingaben zu prüfen existieren unzählige Validierungs-Plugins und Tools. Leider sind viele dieser Tools kompliziert zu implementieren und erfordern zudem Anpassungen am HTML-Quellcode des Formulars.
Wenn das Formular allerdings dynamisch generiert wird oder über ein Plugin erstellt wurde, ist es häufig nicht möglich den HTML-Code anzupassen. Hier eilt das jQuery-Plugin „jQuery Walidate“ zur Hilfe und ermöglicht die Validierung bestehender HTML-Formulare ohne Änderungen am Quellcode vornehmen zu müssen. Neben einer einfachen Integration des Plugins in die Website stehen umfangreiche Funktionen wie individuelle Fehlermeldungen etc. zur Verfügung.