mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 21:44 Benutzername: Passwort: Auto-Login

Thema: [solved] Semantik bei Radiobuttons / Checkboxen und Labels vom 13.10.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [solved] Semantik bei Radiobuttons / Checkboxen und Labels
Seite: 1, 2  Weiter
Autor Nachricht
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Fr 13.10.2006 15:15
Titel

[solved] Semantik bei Radiobuttons / Checkboxen und Labels

Antworten mit Zitat Zum Seitenanfang

Folgende Frage:
Wie löst ihr beschreibende Texte zu z.B Radiobuttons oder Checkboxen?

Das Label Tag bezieht sich ja auf das ganze "Set" von Elementen, es gibt aber kein "beschreibendes" Tag, was beispielsweise den Radiobuttons zugeordnet werden kann.

Beispiel:



Mein derzeitiges Konstrukt sieht so aus:
Code:
                   
<form name="xyz" id="xyz" method="post" action="xyz.php">
   <fieldset>
      <legend><span>Pers&ouml;nliche Angaben:</span></legend>
   
         <label for="geschlecht">Ich bin:</label>
         <p><input type="radio" name="geschlecht" value="maennlich" />  <span>M&auml;nnlich</span></p>
         <p><input type="radio" name="geschlecht" value="weiblich" /> <span>Weiblich</span></p>
         [...]             
   </fieldset>
   
</form>


... so ganz sinnvoll erscheint mir das Ganze aber nicht, da der Paragraph ja als kennzeichnung textueller Absätze dient. Gibts da ne elegantere Lösung? (Und wenn ja welche?)

// Ok.. bin grade über eine Lösung gestolpert, mit der ich leben kann:
http://forum.de.selfhtml.org/archiv/2005/8/t113372/

demnach:

Code:
<form name="xyz" id="xyz" method="post" action="xyz.php">
   <fieldset>
      <legend><span>Pers&ouml;nliche Angaben:</span></legend>
         <dl>
            <dt><label for="geschlecht">Ich bin:</label></dt>
            <dd><input type="radio" name="geschlecht" value="maennlich" />  <span>M&auml;nnlich</span></dd>
            <dd><input type="radio" name="geschlecht" value="weiblich" /> <span>Weiblich</span></dd>
         </dl>
         [...]             
   </fieldset>
   
</form>


Zuletzt bearbeitet von sahnemuh am Fr 13.10.2006 15:24, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Fr 13.10.2006 17:59
Titel

Antworten mit Zitat Zum Seitenanfang

naja, der einzig wirklich semantische weg wäre in meinen augen wohl:
Code:
<input type="radio" name="geschlecht" value="maennlich" id="m" /> 
<label for="m">M&auml;nnlich</label>
<input type="radio" name="geschlecht" value="weiblich" id="w" />
<label for="w">Weiblich</label>


da labels sich immer auf das eingabeelement beziehen (sollten) durch die es angewählt werden kann bzw soll. dein „ich bin“ sagt ja jetzt nichts aus über den logischen bezug zu den beiden einzelnen radiobuttons aus, die unter dem punkt auswählbar sind.


Zuletzt bearbeitet von beeviZ am Fr 13.10.2006 18:01, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Fr 13.10.2006 18:07
Titel

Antworten mit Zitat Zum Seitenanfang

beeviZ hat geschrieben:
naja, der einzig wirklich semantische weg wäre in meinen augen wohl:
Code:
<input type="radio" name="geschlecht" value="maennlich" id="m" /> 
<label for="m">M&auml;nnlich</label>
<input type="radio" name="geschlecht" value="weiblich" id="w" />
<label for="w">Weiblich</label>


da labels sich immer auf das eingabeelement beziehen (sollten) durch die es angewählt werden kann bzw soll. dein „ich bin“ sagt ja jetzt nichts aus über den logischen bezug zu den beiden einzelnen radiobuttons aus, die unter dem punkt auswählbar sind.


öh ja du hast recht.

theoretisch wäre das ganze eher ein fieldset mit der legend "Ich bin" und dann labels für die radiobuttons.
das passt mir aber so garnicht in mein konstrukt *Schnief*

naja. ich werde montag weiterdenken. nu is wochenende Grins
  View user's profile Private Nachricht senden
ploehr

Dabei seit: 19.12.2005
Ort: UelzCoast
Alter: 36
Geschlecht: Männlich
Verfasst Mi 15.11.2006 15:41
Titel

Antworten mit Zitat Zum Seitenanfang

Ich hab grad das gleiche Problem gehabt und bin auf folgendes gekommen:

Sieht gut aus und ist vailde (XHTML 1.0 Strict):

