单击表单标签会聚焦错误的输入框

I have a form that contains two input boxes for first and last name.

我有一个表单，包含两个输入框的名和姓。

When I click the "Last Name" label, the cursor focuses on the "First Name" field (instead of the "Last Name" field as expected). How do I fix this problem?

当我单击“姓氏”标签时，光标将聚焦在“名字”字段（而不是预期的“姓氏”字段）上。我该如何解决这个问题？

$(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>

1 个解决方案

#1

You need to associate the labels with the input fields.

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

<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>

As @Sumurai8 mentioned in the comments, the <label> element requires a closing tag, which is missing from your code.

正如评论中提到的@ Sumurai8，元素需要一个结束标记，代码中缺少该标记。