AllesMeins: Checkboxen korrekt auszeichnen

Hiho,

ich möchte gerne die folgende Struktur auf einer Seite verwenden

Suchen in
Webseiten [ ]   Dateien [ ]

Dabei sind [ ] jeweils checkboxen. Nun die Frage, wie muss ich die label-Tags am besten setzten, damit es für einen möglichst grossen Nutzerkreis verständlich ist und z.b.: auch von Screenreadern entsprechend wiedergegeben werden kann?
Wenn ich nur "Webseiten" in das label Tag rein nehme ist das ja für sich gesehen nicht wirklich klar was damit gemeint ist. Das "Suchen in" kann ich aber nicht in den label tag für beide aufnehmen. Wie muss das "richtig" sein?

Grüsse

Marc

  1. Hallo AllesMeins!

    ich würde mit einem fieldset arbeiten:

    <fieldset><legend>suchen in</legend>
    <label for="check1">Webseiten</label><input type="checkbox" id="check1">
    <label for="check2">Dateien</label><input type="checkbox" id="check2">
    </fieldset>

    Schönen Gruß

    Afra

    1. Heißa, afra,

      <fieldset><legend>suchen in</legend>
      <label for="check1">Webseiten</label><input type="checkbox" id="check1">
      <label for="check2">Dateien</label><input type="checkbox" id="check2">
      </fieldset>

      Vielleicht bringt man das ganze noch in eine Liste hinein:

      <fieldset>  
        <legend>Suchen in</legend>  
        <ul>  
          <li><label for="webseiten"><span lang="en">Web</span>seiten</label> <input type="checkbox" id="webseiten"></li>  
          <li><label for="dateien">Dateien</label> <input type="checkbox" id="dateien"></li>  
        </ul>  
      </fieldset>
      

      Gautera!
      Grüße aus Biberach Riss,
      Candid Dauth

      --
      Ein Fußball-Fan? Noch auf der Suche eine Schlafmöglichkeit im Großraum Stuttgart für die WM 2006? Wie wäre es mit Herrenberg, einer gemütlichen Kleinstadt am Rande des Schönbuchs? – Von der Lage her ideal, auch für andere Vorhaben im Urlaub. Ferienwohnungen-Herrenberg.com.
      http://cdauth.de/
      1. Tach,

        Vielleicht bringt man das ganze noch in eine Liste hinein:

        wenn schon Liste dann gefällt mir eher:

          
        <fieldset>  
          <legend>Suchen in</legend>  
          <dl>  
            <dd><label for="webseiten"><span lang="en">Web</span>seiten</label></dd>  
            <dt><input type="checkbox" id="webseiten"></dt>  
            <dd><label for="dateien">Dateien</label></dd>  
            <dt><input type="checkbox" id="dateien"></dt>  
          </dl>  
        </fieldset>  
        
        

        mfg
        Woodfighter

        1. Hi!

          wenn schon Liste dann gefällt mir eher:

          <fieldset>
            <legend>Suchen in</legend>
            <dl>
              <dd><label for="webseiten"><span lang="en">Web</span>seiten</label></dd>
              <dt><input type="checkbox" id="webseiten"></dt>
              <dd><label for="dateien">Dateien</label></dd>
              <dt><input type="checkbox" id="dateien"></dt>
            </dl>
          </fieldset>

            
          Wozu noch einen Zusammenhang herstellen, wenn doch für die Beschriftug von Formularelementen das label-Element benutzt wird?  
            
          Man kann es mit der Semantik auch übertreiben.  
            
          Gruß aus [Iserlohn](http://www.iserlohn.de/)  
            
          Martin
          
          -- 
          Selfcode: [ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%7B+fl%3A%28+br%3A%5E+va%3A%29+ls%3A%23+fo%3A%7C+rl%3A%28+n4%3A%28+ss%3A%7C+de%3A%3E+js%3A%29+ch%3A%3F+sh%3A%28+mo%3A%7C+zu%3A%29)
          
          1. Tach,

            Wozu noch einen Zusammenhang herstellen, wenn doch für die Beschriftug von Formularelementen das label-Element benutzt wird?

            das hat zusätzlich noch den Vorteil, dasss eine Ausrichtung der Elemente einfacher wird, also schön Checkboxen und Beschriftungen in Reih und Glied.

            mfg
            Woodfighter

            1. Hi!

              das hat zusätzlich noch den Vorteil, dasss eine Ausrichtung der Elemente einfacher wird, also schön Checkboxen und Beschriftungen in Reih und Glied.

              OK, das seh ich ein - aber eigentlich nutzt man doch CSS für die Darstellung und denkt bei HTML doch nur an die Bedeutung ;-)

              Gruß aus Iserlohn

              Martin

              1. Tach,

                das hat zusätzlich noch den Vorteil, dasss eine Ausrichtung der Elemente einfacher wird, also schön Checkboxen und Beschriftungen in Reih und Glied.

                OK, das seh ich ein - aber eigentlich nutzt man doch CSS für die Darstellung und denkt bei HTML doch nur an die Bedeutung ;-)

                deswegen ist es ja auch nur ein zusätzlicher Vorteil ;-)

                mfg
                Woodfighter

    2. Hallo,

      ich würde mit einem fieldset arbeiten:

      Strukturell im Sinne von HTML sicherlich richtig, allerdings ist man derzeit auf die Default-Darstellung von fieldset/legend mit kleinen Abweichungen angewiesen. Da diese durch den IE eingeführte Default-Darstellung mit derzeitigen CSS nicht wirklich lösbar ist, wird auch in moderneren Browsern die Darstellung von fieldset/legend nicht durch ein Browser-Stylesheet sondern durch die Rendering Engine selbst erstellt, es ist also praktisch ein replaced Element. Es existiert zwar grundsätzliches Interesse, dieses Problem zu beseitigen, allerdings sprechen wenig Zeit, andere Aufgaben, die Default-Darstellung plus das CSS-Problem dagegen.

      Wenn man sein Formular mit CSS aufwendiger strukturieren will und die Default-Darstellung von fieldset/legend dabei nicht wirklich gebrauchen kann, spricht meiner Meinung nach nichts dagegen, echte Boxen (Hn, DIV) zu benutzen.

      Tim