单击表单标签会聚焦错误的输入框 - Clicking on form label focuses the wrong input box

Clicking on form label focuses the wrong input box

我有一个表单，它包含两个输入框，分别表示名字和姓氏。

当我单击"姓氏"标签时，光标会集中在"名字"字段（而不是预期的"姓氏"字段）。如何解决此问题？

$(document).on('click', 'a', function() {
  $('div.tabClass').addClass('hide');
  $($(this).attr('href')).removeClass('hide');
} );

  .hide {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action='' method='POST'>
  <ul>
    <li>
      <a href='#first'>
        First Tab
      </a>
    </li>
    <li>
      <a href='#secound'>
        Second Tab
      </a>
    </li>
    <li>
      <a href='#third'>
        third Tab
      </a>
    </li>
    <li>
      <a href='#fourth'>
        Fourth Tab
      </a>
    </li>
  </ul>
  <div id='first' class='hide tabClass'>
    <label>
      First Name :
      <input type='text' name='name' id='name'>
      <br/>
      <label>
        Last Name :
        <input type="text" name='sname' id="sname">
        <input type="submit" value="Click">
  </div>
</form>

您需要将标签与输入字段相关联。

<label for="name">
    First Name :
    <input type="text" name="name" id="name">
</label>
<label for="sname">
    Last Name  :
    <input type="text" name="sname" id="sname">
</label>

正如@Sumurai8在评论中提到的，<label>元素需要一个结束标记，而代码中缺少这个标记。