IF-Statements mit || (oder)

[molily]

In value sollten nur wirkliche Eingabewerte stehen, niemals die Beschriftung des Eingabefelds.

Wie ich diese apodiktischen Aussagen liebe…

Es kann zum Problem werden, wenn man es falsch macht und nicht zwischen Vorbelegung und Beschriftung unterscheidet. Es ist jedoch einfach, ein Script zu schreiben, das das berücksichtigt.

Benutze das HTML-Attribut @placeholder

Der Hinweis ist angebracht, aber viele Browser können das noch nicht und die verbreiteten Polyfills setzen auf value.

bzw. Label inside!

Die aufgeführten Nachteile einer value-Lösung halte ich für nicht stichhaltig. Sie treffen lediglich auf undurchdachte Umsetzungen zu.

»Beschriftung und wirkliche Nutzereingabe im Feld müssen unterschieden werden; der Textstil (Farbe) muss mit JavaScript geändert werden.«

Gute Lösungen mit value lösen dieses Problem. Sie setzen eine Klasse beim input-Feld, wenn das Label eingebettet ist, sodass eine unabhängige Formatierung dieses Status möglich ist.

»Sollen auch vorbelegte Felder verwendet werden, muss die Unterscheidung auch im Markup (HTML) erfolgen.«

Muss sie nicht, wenn die Einbettung mit halbwegs vernünftigem DOM Scripting erfolgt.

»Wenn das JavaScript zu spät ausgeführt wird, gibt der Nutzer schon etwas ins Feld ein, bevor dessen Beschriftung gelöscht wurde. Dadurch wird der Beschriftungstext unerwünscht zu einem Teil der Eingabe.«

Die Beschriftung sollte nicht schon im value-Attribut im HTML stehen, sondern in einem label-Element, was gegebenenfalls mit Unobtrusive JavaScript eingebettet wird, während das label-Element versteckt werden kann. Das ist alles.

Prinzipiell hat dein Script ein ähnliches Problem im beschriebenen Fall: Wenn ich den Fokus vor der Scriptausführung ins Feld setze (das nimmt mir autofocus sogar ab) und lostippe, so legt das Script das Label trotzdem über das Feld, in das ich gerade tippe.

Ich sehe mehr Nachteile bei einer Lösung mit einem Label, welches über dem input liegt. Es macht Mausinteraktion problematisch, wie auch in den Kommentaren angemerkt. Darüber hinaus blendet dein Script das label nicht barrierefrei aus, wie ich bereits anmerkte.

Mathias