Ankündigung

Einklappen
Keine Ankündigung bisher.

Ideenfindung: Formulareingabe Label

Einklappen

Unconfigured Ad Widget

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Ideenfindung: Formulareingabe Label

    Hallo zusammen,

    Mich würde gerne eure Vorgehensweise zu einer spezifischen Verwendung von labels bei Eingabefeldern interessieren.
    Ich verwende in meinem System eigene UI-Elemente und versuche dabei möglichst grundlegend immer ohne JavaScript auszukommen.

    Meine Input-Felder haben ein label, das zunächst als placeholder-Ersatz fungiert und beim hover und focus über das Input-Element verschoben wird.
    Hat man schon häufig gesehen, keine Hexerei soweit.

    Warum mit Label und nicht gleich Placeholder?
    Weil der placeholder nicht mehr angezeigt wird, sobald das input einen value hat.

    Mit labels finde ich das allerdings gut abbildbar, hier mal kurz ein Beispiel, was genau ich meine: https://codepen.io/PHProcks/pen/mdbPwzL
    Die Version entspricht im Grunde der Umsetzung in meiner UI.

    Um das label nun persistent anzeigen zu können verwende ich in der Basis das required-Attribut, was in den meisten Formularen problemlos genutzt werden kann, um per :valid selektieren zu können.
    Jetzt habe ich aber auch Formulare, in denen ich das ein oder andere Feld nicht mit required versehen dürfte. Da habe ich dann den Trick angewendet, einen echten placeholder zu setzen ( ein Leerzeichen ) und über den Pseudo-Selektor placeholder-shown zu definieren. Das Ergebnis funktioniert ähnlich gut, wie mit required: https://codepen.io/PHProcks/pen/YzKqQoL

    Meine Frage dazu ist, wie ihr sowas ohne JS umsetzt, da mir die zweite Variante zwar ganz gut gefällt, aber scheinbar weniger Unterstützung findet: https://caniuse.com/#feat=css-placeholder-shown
    Bspw. wird das lt. der Tabelle erst im Edge ab Verison 76 unterstützt. Wir haben im Unternehmen, bedingt durch die Update-Richtlinien der Admins aber nur die 44er.


    Freue mich auf regen Ideenaustausch
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche Tutorials

Lädt...
X