title: The for attribute of the label element must refer to a non-hidden form control
body: <p>I have some errors in my code
  Here is my error:</p>
  
  <blockquote>
    <p>The for attribute of the label element must refer to a non-hidden form
    control.</p>
  </blockquote>
  
  <p>And myd code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="/search"&gt;
    &lt;span class="input input--hoshi search-wrapp main-page-open" style="display:block"&gt;
      &lt;input class="input__field input__field--hoshi" type="text" id="search" name="keyword" placeholder="Search..."/&gt;
      &lt;label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5"&gt;
        &lt;!--&lt;span class="input__label-content input__label-content-hoshi"&gt;Search...&lt;/span&gt;--&gt;
      &lt;/label&gt;
      &lt;span class="icon-serch"&gt;&lt;/span&gt;
    &lt;/span&gt;
    &lt;input id="search-btn" type="submit" style="display: none;"/&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What is wrong with it? Thanks!</p>