Formulare ohne Table
TS
- css
- formulare
- html
0 Matthias Apsel0 JürgenB0 Matthias Apsel
0 TS
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
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
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
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
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.
Grüße
TS
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
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
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
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
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
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
@@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 🖖