title: Should a label element have both a for attribute and a nested input element?
body: <p>I know we can either use</p>
  <p>Explicit Labeling:</p>
  <pre><code>&lt;label for=&quot;myinput&quot;&gt;My Text&lt;/label&gt;
  &lt;input type=&quot;text&quot; id=&quot;myinput&quot;&gt;
  </code></pre>
  <p>or</p>
  <p>Implicit Labeling:</p>
  <pre><code>&lt;label&gt;My Text
     &lt;input type=&quot;text&quot;&gt;
  &lt;/label&gt;
  </code></pre>
  <p>What about using both:</p>
  <pre><code>&lt;label for=&quot;myinput&quot;&gt;My Text
     &lt;input type=&quot;text&quot; id=&quot;myinput&quot; /&gt;
  &lt;/label&gt;
  </code></pre>
  <p><a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md" rel="nofollow noreferrer">You can read here the following recommendation </a></p>
  <blockquote>
  <p>To fully cover 100% of assistive devices, you're encouraged to
  validate for both nesting and id.</p>
  </blockquote>
  <p>What is the recommended way?</p>