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.
Beitrag zu Ende lesen
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.
Beitrag zu Ende lesen
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.
Beitrag zu Ende lesen
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.
Beitrag zu Ende lesen
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.
Beitrag zu Ende lesen
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.
Beitrag zu Ende lesen
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.
Beitrag zu Ende lesen