HTML的input元素readonly属性详解(定义和用法、实例、和disabled属性的对比)

来源：聚合数据类型：技术文章发布：2025-06-26 14:46:56

在 HTML 表单开发中，<input> 元素是构建用户交互界面的重要组成部分。为了控制用户对输入内容的编辑权限，HTML 提供了 readonly 和 disabled 两个属性。虽然这两个属性都能限制用户对表单字段的操作，但它们在功能和使用场景上有着明显的区别。

本文将围绕 readonly 属性进行详细讲解，包括其定义和用法、实际应用案例，以及与 disabled 属性的对比分析，帮助开发者更好地理解和运用这一特性。

一、readonly 属性的定义与基本用法

readonly 是 HTML <input> 元素的一个布尔属性，用于指定该输入字段的内容不能被用户修改。当设置 readonly 属性后，用户无法通过键盘或鼠标直接更改输入框中的值，但该字段仍然可以被 JavaScript 操作，并且在表单提交时会被包含在提交数据中。

语法如下：

<input type="text" name="username" value="张三" readonly>

在这个例子中，username 字段的内容是“张三”，并且用户无法对其进行修改。尽管如此，该字段仍会随表单一起提交到服务器。

需要注意的是，readonly 属性仅适用于某些类型的 <input> 元素，如 text、password、email、number 等，而像 checkbox、radio、file 等类型则不支持该属性。

二、readonly 的实际应用场景

展示不可修改的数据

在一些需要展示数据但不允许用户更改的情况下，readonly 非常适用。例如，在查看用户信息页面中，显示用户的注册时间、ID 等信息时，使用 readonly 可以防止用户误操作。

预填充表单字段

在动态生成表单时，某些字段可能由后台自动填充，用户不需要也不应该修改这些内容。此时设置 readonly 能有效避免用户干扰数据。

配合 JavaScript 控制输入

在某些复杂表单逻辑中，可以通过 JavaScript 动态控制 readonly 属性的状态，实现更灵活的交互效果。例如，根据用户选择的不同选项，切换某些字段的只读状态。

三、readonly 的示例代码

以下是一个简单的 HTML 示例，演示 readonly 的使用方式：

<!DOCTYPE html>
<html>
<head>
    <title>readonly 示例</title>
</head>
<body>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" value="张三" readonly><br><br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" value="zhangsan@example.com"><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这个例子中，用户名字段被设置为只读，用户无法更改；而邮箱字段则允许用户编辑。当表单提交时，用户名字段的值依然会被发送到服务器。