KC: Inpput Feld ausrichten

Habe ein Formular mit input Feldern

Sieht so aus:

<div class="col-12">
<input type="text" class="form-control px-4 inputfield" placeholder="Vorname" name="Vorname" required> 
<input type="text" class="form-control px-4 inputfield" placeholder="Name" name="Name" required> 
</div>

Das erste input Feld möchte ich links ausgerichtet haben. Das zweite input Feld möchte ich rechts ausgerichtet haben.

Wie bekommt man das hin?

  1. Hallo KC,

    deine input-Elemente benötigen Labels. Placeholder sind dafür ungeeignet.

    Dein Beispiel-HTML habe ich als HTML Codeblock markiert. Dazu schreibt man ~~~html in die Zeile davor und ~~~ dahinter.

    Bitte stelle klar, was Du unter "ausrichten" verstehst. Möchtest Du den Text im Feld links-/rechtsbündig ausrichten? Oder möchtest Du die inputs im div links-/rechtsbündig ausrichten?

    Den Inhalt der Inputs kannst Du leicht mit text-align ausrichten.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Bitte stelle klar, was Du unter "ausrichten" verstehst. Möchtest Du den Text im Feld links-/rechtsbündig ausrichten? Oder möchtest Du die inputs im div links-/rechtsbündig ausrichten?

      Richtig, das gesamte Feld soll ausgerichtet werden. Nicht der Textinhalt

      1. Hallo KC,

        beide Felder auf eine Zeile und der verfügbare Leerraum soll dazwischen sein? Wo und wie willst Du die Labels platzieren?

        Könntest Du das - im Zweifelsfall - als ASCII Kunstwerk darstellen?

        Einfach ~~~ in eine Zeile, darunter "malen", noch eine Zeile mit ~~~. Zum Beispiel so (natürlich ohne Spaces vorneweg):

            ~~~
            +--------------------------------------------+
            !   Vorname:                                 !
            !   ########input1#####                      !
            !                                            !
            !   Familienname:                            !
            !   ########input2#####                      !
            +--------------------------------------------+
            ~~~
        

        Dieses Beispiel ist nicht ohne Absicht. Dieses Layout ist am besten geeignet, auf allen Medien dargestellt zu werden. (Familienname ist übrigens besser als "Nachname", man muss nicht nach Bajor warpen, um Menschen zu finden, die ihren "Nachnamen" vor den "Vornamen" schreiben.

        Welches Layout hast Du Dir vorgestellt?

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Hallo Rolf,

          Familienname ist übrigens besser als "Nachname", man muss nicht nach Bajor warpen, um Menschen zu finden, die ihren "Nachnamen" vor den "Vornamen" schreiben.

          zum Beispiel schon in Teilen von Bayern und Österreich.
          Da findet man sich unter Umständen auf dem Hof vom Huber Sepp wieder.

          Einen schönen Tag noch
           Martin

          --
          "Hab ich vergessen" ist oft nur ein Euphemismus für "Hab ich noch nie verstanden".
        2. @@Rolf B

          Familienname ist übrigens besser als "Nachname", man muss nicht nach Bajor warpen, um Menschen zu finden, die ihren "Nachnamen" vor den "Vornamen" schreiben.

          Man muss auch nicht bis nach Asien. Nach Ungarn reicht schon. Vielleicht auch sogar schon Bayern.

          Und man muss auch nicht nach Qo’noS, um Menschen zu finden, die einen Vornamen gefolgt von „Sohn/Tochter von …“ haben. Man muss auch nicht bis in den arabischen Raum. Nach Island reicht schon.

          Personennamen aus aller Welt

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

          --
          When the power of love overcomes the love of power the world will know peace.
          — Jimi Hendrix
        3. +-------------------+      +-------------------+
          !                   !      !                   !
          !########input1#####!      !########input2#####!
          !                   !      !                   !
          +-------------------+      +-------------------+
          
          
          Feld 1:                     Feld 2:
          Links ausgerichtet          Rechts ausgerichtet
          
          1. Hallo KC,

            dein div finde ich da jetzt nicht wieder, aber du kannst das beispielsweise als Flexbox lösen. Und ich glaube, du möchtest nicht "rechts ausrichten", sondern einfach die Elemente nebeneinander haben.

            Wenn Du wirklick rechts ausrichten willst, setze in .name-entry die Eigenschaft justify-content auf space-between. Oder space-around. Oder was anderes.

            <div class="col-12 name-entry">
              <label for="vorname">Vorname:<br>
                <input type="text" class="form-control px-4 inputfield" 
                       id="vorname" name="Vorname" required> 
              </label>
              <label for="familienname">Familienname:<br>
                <input type="text" class="form-control px-4 inputfield" 
                       id="familienname" name="Name" required> 
              </label>
            </div>
            
            .name-entry {
              display: flex;
              flex-flow: row wrap;
              justify-content: start;
              column-gap: 1em;
            }
            .name-entry label {
              padding: 0.4em 0;
              flex: 1 0 12em;
              max-width: 25em;
            }
            .name-entry label input {
              box-sizing: border-box;
              margin-top: 0.5em;
              width: 100%;
            }
            

            Diese Lösung ist responsiv und bricht bei schmalen Viewports um (das wrap in flex-flow), so dass die Elemente dann untereinander stehen. Ich verwende die labels als Container mit dem input Element darin. Laut Spec brauche ich dann keine Referenzierung zwischen label und input über for und id, aber es gibt Assistenzprogramme, die auf for und id angewiesen sind. Deshalb sind sie trotzdem drin.

            Die Eingabefelder haben eine Minimalbreite von 12em (der 3. Wert bei flex), werden aber nicht schmaler als 12em (die 0 bei flex), dehnen sich aber aus, wenn sie Platz haben (die 1 bei flex). D.h. wenn sie in 12em Breite nicht mehr nebeneinander passen, wird der wrap aktiv. Und wenn dein Fenster breiter als ca 52em ist oder so, dann fängst Du an, Whitespace zu sehen. Mit justify-content kannst Du der Flexbox sagen, wie sie die Elemente und den Whitespace verteilen soll. Der Link oben auf justify-content führt auch zu einem allgemeinen Flexbox-Tutorial.

            Rolf

            --
            sumpsi - posui - obstruxi
    2. @@Rolf B

      deine input-Elemente benötigen Labels. Placeholder sind dafür ungeeignet.

      Doing good deeds.

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

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
  2. @@KC

    Grundsätzlich sollten Eingabefelder untereinander angeordnet werden, nicht nebeneinander.

    Bei Feldern, die unmittelbar zusammengehören (bspw. Straße und Hausnummer – sofern es überhaupt sinnvoll ist, das zu trennen), kann davon abgewichen werden.

    Vorname und Familienname sehe ich so dazwischen. Kann man nebeneinander anordnen, sollte das aber nicht unbedingt tun.

    Das erste input Feld möchte ich links ausgerichtet haben. Das zweite input Feld möchte ich rechts ausgerichtet haben.

    Was soll das heißen? Eins links, eins rechts, und dazwischen viel Luft? Nicht machen!

    Wie bekommt man das hin?

    Verwendest du Bootstrap, wie Linksetzer vermutete?

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

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
    1. Hi,

      Bei Feldern, die unmittelbar zusammengehören (bspw. Straße und Hausnummer – sofern es überhaupt sinnvoll ist, das zu trennen),

      ist es.

      Zusammenfügen ist einfach. Auseinandernehmen nicht.

      Weil es Straßennamen wie "Straße des 17. Juni" oder "Straße 5" gibt.

      Man kann also nicht einfach bei der 1. Ziffer die Trennung machen.

      Aber auch die letzte Ziffer(ngruppe) taugt dazu nicht, weil es Hausnummern wie "25 1/2" gibt - das ergäbe dann nur die 2 ...

      Oder man braucht lange Ausnahmelisten (allein in Deutschland gibt es knapp 1500 verschiedene Straßennamen mit Ziffern drin ...)

      cu,
      Andreas a/k/a MudGuard

      1. @@MudGuard

        Bei Feldern, die unmittelbar zusammengehören (bspw. Straße und Hausnummer – sofern es überhaupt sinnvoll ist, das zu trennen),

        ist es.

        Njein.

        Zusammenfügen ist einfach. Auseinandernehmen nicht.

        Völlig richtig.

        Das heißt, wenn man den irgendwann Straße und Hausnummer getrennt braucht, ist es sinnvoll, die schon getrennt zu erfassen. Wenn.

        Die Frage, die sich davor stellt, ist: Braucht man Straße und Hausnummer denn getrennt?

        Dieselbe Frage stellt sich auch bei Vorname und Familienname. Oft dürfte ein Eingabefeld „Name“ genügen. Für Nutzer einfacher.

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

        --
        When the power of love overcomes the love of power the world will know peace.
        — Jimi Hendrix
        1. Hi,

          Bei Feldern, die unmittelbar zusammengehören (bspw. Straße und Hausnummer – sofern es überhaupt sinnvoll ist, das zu trennen),

          ist es.

          Njein.

          Zusammenfügen ist einfach. Auseinandernehmen nicht.

          Völlig richtig.

          Das heißt, wenn man den irgendwann Straße und Hausnummer getrennt braucht, ist es sinnvoll, die schon getrennt zu erfassen. Wenn.

          Progosen sind besonders schwierig, wenn sie die Zukunft betreffen …

          Auch wenn die momentanen Geschäftspartner ihre Schnittstellen so gebaut haben, daß man das in einem Feld liefern darf, kann ein evtl. neuer Partner, der morgen dazukommt, das anders handhaben.

          cu,
          Andreas a/k/a MudGuard

        2. Hallo,

          Das heißt, wenn man den irgendwann Straße und Hausnummer getrennt braucht, ist es sinnvoll, die schon getrennt zu erfassen. Wenn.

          Die Frage, die sich davor stellt, ist: Braucht man Straße und Hausnummer denn getrennt?

          vielleicht wenn man Postzusteller ist und sich die Briefstapel nach Straßen sortiert einpacken will (ja, zumindest auf'm Dorf tun die das zum Teil noch selber). Aber das ist vermutlich eher ein Ausnahmefall - zumal es dem Zusteller beim Vorsortieren auch egal sein kann, ob am Straßennamen noch die Hausnummer dranhängt oder nicht.

          Dieselbe Frage stellt sich auch bei Vorname und Familienname. Oft dürfte ein Eingabefeld „Name“ genügen. Für Nutzer einfacher.

          Das auf jeden Fall. Mir gehen auch behördliche Formulare oft auf den Senkel, die "Name und Vorname" in getrennten Feldern abfragen. Und hier sehe ich im Moment auch keinen vernünftigen Use Case für eine getrennte Erfassung.

          Einen schönen Tag noch
           Martin

          --
          "Hab ich vergessen" ist oft nur ein Euphemismus für "Hab ich noch nie verstanden".
          1. Hallo Martin,

            bei gemeinsamer Erfassung kann es zu unterschiedlichen Schreibweisen kommen und Problemen in der Weiterverarbeitung.

            Name: Müller, Max

            Name: Maria Schmitz

            Generierte Anrede:

            Sehr geehrter Herr Müller, Max,

            Sehr geehrte Frau Maria Schmitz,

            Eigentlich hätte man gerne nur den Familiennamen in der Anrede gesehen.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Hi,

              Eigentlich hätte man gerne nur den Familiennamen in der Anrede gesehen.

              ja, auch beim Namen ist (selbst bei einer einheitlichen Reihenfolge) eine spätere Aufteilung schwierig.

              Ich kenne mehrere Fälle, bei denen Vornamen auch als Nachnamen vorkommen, sogar einen, der hat zwei Vornamen als Nachnamen, und das ohne Bindestrich. (aus Datenschutzgründen nenne ich natürlich nicht die konkreten Namen)

              Da wird's dann schwierig, aus "namensteil1 namensteil2 namensteil3" die Zuordnung zu Vorname und Familienname richtig zu machen.

              cu,
              Andreas a/k/a MudGuard

              1. Hallo MudGuard,

                die folgene Story ist real, die Namen geeignet abgeändert.

                Ich hatte einen Kollegen Peter Frank. Eines Tages bekamen wir eine neue Kollegin Lisa Schmitz. Sie wurde vom Chef rumgeführt, jeder stellte sich vor.

                "Müller" - "Schmitz" - Handshake... "Meier" - "Schmitz" - Handshake... "Frank" - "Lisa" - allgemeines Grinsen 😀

                Rolf

                --
                sumpsi - posui - obstruxi
                1. n'Abend,

                  die folgene Story ist real, die Namen geeignet abgeändert.

                  Ich hatte einen Kollegen Peter Frank. Eines Tages bekamen wir eine neue Kollegin Lisa Schmitz. Sie wurde vom Chef rumgeführt, jeder stellte sich vor.

                  "Müller" - "Schmitz" - Handshake... "Meier" - "Schmitz" - Handshake... "Frank" - "Lisa" - allgemeines Grinsen 😀

                  ähnliche Fälle kenne ich auch. Mein früherer Arbeitgeber (etwa 2001 bis 2009) hatte damals eine kleine Zweigniederlassung im Elsass mit rund 10 Mitarbeitern. Die dort tätigen französischen Kollegen hatten alle Nachnamen, die man in Deutschland eher als Vornamen erwartet hätte, wie z.B. Joseph, Wilhelm oder Moritz.

                  Bei meinem derzeitigen Brötchengeber haben wir in der IT einen Kollegen, der mit Nachnamen Andreas heißt. Der muss auch viel ertragen: Vom korrekten "Sehr geehrter Herr Andreas" über "Hallo Andreas" bis hin zu "Hey Andi" ist alles drin.

                  Einen schönen Tag noch
                   Martin

                  --
                  "Hab ich vergessen" ist oft nur ein Euphemismus für "Hab ich noch nie verstanden".
            2. @@Rolf B

              Generierte Anrede:

              Sehr geehrter Herr Müller, Max,

              Das hätte vermieden werden können, wenn man das Eingabefeld sinnvoll beschriftet hätte. Nicht „Name“, sondern „Wie möchten Sie angeredet werden?“

              Eigentlich hätte man gerne nur den Familiennamen in der Anrede gesehen.

              Nein. Wie möchtest du diverse Personen anreden? (bzw. Personen, die sich zu einem Geschlecht zuordnen, dieses aber nicht preisgeben wollen) „Hallo $Familienname“? Hört sich blöd an. „Hallo $Vorname $Familienname“ klingt sinnvoll.

              „Hallo $Vorname $Familienname“ bzw. „Hallo $Name“ (s.o.) kann man evtl. auch gleich für alle nutzen; dann kann man sich die Abfrage des Geschlechts sparen, d.h. den Nutzern die Angabe desselben ersparen.

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

              --
              When the power of love overcomes the love of power the world will know peace.
              — Jimi Hendrix
              1. Hallo Gunnar,

                Das hätte vermieden werden können, wenn man das Eingabefeld sinnvoll beschriftet hätte. Nicht „Name“, sondern „Wie möchten Sie angeredet werden?“

                Warum soll ich den Namen mit "Wie möchten Sie angeredet werden?" beschriften? Das eine hat doch mit dem anderen nichts zu tun, das wäre - wenn überhaupt - ein eigenes Feld.

                Aber möchte ich ein solches Feld haben? Möchte ich Leute, die das so eingeben, mit "Hochedler Großkhal zu Müller-Lüdenscheid, Herrscher der Andalen und Lordprotektor des Alten Reiches," anreden? Und mich verklagen lassen, weil irgendein Blödmann meint, dass das Eingabefeld zu klein ist und er seine drei Zeilen Titelgeschwurbel nicht hinein bekommt? Dieses Fass stinkt mir zu sehr. Dafür möchte ich kein VARCHAR(1000)-Feld in meiner DB haben.

                Nein. Wie möchtest du diverse Personen anreden?

                Anders. Der "Herr" ist nur für den Fall relevant, dass der Kunde in der Anrede "Herr" ausgewählt hat.

                Wie anders? Tja. Wie sieht eine korrekte formale Anrede für nichtbinäre oder genderverschwiegene Personen aus? Die deutsche Sprache sieht diesen Fall einfach nicht vor. Wie würde eine Versicherung Kitty Giraudel anschreiben müssen? "Hallo Kitty Giraudel"? Das ist salopp und nicht formal. "Sehr geehrte Damen und Herren"? Na super, für "Geschlecht=keine Angabe" wird das meistens passen, aber Kitty schließt das aus. "Sehr geehrte Damen, Herren und andere"? Ist inklusiv, aber irgendwie klingt das für mich herablassend.

                Rolf

                --
                sumpsi - posui - obstruxi