[resolved] Use of HTML label element as a wrapper


#1

I noticed that in many of the examples for forms in the documentation, we are asked to wrap the elements in a <label> tag.

What’s the reasoning behind using <label> as the wrapper? It seems semantically wrong to me to use it in this fashion.

For example, the docs have:

<label class="item item-input">
  <span class="input-label">Username</span>
  <input type="text">
</label>

To me this instead should be:

<div class="item item-input">
  <label class="input-label">Username</label>
  <input type="text">
</div>

#2

The label is used in many cases for click detection. Because iOS and Android treat labels and events differently, the wrapping helps keep it consistent across the board. Ionic manages clicks thanks to the wrapper. If you remove them, you will have tap problems in Android.


#3

That makes sense then. Thanks for the info!