如何为dx-text-box控件添加关联标签以修复Lighthouse表单错误

Lighthouse检测到的该错误，是因为输入控件与<label>元素未建立正确的关联关系，这会影响页面可访问性（如屏幕阅读器无法识别标签对应输入框）。针对DevExtreme的dx-text-box控件，有以下几种修复方式：

1. 使用DevExtreme推荐的表单字段结构（优先推荐） #

采用dx-field-label + dx-field-value的标准布局，既能保证组件样式统一，也能自动满足可访问性要求：

<div class="dx-field">
  <div class="dx-field-label">用户名</div>
  <div class="dx-field-value">
    <dx-text-box #userLogin 
                 [(value)]="login" 
                 placeholder="用户名或邮箱" 
                 width="100%">
      <dx-validator>
        <dxi-validation-rule type="required" message="用户名不能为空"></dxi-validation-rule>
      </dx-validator>
    </dx-text-box>
  </div>
</div>

2. 保留控件自带label，显式指定ID #

若想直接使用dx-text-box的label属性，只需给控件添加id，DevExtreme会自动生成关联的<label>元素：

<div class="dx-field">
  <dx-text-box #userLogin 
               id="userNameInput"
               label="用户名" 
               [(value)]="login" 
               placeholder="用户名或邮箱" 
               width="100%">
    <dx-validator>
      <dxi-validation-rule type="required" message="用户名不能为空"></dxi-validation-rule>
    </dx-validator>
  </dx-text-box>
</div>

3. 手动创建独立标签并关联 #

如果需要自定义标签的位置或样式，可手动创建<label>，通过for属性关联到控件的id（注意不要同时设置控件的label属性，避免重复）：

<div class="dx-field">
  <label for="userNameInput">用户名</label>
  <dx-text-box #userLogin 
               id="userNameInput"
               [(value)]="login" 
               placeholder="用户名或邮箱" 
               width="100%">
    <dx-validator>
      <dxi-validation-rule type="required" message="用户名不能为空"></dxi-validation-rule>
    </dx-validator>
  </dx-text-box>
</div>

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