M.Key: Format Probleme label input

Ich versuche mein Formular zu formatieren.

Hierbei soll sich das inputfenster anpassen. Ich habe es mit 100% versucht. doch das sprengt den Rahmen. Aber mit Px möchte ich es nicht versuchen. Wie kann ich das angehen?

<div class="form-eingabe">
<label>Name:</label>
<input type="text" name="name" required>
</div>
label{ color:#ff0000;
display: block;
float: left; 
width:200px;}
   
input{
margin-left:210px;
display: block;
width:100%;
}

  1. Hallo,

    Wie kann ich das angehen?

    Für die Ursachenforschung erst 210 px + 100% berechnen. Und dann danach das css neu erstellen unter Verwendung von ohne px.

    Gruß
    Kalk

    1. Hallo Tabellenkalk,

      Für die Ursachenforschung erst 210 px + 100% berechnen. Und dann danach das css neu erstellen unter Verwendung von ohne px.

      und das HTML unter Berücksichtigung der Barrierefreiheit reparieren.

      Bis demnächst
      Matthias

      --
      Rosen sind rot.
  2. @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hallo @@M.Key,

      calc(100% - 210px)

      und falls Du mal eigene calc() baust: Die Leerstellen um das Minus sind ERFORDERLICH. Weil die Macher von CSS calc() sich beim Parsen das Leben erleichtern wollten (ein Minuszeichen kann in CSS-Eigenschaftsnamen vorkommen).

      Das hat mich schon einmal einen halben Tag gekostet :)

      Rolf

      --
      sumpsi - posui - clusi
      1. @@Rolf B

        und falls Du mal eigene calc() baust: Die Leerstellen um das Minus sind ERFORDERLICH. Weil die Macher von CSS calc() sich beim Parsen das Leben erleichtern wollten (ein Minuszeichen kann in CSS-Eigenschaftsnamen vorkommen).

        Wie willst du erklären, dass auch um das Pluszeichen Leerzeichen erforderlich sind (nicht aber um * und /)?

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo

          Wie willst du erklären, dass auch um das Pluszeichen Leerzeichen erforderlich sind (nicht aber um * und /)?

          Bezüglich * und /: Inkonsequenz? Zumindest geht nichts kaputt, wenn man die Leerzeichen setzt. Ich tu es, schon der Lesbarkeit und Einheitlichkeit der Notation wegen.

          Tschö, Auge

          --
          Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
          Toller Dampf voraus von Terry Pratchett
        2. Hallo Gunnar,

          ich versuche das besser gar nicht erst und überlasse das den Experten bei MDN:

          Note: The + and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length − an invalid expression − while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.

          The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended.

          Rolf

          --
          sumpsi - posui - clusi
          1. Hallo,

            For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length − an invalid expression −

            <i>weil es alle so machen</i> 😟. Wobei allerdings die automatische konvertierung der Einheiten schon ein angenehmes Featurte ist.

            Gruß
            Jürgen