Code:
<form id="xyz" method="post" action="xyz.php">
 <h1>Pers&ouml;nliche Angaben:</h1>
 <fieldset>
  <legend>Ich bin:</legend>
  <input type="radio" id="geschlecht_m" name="geschlecht" value="maennlich" /><label for="geschlecht_m">m&auml;nnlich</label>
  <input type="radio" id="geschlecht_w" name="geschlecht" value="weiblich" /><label for="geschlecht_w">weiblich</label>
 </fieldset>

 <fieldset>
  <legend>Vom Typ bin ich eher:</legend>
  <input type="checkbox" id="typ_di" name="typ" value="dick" /><label for="typ_di">dick</label>
  <input type="checkbox" id="typ_do" name="typ" value="doof" /><label for="typ_do">doof</label>
 </fieldset>

 <fieldset>
  <legend>Alles ausgef&uuml;llt?</legend>
  <input type="submit" value="weg damit"/>
 </fieldset>
</form>


definitionslisten halte ich definitiv für überflüssig *zwinker* im form-tag braucht man kein name, ich wüsste jedenfalls nicht wozu... die beiden zusätzlichen fieldsets habe ich eingefügt weil ich wissen wollte ob das erlaubt ist. ist es Lächel

ganz wichtig sind die ids, weil sonst for ins leere zeigt!
greetz ploehr


Zuletzt bearbeitet von ploehr am Mi 15.11.2006 15:45, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 15.11.2006 16:27
Titel

Antworten mit Zitat Zum Seitenanfang

ja. problem an der geschichte ist, dass sich legends crossbrowser nicht ganz gleich formatieren lassen.
das mit den ids ist klar.. hatte ich im bsp nur vergessen (:

letztenendes ist dann sowas draus geworden:
Code:
<fieldset>
   <legend style="display: none;">Pers&ouml;nliche Angaben</legend>
               
                   <!-- geschlecht -->      
                   
                            <h5 class="pflichtfeld"><span>Ich bin</span></h5>
                            
                           <div class="formularfelder">
                              <input type="radio" class="kein-rand" id="geschlecht-maennlich" name="geschlecht" value="maennlich" />
                              <label for="geschlecht-maennlich">M&auml;nnlich</label>
                              
                              <input type="radio" class="kein-rand" id="geschlecht-weiblich" name="geschlecht" value="weiblich" />
                              <label for="geschlecht-weiblich">Weiblich</label>
                           </div>

                            <h5 class="pflichtfeld"><span>PLZ/Ort</span></h5>
                      
                            <div class="formularfelder">
                               
                               <label for="plz" class="unsichtbar">PLZ</label>
                               <input type="text" class="m-klein" id="plz" />
                               
                               <label for="ort" class="unsichtbar">Ort</label>
                               <input type="text" class="gross" id="ort" />

[...]
</fieldset>


Zuletzt bearbeitet von sahnemuh am Mi 15.11.2006 16:29, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
ploehr

Dabei seit: 19.12.2005
Ort: UelzCoast
Alter: 36
Geschlecht: Männlich
Verfasst Mi 15.11.2006 17:11
Titel

Antworten mit Zitat Zum Seitenanfang

meinst du den background? das ist blöd, stimmt. nal ne andere frage, warum packst du in die h5 noch nen span?? * Keine Ahnung... *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 15.11.2006 17:24
Titel

Antworten mit Zitat Zum Seitenanfang

ploehr hat geschrieben:
meinst du den background? das ist blöd, stimmt. nal ne andere frage, warum packst du in die h5 noch nen span?? * Keine Ahnung... *


hat optische gründe. ich brauchte nen 2. container um nen padding einzubauen, damit mir das böse falsche IE boxmodel nicht nen strich durch meine feste größe des h5 tags macht. ich verteile auf container mit fester größe halt nie ein padding sondern pack immer noch irgendwas rein (oder benutze wenn möglich ein anderes, darum liegendes element) um innenabstände zu erzeugen. (:


Zuletzt bearbeitet von sahnemuh am Mi 15.11.2006 17:26, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
ploehr

Dabei seit: 19.12.2005
Ort: UelzCoast
Alter: 36
Geschlecht: Männlich
Verfasst Do 16.11.2006 13:11
Titel

Antworten mit Zitat Zum Seitenanfang

aha Lächel danke für die info!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen <html> frage zu checkboxen / radiobuttons...
semantik?
HTML->Semantik, verschachtelte Divs
[PHP] Radiobuttons und Textfelder
Problem mit Radiobuttons bei der Formularausgabe
radiobuttons mit image verknüpfen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.