Die Formularelemente von HTML5 bieten zahlreichen Möglichkeiten um komplexe Funktionalitäten mit verhältnismäßig einfachen Mitteln herzustellen. Mit Hilfe des nativen HTML Color Pickers kann beispielsweise ein Farbton ausgewählt werden, der dann wiederum dazu benutzt werden kann in Echtzeit Bereiche umzufärben. Dazu muss der gewählte Farbwert per JavaScript ausgelesen und an eine CSS Variable übergeben werden.
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.
Moderne Weblayouts zeichnen sich häufig dadurch aus, dass Informationen reduziert werden, viel Freiraum genutzt wird und das Erscheinungsbild insgesamt sehr …
Beitrag zu Ende lesen