Label fuer Radio-Buttons

[Bademeister]

Hi,
ich habe mal eine Quizfrage zu einem "HTML-Problemchen", ueber das ich gerade gestolpert bin, und das mich etwas irritiert (auch wenn die praktische Auswirkung gering sein duerfte):

Ich mache ein Formular, und als braver Junge goenne ich den Formularfeldern natuerlich Labels:

  
<form....>  
   <label for = "name">Name:</label>  
   <input id = "name" ...>  
u.s.w.  
  
</form>  

So weit so gut. Jetzt moechte ich das gleiche auch fuer Radio-Buttons machen. Etwa:

  
Geschlecht:  
  
<input type = "radio" name = "geschlecht" id = "geschlecht_m" value = "m">  
<label for = "geschlecht_m">maennlich</label>  
  
<input type = "radio" name = "geschlecht" id = "geschlecht_w" value = "w">  
<label for = "geschlecht_w">weiblich</label>  

Ok. Aber ich wuerde natuerlich gerne die Bezeichnung "Geschlecht:" fuer die Radio-Auswahl auch als Label der Radio-Auswahl zuordnen (da sie zumindest in meiner hirninternen Logik das Aequivalent zu der Bezeichnung "Name:" fuer das obige Namensfeld ist).
Das Label wird ueber die ID referenziert, aber die Radio-Alterntiven sind verschiedene Tags, und die muessen verschiedene IDs haben. Das heisst, ich kann nur der "maennlich"- bzw. "weiblich"-Alternative separat ein Label geben, aber nicht der gesamten Radio-Auswahl?
Ein <label>-Tag referenziert per Definition immer ein Formularelement, ich kann also die Radio-Buttons auch nicht in irgendwas reintun (ein <div> o.ae.), das ich dann referenzieren koennte.

Das heisst, dass der Text "Geschlecht:" einfach als unformatierter Text da mitten im Formular rumsteht? Das kann doch nicht die Wahrheit sein. Oder?
Hat jemand eine schlaue Idee, was man da tun koennte? Da bin ich wirklich gespannt, ich hab naemlich bisher keine...

Viele Gruesse
der Bademeister

[Joachim]

Hi,

Hat jemand eine schlaue Idee, was man da tun koennte? Da bin ich wirklich gespannt, ich hab naemlich bisher keine...

ahem... Du weisst was passiert wenn ein korrekt angelegtes label geklickt wird? Du verstehst daher auch, warum der Wert für "for" unique sein muss?

Gruesse, Joachim

[Bademeister]

Hi.

ahem... Du weisst was passiert wenn ein korrekt angelegtes label geklickt wird?

Ja, weiss ich.

Du verstehst daher auch, warum der Wert für "for" unique sein muss?

Was immer Du mit der Frage eigentlich fragen willst - ich verstehe den Sinn der Labels, ja. Der Wert fuer "for" muss ein eindeutiges Formularelement referenzieren. Die Frage ist aber eben, was hier das Formularelement ist.

Was passiert bei einem Auswahlmenu (<select>)? Wenn ich da auf ein zugehoeriges Label klicke, wird das Feld nur aktiviert (hier referenziert das Label das ganze Auswahlmenu, nicht einzelne Werte). Dann kann ich z.B. mit den Cursor-Tasten die Auswahl aendern.
Wenn ein Radio-Feld aktiviert ist, kann ich auch mit den Cursor-Tasten die Auswahl aendern. Aber wenn ich auf mein "Geschlecht:" klicke, wird logischerweise gar nischt aktiviert.

Ein Select-Feld und Radio-Buttons haben beide die Funktionalitaet, dass eine von mehreren moeglichen Antworten ausgewaehlt werden kann. Das eine ist aber ein einziges Objekt (d.h. HTML-Tag), das andere besteht aus mehreren. Bisher habe ich das immer nur als kosmetisches Schoenheitsfleckchen gesehen, aber die Label-Sache ist meiner Meinung nach eine logische Inkonsequenz.

Es ist natuerlich klar, dass das einen Sinn hat, Radio-Buttons als verschiedene Tags zu setzen, weil man sie dann unabhaengig voneinander positionieren kann. Aber sie bilden im Sinne der Formularlogik ein Objekt, und im Sinne dieser sollten sie eigentlich innerhalb eines uebergeordneten Tags liegen, das das Formularelement beschreibt und das refernziert werden kann.
Tun sie aber nicht. Es ist auch klar, dass sich das nicht so einfach realisieren liesse, ohne die Flexibilitaet in der Anordnung deutlich einzuschraenken.

