Problem mit dem Layout meiner Input-Felder

[Gunnar Bittersmann]

@@claus ginsel

So sieht das bei meiner Seite aus, wenn das Feld nicht den Focus hat, so wie es auch aussehen soll:

Nein, so soll es nicht aussehen. Der Farbkontrast ist nur 2.21 : 1 (Checker), notwendig ist 4.5 : 1.

Außerdem ist die Schrift zu klein. Du magst noch(!) Adleraugen haben; für andere ist das schlecht bis gar nicht lesbar.

Hier mal mein html:

<label>&nbsp;&nbsp;&nbsp;
	<span class="i_span">&nbsp;Nutzername&nbsp;</span><br>
	<input name="input_nutzer" class="i_input" type="text" pattern="(^[a-zA-Z0-9äöüß\-]{3,20}$)" title="Nutzername" size="40" maxlength="20" required>
</label>

Die   sind nicht gut. Abstände machst du mit CSS.

Die HTML-Spezifikation sieht das mit input in label so vor, dass das Eingabefeld dadurch seine zugängliche Beschriftung hat. Dummerweise hält sich nicht jede Software an die Spezifikation (looking at you, Microsoft Dragon), sodass du doch noch dem input eine ID und dem label ein gleichlautendes for-Attribut geben solltest.

Das pattern lässt weder René noch Zoë ihre Namen als Nutzernamen verwenden, Ayşe und Paweł auch nicht. Du solltest die erlaubten Zeichen erweitern – oder die Beschränkung ganz infragestellen.

Habt ihr vielleicht eine Idee?

Ja: du verrätst uns, wo man sich dein Problem online ankucken kann – ohne dass wir das jeder für sich nachstellen müssen. Das sollte deine Aufgabe sein. Codepen, Dabblet o.ä., wenn du nicht deine Seite verlinken willst.

🖖 Живіть довго і процвітайте