TS: Formulare ohne Table

Hallo und guten Tag,
frohes Neues Jahr!

Gibt es die richtige™ Mehtode für Formulare ohne Tabellen? Es gibt diverse Dokumente dazu bei Google, aber entweder sind sie augenscheinlich zu einfach gestrickt, oder aber das CSS explodiert förmlich (http://www.thestyleworks.de/tut-art/pretty_accessible_forms.shtml) ...

Wie macht man es besser?

Nebeninformation: Ich will die Formulare automatisch aus der DB-Tabelleninformation erzeugen lassen...

Grüße
TS

--
es wachse der Freifunk
http://freifunk-oberharz.de
  1. Hallo TS,

    Gibt es die richtige™ Mehtode für Formulare ohne Tabellen?

    Nebeninformation: Ich will die Formulare automatisch aus der DB-Tabelleninformation erzeugen lassen...

    Wo die Daten herkommen, ist uninteressant. Wichtig zu wissen wäre, wie dein Formular aussehen soll.

    Flexbox ist das neue 42.

    <p>
      <label for="Name">Name</label>
      <input id="Name">
    </p>
    

    Solche Päckchen lassen sich wunderbar in weitere gruppierende Elemente, vorzugsweise fieldset stecken.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. Hallo Mathias,

      erst mal allen eine frohes neues Jahr.

      <p>
        <label for="Name">Name</label>
        <input id="Name">
      </p>
      

      ich sehe hier (fast?) immer die Variante mit for=. Ich bevorzuge die Variante mit

        <label>Name <input id="Name"></label>
      

      Ist es egal - von Gruppierungen mal abgesehen -, welche Variante man wählt?

      Gruß
      Jürgen

      1. Hallo JürgenB,

        ich sehe hier (fast?) immer die Variante mit for=. Ich bevorzuge die Variante mit

          <label>Name <input id="Name"></label>
        

        Ist es egal - von Gruppierungen mal abgesehen -, welche Variante man wählt?

        Inzwischen ja. Ältere Screenreader hatten Schwierigkeiten mit der nicht expliten Zuordnung. Semantisch ist jedoch das Eingabefeld nicht Teil seiner Beschriftung.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. Hallo Matthias,

          ich sehe hier (fast?) immer die Variante mit for=. Ich bevorzuge die Variante mit

            <label>Name <input id="Name"></label>
          

          Ist es egal - von Gruppierungen mal abgesehen -, welche Variante man wählt?

          Inzwischen ja. Ältere Screenreader hatten Schwierigkeiten mit der nicht expliten Zuordnung. Semantisch ist jedoch das Eingabefeld nicht Teil seiner Beschriftung.

          Aber funktional. Wenn man den Label berührt, wandert der Focus zum dazugehörigen Dialogfeld.

          Das mit def DB bezieht sich auf die benötigten Metadaten. Da bin ich mir noch nicht sicher, welche ich erheben sollte.

          • Labeltext
          • Inputtype
          • SizeX
          • SizeY
          • PosX
          • PosY
          • Validierungsfunktionsname
          • ???

          Grüße
          TS

          --
          es wachse der Freifunk
          http://freifunk-oberharz.de
          1. Hallo TS,

            Aber funktional. Wenn man den Label berührt, wandert der Focus zum dazugehörigen Dialogfeld.

            Das passiert in beiden Fällen.

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            1. Hallo Matthias Apsel,

              Aber funktional. Wenn man den Label berührt, wandert der Focus zum dazugehörigen Dialogfeld.

              Das passiert in beiden Fällen.

              Allerdings gibt es in einem Fall eine Lücke zwischen label und input, falls man nichts dagegen tut. (Pen)

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        2. Hallo Matthias,

          Semantisch ist jedoch das Eingabefeld nicht Teil seiner Beschriftung.

          blöde Semantik (:-)), mit dem label-Element lassen sich Label und Formularfeld so schön gruppieren. Da werde ich mich wohl um den Wiki-Artikel kümmern müssen.

          Gruß
          Jürgen

          1. Hallo JürgenB,

            Semantisch ist jedoch das Eingabefeld nicht Teil seiner Beschriftung.

            blöde Semantik (:-)), mit dem label-Element lassen sich Label und Formularfeld so schön gruppieren. Da werde ich mich wohl um den Wiki-Artikel kümmern müssen.

            Ich halte die Kontruktion <label><input /></label> dennoch nicht für so falsch, dass man es nicht benutzen sollte. Im Wiki werden auch beide Varianten vorgestellt.

            Die entscheidende Nachricht muss sein: Jedes input braucht sein label. Auch output und textarea sollten eins haben.

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    2. Hallo und guten Morgen,

      Gibt es die richtige™ Mehtode für Formulare ohne Tabellen?

      Nebeninformation: Ich will die Formulare automatisch aus der DB-Tabelleninformation erzeugen lassen...

      <p>
        <label for="Name">Name</label>
        <input id="Name">
      </p>
      

      Solche Päckchen lassen sich wunderbar in weitere gruppierende Elemente, vorzugsweise fieldset stecken.

      Das wird ja auch in dem von mir verlinkten Beitrag gezeigt. Der hat nach meinem Dafürhalten nur zu viel CSS notwendig. Ich suche eine möglichst einfache, polymorphe CSS-Gestaltung, bei der ich nicht für jedes Dialogelement (Label + input|textarea) eine separate CSS-Vorschrift benötige.

      Wie mache ich das am einfachsten, für <label> eine feste Breite zu definieren? Muss ich da erst wieder ein <span> oder ähnliches einfügen?

      Grüße
      TS

      --
      es wachse der Freifunk
      http://freifunk-oberharz.de
      1. Hallo TS,

        Ich suche eine möglichst einfache, polymorphe CSS-Gestaltung,

        Wie mache ich das am einfachsten, für <label> eine feste Breite zu definieren?

        Das widerspricht sich, imho.

        bei der ich nicht für jedes Dialogelement (Label + input|textarea) eine separate CSS-Vorschrift benötige.

        Warum denkst du, dass du dies benötigst?

        Aus Gründen der Zugänglichkeit für Menschen, die auf große Schriftgrößen angewiesen sind, ist es das Günstigste, label und input linksbündig untereinander anzuordnen. Siehe wiki/CSS/Anwendung und Praxis/zugängliche Eingabefelder

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. @@Matthias Apsel

          Aus Gründen der Zugänglichkeit für Menschen, die auf große Schriftgrößen angewiesen sind, ist es das Günstigste, label und input linksbündig untereinander anzuordnen.

          Nicht nur deshalb. Allgemein werden Beschriftung und Eingabefeld besser als Einheit wahrgenommen, wenn sie übereinander stehen, nicht (mit Leerraum dazwischen) nebeneinander.

          LLAP 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe