Format Probleme label input

[Gunnar Bittersmann]

@@M.Key

<div class="form-eingabe">
<label>Name:</label>
<input type="text" name="name" required>
</div>

Das geht so nicht. Das label-Element muss sich mit einem for-Attribut auf die ID des zugehörigen Eingabefelds beziehen

<div class="form-eingabe">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>

oder das Eingabefeld enthalten

<label class="form-eingabe">
<span>Name:</span>
<input type="text" name="name" required>
</label>

(Im 2. Fall können natürlich trotzdem die for- und id-Attribute wie im 1. Beispiel gesetzt sein.)

label{ color:#ff0000;

Warum das denn? Was hat der Nutzer denn falsch gemacht?

float: left;

Floats zum Layouten zu missbrauchen waren ein Hack zu Zeiten, als noch keine bessere Technologie dafür zur Verfügung stand. (Wie zuvor Tabellen zum Layouten zu missbrauchen.)

Glücklicherweise sind diese Zeiten vorbei. Mit Flexbox und Grid stehen zwei Techniken zum Layouten zur Verfügung.

Floats werden dann verwendet, wenn wirklich etwas umflossen werden soll. Sonst nicht mehr.

width:200px;}

Viel zu breit. Durch den riesigen Abstand zwischen der Beschriftung „Name“ und dem Eingabefeld geht der Zusammenhang von beidem völlig verloren.

Beschriftungen sollten nicht links von, sondern über den Eingabefeldern stehen.

Und px sollte im Stylesheet nirgendwo auftauchen. Angaben sollten in Anhängigkei von der Schriftgröße (em bzw. rem), den Ausmaßen des umliegenden Containers (%) oder des Viewports (vw, vh, vmin, vmax) erfolgen.

input{
margin-left:210px;
display: block;
width:100%;
}

Wenn etwas 100% breit ist, aber links neben sich 210px frei haben will, dann ist klar, dass das Ding 210px nach rechts herausragt. Du müsstest die 210px von den 100% abziehen: calc(100% - 210px).

Musst du aber nicht. Flexbox:

.form-eingabe { display: flex }

.form-eingabe label { flex: 200px 0 1 }

.form-eingabe input { flex: 1 }

Aber wie gesagt, 200px sind Unsinn. Beschriftung übers Feld.

LLAP 🖖