Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML tags inside <label>

Tags:

html

label

nested

I have a table in a page that consists of checkboxes in the cells on the left and descriptions in the cells on the right. The "description" contains h4 headers and plain text. I want to make that whole description (everything inside <td></td>) a label.

So each row looks like this:

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

This does not work however, the text does not act like a label and is not clickable. I'm using Firefox 3.6 to test it. If I remove <h4> tags it starts working, but that complicates formatting. Is there something about <h*> tags that prevents <label> from working correctly?

like image 271
SaltyNuts Avatar asked Dec 16 '10 14:12

SaltyNuts


People also ask

What is for inside label in HTML?

The for attribute is used in labels. It refers to the id of the element this label is associated with. Now when the user clicks with the mouse on the username text the browser will automatically put the focus in the corresponding input field. This also works with other input elements such as <textbox> and <select> .

Can I put input inside label?

There are two ways to pair a label and an input. One is by wrapping the input in a label (implicit), and the other is by adding a for attribute to the label and an id to the input (explicit). Think of an implicit label as hugging an input, and an explicit label as standing next to an input and holding its hand.

Can I put Div inside label?

Div is a block element, so cannot go inside a label which will only accept Phrasing content. You may use <span> instead as that is an in-line element. SamA74: Div is a block element, so cannot go inside a label which will only accept Phrasing content.

How do you use label tags?

The <label> tag can be used in two ways:The <label> tag needs a for attribute whose value is the same as input id. Alternatively, <input> tag use directly inside the <label> tag. In this case, the for and id attributes are not needed because the association is implicit.


1 Answers

Block level elements (to which h4 belongs) are not allowed inside inline elements, and will cause undefined behaviour. You can use span elements instead.

like image 52
Tatu Ulmanen Avatar answered Sep 25 '22 02:09

Tatu Ulmanen