【html文本框只读】在HTML中，文本框（``）是用户输入数据的重要元素。有时为了防止用户修改内容，需要将文本框设置为“只读”状态。本文将对HTML中文本框的只读属性进行总结，并通过表格形式展示相关知识点。
一、
在HTML中，可以通过设置`readonly`属性来实现文本框的只读功能。该属性是一个布尔属性，只需在标签中添加即可生效，无需赋值。使用`readonly`后，用户无法手动修改文本框内容，但可以通过JavaScript进行动态修改。与`disabled`属性不同，`readonly`的文本框仍可以被提交到服务器，并且在表单中仍然有效。
此外，`readonly`常用于显示预定义信息或固定值，例如在表单中显示用户ID或系统生成的编号，以避免误操作。需要注意的是，虽然`readonly`限制了用户输入，但并不能完全阻止程序修改内容，因此在安全性要求高的场景下，还需结合后端验证。
二、表格展示
| 属性名称 | 是否可编辑 | 是否可提交 | 是否可由JS修改 | 说明 |
| `readonly` | 否 | 是 | 是 | 用户不能修改，但可通过脚本修改 |
| `disabled` | 否 | 否 | 否 | 用户不能修改，也不可提交 |
| 默认状态 | 是 | 是 | 是 | 用户可自由输入和提交 |
三、代码示例
```html
```
四、应用场景
- 只读：用于显示系统生成的数据，如订单号、创建时间等。
- 禁用：用于暂时不可用的字段，如等待审批的表单项。
五、注意事项
- `readonly`不影响表单提交，适合需要保留数据但不希望用户更改的情况。
- 若需完全禁止用户交互，应使用`disabled`属性。
- 使用`readonly`时，建议配合CSS进行样式区分，提升用户体验。
通过合理使用`readonly`属性，可以有效提高表单的安全性和可用性，同时优化用户界面设计。
