Stop use of nested label tags in HTML

[consideRatio]

• Closes #734

There is a slight adjustment in the alignment as part of changing the nested <label> tag into a <span> tag, but I think that is preferred. In the gif below we see the difference switched back and forth. With this PR it becomes as it is when the label is put lower compared to what it was before, aligning better with the text in the dropdown lists.

[minrk]

I don't think this is quite the right solution. We do have two form elements here (the profile and the image), so each should have its label. What I think is incorrect is that the image control is inside the profile selection label.

Instead, I think the right thing to do is to make sure the profile item label does not enclose the image form element and label.

[consideRatio]

@minrk the background is observing that nesting <label> tags isn't a well defined HTML it seems.

For example we had a label for each radio button, and when click on a label with an associated radio button, they are supposed to be selected. But, what if the label has a label inside it - then what?

In https://stackoverflow.com/a/20842000/2220152, a person leads with:

As you know, it is not allowed to nest label elements,

And another post sais:

The html5 spec explicitly says:

The label element must not contain any nested label elements.

I have not found something in the html5 specification or similar saying this explicitly, but I've seen a validator warning about it and these stackoverflow responses.

[minrk]

Thanks! I do understand the background, and that there shouldn't be a label inside another. What I mean is that the second label, which is for a real control, shouldn't be inside the first. Not that the second label shouldn't be a label at all. There also shouldn't be any interactive elements inside a label. That ought to mean the image select element to which the inner label applies also shouldn't be inside the outer label.

[yuvipanda]

/cc @batpad as well