HTML-tags binnen <label>

Ik heb een tabel op een pagina die bestaat uit selectievakjes in de cellen aan de linkerkant en beschrijvingen in de cellen aan de rechterkant. De “beschrijving” bevat h4-headers en platte tekst. Ik wil van die hele beschrijving (alles binnen <td></td>) een label maken.

Dus elke rij ziet er als volgt uit:

<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>

Dit werkt echter niet, de tekst werkt niet als een label en is niet aanklikbaar. Ik gebruik Firefox 3.6 om het te testen. Als ik <h4>-tags verwijder, begint het te werken, maar dat bemoeilijkt het formatteren. Is er iets met <h*>-tags waardoor <label>niet correct werkt?


Antwoord 1, autoriteit 100%

Blokniveau-elementen (waartoe h4behoort) zijn niet toegestaan ​​in inline-elementen en zullen ongedefinieerd gedrag veroorzaken. U kunt in plaats daarvan span-elementen gebruiken.


Antwoord 2, autoriteit 51%

Alleen inline-elementen(behalve andere labelelementen) mogen verschijnen binnen labelelementen.

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->

http://www.w3.org /TR/html4/interact/forms.html#h-17.9.1

Het heeft toch geen zin om daar koppen te plaatsen.


Antwoord 3, autoriteit 30%

Het <label>-element in HTML is een inline-niveau-element en kan geen blokniveau-elementen bevatten.

Dit is waarschijnlijk de oorzaak van uw problemen. Als alternatief kunt u uw labels in de <h4>‘s :

plaatsen

<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>

Antwoord 4

Hier op MDN leggen ze precies uit waarom het NIET moet gebruik koppen binnen een labeltag:

Het plaatsen van kopelementen in een a verstoort veel soorten ondersteunende technologie, omdat kopteksten vaak worden gebruikt als navigatiehulpmiddel. Als de tekst van het label visueel moet worden aangepast, gebruik dan CSS-klassen die op het element zijn toegepast.

Other episodes