HTML-Tags in <label>
Ich habe eine Tabelle auf einer Seite, die aus Kontrollkästchen in den Zellen links und Beschreibungen in den Zellen rechts besteht. Die "Beschreibung" enthält h4-Überschriften und Klartext. Ich möchte diese ganze Beschreibung (alles in <td></td>) Zu einem Etikett machen.
Jede Zeile sieht also so aus:
<tr><td><input type="checkbox" name="entiries[]" value="i1" id="i1"></td>
<td><label for="i1">
<h4>Some stuff</h4>more stuff..
<h4>Some stuff</h4>more stuff..
</label>
</td></tr>
Dies funktioniert jedoch nicht, der Text wirkt nicht wie eine Beschriftung und ist nicht anklickbar. Ich benutze Firefox 3.6, um es zu testen. Wenn ich <h4> - Tags entferne, funktioniert das, aber das erschwert die Formatierung. Gibt es etwas an <h*> - Tags, das verhindert, dass <label> Richtig funktioniert?
Blockebenenelemente (zu denen h4 belong) sind in Inline-Elementen nicht zulässig und verursachen undefiniertes Verhalten. Sie können stattdessen span Elemente verwenden.
Nur Inline-Elemente (außer anderen Beschriftungselementen) dürfen in Beschriftungselementen vorkommen.
<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
- http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1
Es macht sowieso keinen Sinn, Überschriften dort zu platzieren.
Das Element <label> In HTML ist ein Element auf Inline-Ebene und darf keine Elemente auf Blockebene enthalten.
Dies ist wahrscheinlich der Grund für Ihre Probleme. Alternativ können Sie Ihre Etiketten auch in das Feld <h4> Einfügen:
<tr><td><input type="checkbox" name="entiries[]" value="i1" id="i1"></td>
<td><
<h4><label for="i1">Some stuff</label></h4>more stuff..
<h4><label for="i1">Some stuff</label></h4>more stuff..
</label>
</td></tr>