Next 标签使用键盘上的标签（引导程序）答案

【问题标题】：Next Label using tab on keyboard (Bootstrap)Next 标签使用键盘上的标签（引导程序）
【发布时间】：2018-10-23 14:56:55
【问题描述】：

我是 Bootstrap 的初学者。当我按 Tab 时，我想选择下一个选项卡。

点击loan_form.php，光标会自动出现在Loan Name中。完成后按键盘上的Tab键，光标会移动到Department标签而不是Device code标签：

<div class="row">                        
<div class="col-md-6 mb-3">
  <label>* Loan Name</label>
  <input type="text" class="form-control" name="loan_name" id="loan_name" placeholder="Full Name" required>
</div>

<div class="col-md-6 mb-3">
  <label>Device Code</label>
  <select name="device_code" class="form-control" id="device_code" data-validetta="required" ></select>
</div>
</div>
<br />

<div class="row">
<div class="col-md-6 mb-3">
  <label>* Department</label>
  <input type="text" class="form-control" name="dept" id="dept" placeholder="Department" required></div>

<div class="col-md-6 mb-3">
  <label>Brand</label>
  <input type="text" class="form-control" name="device_brand" id="device_brand" placeholder="Brand" disabled required>

</div>

【问题讨论】：

标签： php html bootstrap-4

【解决方案1】：

在所有input 字段中使用tabindex html 标记。在此处查看重新格式化的代码：

<div class="row">                        
<div class="col-md-6 mb-3">
  <label>* Loan Name</label>
  <input type="text" class="form-control" name="loan_name" id="loan_name" placeholder="Full Name" required tabindex="1">
</div>

<div class="col-md-6 mb-3">
  <label>Device Code</label>
  <select name="device_code" class="form-control" id="device_code" data-validetta="required" tabindex="2"></select>
</div>
</div>
<br />

<div class="row">
<div class="col-md-6 mb-3">
  <label>* Department</label>
  <input type="text" class="form-control" name="dept" id="dept" placeholder="Department" required tabindex="3"></div>

<div class="col-md-6 mb-3">
  <label>Brand</label>
  <input type="text" class="form-control" name="device_brand" id="device_brand" placeholder="Brand" disabled required tabindex="4">
</div>

【讨论】：