Kurzum:
Meine Frage war nicht: "Kann mir mal bitte jemand Labels erklaeren?", sondern meine Frage war: "Ich moechte etwas tun, was Labels nicht koennen (was zu tun aber trotzdem Sinn macht, denke ich). Kann ich das irgendwie erreichen?"
Denn wenn ich es nicht erreichen kann, dann bleibt meine Beschriftung fuer die Radio-Auswahl eben stinknormaler Text, der mitten in einem Formular rumsteht, und das ist ja eigentlich nicht Sinn der Sache.

viele Gruesse
der Bademeister

[Beat]

Kurzum:
Meine Frage war nicht: "Kann mir mal bitte jemand Labels erklaeren?", sondern meine Frage war: "Ich moechte etwas tun, was Labels nicht koennen (was zu tun aber trotzdem Sinn macht, denke ich). Kann ich das irgendwie erreichen?"
Denn wenn ich es nicht erreichen kann, dann bleibt meine Beschriftung fuer die Radio-Auswahl eben stinknormaler Text, der mitten in einem Formular rumsteht, und das ist ja eigentlich nicht Sinn der Sache.

viele Gruesse
der Bademeister

Auf der Formalen Ebene hast du folgende Strukturmöglichkeit:

Eine Tabelle (schliesst Fieldsets aus)
Fieldset-Gruppen mit tabellen Auf bedarf
Verschachtelte Definitionslisten (schliesst Fieldset aus)
Fieldsets Gruppen mit Definitionslisten auf Bedarf

Das sind einmal die strukturellen Möglichkeiten.

Was da dann mittels Java-Script für eine Logik hineinsetzt, ist eine andere Geschichte. Clicks auf labels sind auch nur Events. Und man kann fehlende Events mit Javascript ergänzen.

Viel Vergnügen

mfg Beat

[Joachim]

Hi,

Ein Select-Feld und Radio-Buttons haben beide die Funktionalitaet, dass eine von mehreren moeglichen Antworten ausgewaehlt werden kann. Das eine ist aber ein einziges Objekt (d.h. HTML-Tag), das andere besteht aus mehreren.

die Frage ist nicht, was macht input. Die Frage ist: "was macht label?":
When a LABEL element receives focus, it passes the focus on to its associated control.

Genau das tut es, und Select stellt eben nur in der Kombination mit Option ein "Form Control" dar, Option alleine jedoch gar nicht. Radios und Checkboxen hingegen sind eigenständige Controls.

Meine Frage war nicht: "Kann mir mal bitte jemand Labels erklaeren?",

Die Antwort war auch nicht: "So funktionieren sie", sondern "Deshalb kann das von Dir gewünschte nicht funktionieren".

sondern meine Frage war: "Ich moechte etwas tun, was Labels nicht koennen

Was hindert Dich, hier eine Javascriptfunktionalität einzubauen? Dafür ist JS ideal: ein "nice to have", dessen Fehlen die Seite nicht stört.

Gruesse, Joachim

[Bademeister]

Hi Joachim,

die Frage ist nicht, was macht input. Die Frage ist: "was macht label?":
When a LABEL element receives focus, it passes the focus on to its associated control.

Ok stimmt, im Sinne dieser Aktivierungssache durch Klicken ist das ein Unterschied, da hast Du Recht.
Aber für das Klicken hab ich mich auch ursprünglich gar nicht interessiert, denn der funktionale Gewinn durch ein anklickbares "Geschlecht:" ist natürlich eher gering....

Es geht mir einzig und allein um HTML-Logik.
Der Radio-Butten ist in der "Formularlogik", wie ich es geschrieben habe, ein einziges Feld, und damit meine ich auf HTTP-Ebene. Er sendet einen Wert, der zu dem dazugehörigen Namen gehört. Und Labels strukturieren (in allen anderen Fällen) ein HTML-Formular dahingehend, dass sie beschreiben, was die einzelnen Werte beschreiben sollen.
Jetzt kann man natürlich argumentieren, dass man den Namen des Objektes so setzen kann, dass er den Wert beschreibt, aber das ist nicht Sinn der Sache (denn es kann je nach verarbeitender Software z.B. auch sinnvoll sein, Formularelemente mit "e1", "e2", ..... oder so zu benennen).

