如何实现只读输入框？我尝试了相关代码但未生效

我尝试了以下代码，但并未生效：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="form-outline">
    <input class="form-control"
           id="form Control Read only"
           type="text"
           value="Read only input here..."
           aria-label="readonly input example"
           readonly />
    <label class="form-label" for="formControlReadonly">Readonly</label>
</div>

1. 输入框的id包含空格，不符合HTML元素id的命名规范，同时和标签的for属性值不匹配——Bootstrap的form-outline组件依赖输入框与标签的关联来渲染正确样式，不匹配会导致样式失效。
2. 不匹配的id与for属性也会影响页面的无障碍访问体验。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="form-outline">
    <input class="form-control"
           id="formControlReadonly"
           type="text"
           value="Read only input here..."
           aria-label="readonly input example"
           readonly />
    <label class="form-label" for="formControlReadonly">Readonly</label>
</div>

• 将输入框的id改为formControlReadonly，与标签的for属性值保持一致，确保两者正确关联，让Bootstrap样式正常生效
• 移除id中的空格，符合HTML元素id的命名规范

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