在Bootstrap UI中如何为文本输入框添加指定ID属性

问题解答 #

Bootstrap 完全支持为文本输入框添加ID属性，ID是HTML原生属性，和Bootstrap的样式、交互逻辑完全兼容，部分可视化配置面板没有将ID纳入常规配置项属于工具设计问题，不影响属性本身的使用。

你需要的修改后代码如下：

<div class="col">
  <label class="col-form-label" for="bo1_r_suburb">Suburb</label>
  <input class="form-control" type="text" name="bo1_r_suburb" id="bo1_r_suburb">
</div>

注：额外补充了label标签的for属性关联对应输入框ID，属于表单无障碍设计的最佳实践，点击label文本即可自动聚焦输入框，不需要的话可以删除该属性。

如果无法直接编辑HTML源码，可根据你的使用场景选择对应方案：

• 若是使用低代码/可视化搭建工具：先导出工具生成的原始HTML代码，再手动在input标签中添加id="bo1_r_suburb"即可，修改不会影响Bootstrap原有功能
• 若是通过JS动态生成表单元素：在元素生成逻辑中补充ID属性赋值即可，示例（jQuery写法）：

  $('<input>').addClass('form-control').attr({
    type: 'text',
    name: 'bo1_r_suburb',
    id: 'bo1_r_suburb'
  })
  

内容的提问来源于stack exchange，提问作者Ashman