In der Darstellung ist natürlich trotzdem alles prima und mich stört es auch nicht, dass das Anklicken nichts bewirkt. Es geht nur um Formalismus.
SelfHTML sagt zum Thema Labels:

"Für Formularelemente wie Eingabefelder oder Auswahllisten gibt es normalerweise keine logische Beschriftungsmöglichkeit. Sie können zwar Text vor ein solches Element setzen wie "E-Mail-Adresse:", aber ein solcher Text ist normaler HTML-Text, der keinen definierten Bezug zu dem Element hat, für das er als Beschriftung dient. Mit Hilfe von Labels können Sie jedoch einen solchen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen."

Und genau das wollte ich erreichen mit meinem Text "Geschlecht:" und den Radio-Buttons. In meinem HTML-Dokument steht nirgendwo, und ich meine wirklich nirgendwo (auf HTML-Niveau), dass der Wert des Radio-Buttons das Geschlecht bezeichnet.

Jeder, der der Meinung ist, dass eine Überschrift in "<hx>" stehen sollte und nicht in einem "<div style = "....">", wird wahrscheinlich auch diese Frage, die von ähnlicher Kategorie ist, verstehen, oder nicht?

Viele Grüße
der Bademeister

[Auge]

Hallo

Ein <label> bezieht sich _immer_ auf _ein_ Formularelement, Punkt, um, aus. Dass andere Labels deines Formulars die Fragen (Name, Alter, wasauchimmer) stellen, heißt nicht, dass die Frage nach dem Geschlecht für deine ausgewählte HTML-Logik die Richtige ist. Würdest du ein <select> benutzen, wäre "Geschlecht" der zu labelnde Text, da er sich auf das eine Element bezöge, das die beiden Antworten enthielte. Du benutzt aber das mMn klarere Konzept den Radiobuttons. Lebe also auch damit, dass es zwei Elemente sind, die zwei verschiedene Labels haben.

Zudem schleicht sich bei mir der Eindruck ein, dass du deine Idee wegen einer gewünschten Gleichförmigkeit durchdrücken willst, selbst wenn diese so nicht besteht.

Jeder, der der Meinung ist, dass eine Überschrift in "<hx>" stehen sollte und nicht in einem "<div style = "....">", wird wahrscheinlich auch diese Frage, die von ähnlicher Kategorie ist, verstehen, oder nicht?

Das ist innerhalb des Formulars die "Überschrift" für eine Gruppe von Formularelementen, für die die schon angesprochene Kombination aus <fieldset> und <legend> die mMn richtige Lösung wäre, also zeichne sie auch entsprechend aus.

Tschö, Auge

[Bademeister]

Hallo

Hallo

Ein <label> bezieht sich _immer_ auf _ein_ Formularelement, Punkt, um, aus.

Dass andere Labels deines Formulars die Fragen (Name, Alter, wasauchimmer) stellen, heißt nicht, dass die Frage nach dem Geschlecht für deine ausgewählte HTML-Logik die Richtige ist. Würdest du ein <select> benutzen, wäre "Geschlecht" der zu labelnde Text, da er sich auf das eine Element bezöge, das die beiden Antworten enthielte.

Ja ja, das sind die nackten Tatsachen, ich weiß. Die Schlussfolgerung ist, die Anwendungsgebiete von Select-Feldern und von Radio-Buttons sind grundverschieden. Wenn dem so ist, dann muss ich wohl ein select-Feld nehmen.

Du benutzt aber das mMn klarere Konzept den Radiobuttons. Lebe also auch damit, dass es zwei Elemente sind, die zwei verschiedene Labels haben.

Da bleibt mir wohl nichts anderes übrig.

Zudem schleicht sich bei mir der Eindruck ein, dass du deine Idee wegen einer gewünschten Gleichförmigkeit durchdrücken willst

Wieso schleicht denn der Eindruck? Genau so ist es.

selbst wenn diese so nicht besteht.

Doch, sie besteht. Und mit einem Select-Feld kann ich diese - wie wir uns ja bereits einig sind - auch umsetzen. Nur die Radio-Buttons sind nicht mit dieser Logik konform.

