我有两种形式。首先形成CCD_ 1和CCD_。
但在点击搜索表单中的按钮后，tabindex不会转到插入表单中的第一个输入。
请注意，在搜索表单中有一个隐藏的div幻灯片切换，在按钮之后，下一个选项卡将出现在那里。
<form id="searchform" name="searchform" method="get" role="form" tabindex="1">
<table>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td><input tabindex="1" id="name" placeholder="name" name="name" type="text"></td>
<td><input tabindex="2" id="company" placeholder="company" name="company" type="text"></td>
<td><input tabindex="3" id="persona" placeholder="persona" name="persona" type="text"></td>
<td><input tabindex="4" id="website" placeholder="website" name="website" type="text"></td>
<td> <a href="#" tabindex="5" class="btn btn-positive" id="searchlead"> Search </a></td>
<td> <a style="margin-right: 6px;" href="#" tabindex="6" class="btn btn-info" id="insert"> Insert </a></td>
</tr>
<tr class="slideTogglerow" style="display: none;">
<td><div>
From my list <input type="checkbox" name="search_own_list" style="margin: 8px;" id="search-own-list"/>
</div>
</td>
<td> <input type="text" name="date_inserted" placeholder="date" id="date_inserted"/></td>
</tr>
<tr>
<td>
<a id="advancesearch" href="#">
Advanced Search
<img src="assets/img/add-button.png"/>
</a>
</td>
<td colspan="5"> </td>
</tr>
</table>
</form>
<form id="insertform" name="insertform" method="get" role="form" tabindex="2">
<div class="row">
<p> Date: <i><?php echo date("M j, Y g:i a");?> </i></p>
<div id="major-fields">
<input type="text" tabindex="7" placeholder="First Name" name="fname" id="ifname">
<input type="text" tabindex="8" placeholder="Last Name" name="lname" id="ilname">
<input type="text" tabindex="9" placeholder="Company" name="company" id="icompany">
</div>
<label>Persona <br/>
<?php echo $persona_str;?>
</label>
<br/>
<label>Campaign <br/>
<select id="icampaign" name="campaign">
<option value="3">NorthAm</option>
<option value="1">APAC</option>
<option value="2">Canada</option>
<option value="4">UK</option>
</select>
</label>
<br/>
<label>Country <br/>
<select id="icountry" name="country">
<option value="2">USA</option>
</select>
</label>
<br/>
<label>Industry <br/>
<?php echo $industry_str;?>
</label>
<br/>
<label>
Status <br/>
<?php echo $status_str;?>
</label>
<br/>
</div>
<button id="slideToggle" type="button" class="btn btn-default">+ Add more information </button>
<br />
<div class="row slideTogglebox" style="display: none;">
<div id="minor-fields">
<input type="text" placeholder="website" name="website" id="iwebsite">
<input type="text" placeholder="email" name="email" id="iemail">
</div>
<input type="text" placeholder="position" name="position" id="iposition">
<input type="text" placeholder="phone" name="phone" id="iphone">
<input type="text" placeholder="address" name="address" id="iaddress">
<textarea placeholder="note" name="note" id="inote"></textarea>
</div>
<button type="button" class="btn btn-positive" id="insertlead" style="margin-top: 10px; width: 100%;"> INSERT </button>
</form>
如果需要，可以使用jquery 进行集中
$('#insertform input').first().focus();
点击"搜索"链接（这是一个链接，尽管您可能会将其格式化为按钮）不会导致焦点改变。它只是移动到文档的开头（因为它有href="#"）。由于没有焦点变化，所以链接保持焦点。按下TAB键将导致焦点更改为下一个可聚焦元素（"插入"链接）。
如果你想点击一个链接来影响焦点，你需要使用JavaScript:
<a href="#" tabindex="5" class="btn btn-positive" id="searchlead"
onclick="document.getElementById('insert').focus()"> Search </a></td>
您可能在实际代码中有一些onclick处理程序用于链接。如何将聚焦与现有代码结合起来取决于它应该做什么，但通常情况下，你会执行一些搜索操作，然后进行聚焦，然后例如return false，以防止正常的链接处理。