Label-Element / input umschließen? display:block?

[Gunther]

@@Gunnar:

nuqneH

Dann solltest du aber auch explizit erwähnen, dass das Label Element dann zwingend ein for Attribut braucht, dessen Wert mit dem des id Attributs des zugehörigen Input Elements übereinstimmt.

Als hätte ich’s geahnt! ;-)

Haha ..., ja du und deine Ahnungen - sehr gut! ;-)

Außerdem ermöglicht 1), mit CSS auf Änderungen des input zu reagieren (:checked, :valid, :invalid).

Inwiefern sollte/ muss man da bei dem jeweiligen Label Element drauf reagieren können?
Das Input Element ist doch dasselbe ...!

<label for="my-input">Label</label>

<input id="my-input"/>
<p class="input-hint">Hinweis, was in das Eingabefeld rein soll</p>

>   
> ~~~css

input:valid + .input-hint { visibility: hidden }  

> 

Das kriegst du mit

<label for="my-input">Label

<input id="my-input"/>
</label>
<p class="input-hint">Hinweis, was in das Eingabefeld rein soll</p>

>   
> nicht hin, weil input und p keine Gewschister sind.  
  
Ob ein P Element hier semantisch wirklich die erste Wahl ist, sei aber auch mal dahingestellt.  
  
Und mit:  
~~~html
<label for="my-input">Label  
  <input id="my-input"/>  
  <span class="input-hint">Hinweis, was in das Eingabefeld rein soll</span>  
</label>

kriegst du es sehr wohl hin - siehe: JSFiddle

Sogar mit dem "Vorteil" verbunden, dass zusammensteht, was auch zusammen gehört ...! :-P

Gruß Gunther