Das ist innerhalb des Formulars die "Überschrift" für eine Gruppe von Formularelementen, für die die schon angesprochene Kombination aus <fieldset> und <legend> die mMn richtige Lösung wäre

Das Konzept der Gruppierung von Elementen per fieldset lässt natürlich einigen Freiraum für die Wahl der Gruppen. Und in meinem Fall ist das gesamte Formular deutlich größer und bereits inhaltlich vernünftig in fieldsets gruppiert,

also zeichne sie auch entsprechend aus.

also tue ich das nicht.

Danke aber für die Mühe,
viele Grüße,
der Bademeister

[Der Martin]

Hallo,

Geschlecht:

<input type = "radio" name = "geschlecht" id = "geschlecht_m" value = "m">
<label for = "geschlecht_m">maennlich</label>

<input type = "radio" name = "geschlecht" id = "geschlecht_w" value = "w">
<label for = "geschlecht_w">weiblich</label>

  

> Ok. Aber ich wuerde natuerlich gerne die Bezeichnung "Geschlecht:" fuer die Radio-Auswahl auch als Label der Radio-Auswahl zuordnen (da sie zumindest in meiner hirninternen Logik das Aequivalent zu der Bezeichnung "Name:" fuer das obige Namensfeld ist).  
  
suchst du vielleicht das [fieldset](http://de.selfhtml.org/html/formulare/strukturieren.htm#gruppieren)-Element?  
  

> Das Label wird ueber die ID referenziert, aber die Radio-Alterntiven sind verschiedene Tags, und die muessen verschiedene IDs haben. Das heisst, ich kann nur der "maennlich"- bzw. "weiblich"-Alternative separat ein Label geben, aber nicht der gesamten Radio-Auswahl?  
  
Richtig, das wäre ja auch nicht sinnvoll. Welcher der beiden Radiobuttons sollte denn dann deiner Meinung nach auf das gemeinsame Label "reagieren"?  
  

> Das heisst, dass der Text "Geschlecht:" einfach als unformatierter Text da mitten im Formular rumsteht? Das kann doch nicht die Wahrheit sein. Oder?  
  
Nö.  
  
Übrigens ist es zumindest unüblich (wenn auch nicht verboten), vor und hinter dem "=" zwischen Attributname und Attributwert noch ein Blank zu setzen.  
  
So long,  
 Martin  

-- 
Arzt:    Gegen Ihr Übergewicht hilft wohl nur noch Gymnastik.  
Patient: Sie meinen, Kniebeugen und so?  
Arzt:    Nein, Kopfschütteln. Immer dann, wenn Ihnen jemand was zu essen anbietet.

[Bademeister]

Hi,

suchst du vielleicht das fieldset-Element?

Nein.

Richtig, das wäre ja auch nicht sinnvoll.

Der Meinung bin ich nicht.

Welcher der beiden Radiobuttons sollte denn dann deiner Meinung nach auf das gemeinsame Label "reagieren"?

Keiner.

Das heisst, dass der Text "Geschlecht:" einfach als unformatierter Text da mitten im Formular rumsteht? Das kann doch nicht die Wahrheit sein. Oder?

Nö.

Also? Was ist denn dann die Wahrheit?

Ich habe weiter unten (als Antwort an Joachim) das Problem mal etwas praezisiert, weil es bisher anscheinend etwas unverstaendlich war. Danke trotzdem fuer die Muehe...

Gruss
der Bademeister

[Auge]

Hallo

Welcher der beiden Radiobuttons sollte denn dann deiner Meinung nach auf das gemeinsame Label "reagieren"?

Keiner.

Aber das Element <label> ist genau dafür da, zu _einem_ Formularelement zu gehören (und jeder einzelne Radiobutton ist _ein_ Formularelement) und bei Mausklick oder Tastaturnavigation eine Verbindung dazu herzustellen. Radiobuttons sind wie Checkboxen auch einzelne Formularelemente, die zu einer Gruppe gehören. Der Unterschied ist, dass von einer Gruppe Checkboxen mehrere aktiv sein können, von einer Gruppe Radioboxen aber jeweils _nur_eine_.

Wenn wir den Vergleich weiterspinnen, kommen wir zu der Frage: Was machst du mit einer "Gruppenüberschrift" für Checkboxen anders, als mit einer Gruppenüberschrift für Radiobuttons?

Tschö, Auge