Difference between disabled and readonly attribute in HTML

Last Updated : 11 Apr, 2023

In this article, we will see the basic difference between the disabled & readonly attributes in HTML, along with understanding through the basic examples. Both disabled and readonly attributes in HTML are used to restrict user input in form fields. They only differ in how they restrict input and how they are rendered on the web page.

disabled Attribute: The disabled attribute is used to disable the input field so that it cannot be edited or submitted. Usually, the color of the input field is greyed out. A disabled input field will not be sent with the form data, so it cannot be submitted to the server, & users are also not able to interact with the input field (data). It is commonly used when an input field is conditionally disabled or when it’s required to prevent user input.

Syntax:

<input disabled>

Example 1: This example describes the use of the disabled attribute in HTML.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        #heading {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 5px;
            margin-top: 5px;
        }
    </style>
</head>
 
<body>
    <div id="heading">GeeksforGeeks</div>
    <p>
        <b>Disabled property for form input fields</b>
    </p>
    <label for="name">Name:</label>
    <input type="text"
           id="password"
           name="password"
           value="GeeksforGeeks"
           disabled>
</body>
 
</html>

Output:

readonly Attribute: The readonly attribute is used to disable an input field so that it cannot be edited. But the user can still interact with it. Users can see data but it cannot be changed. A readonly input field is usually displayed with a different background color or border, indicating that it cannot be edited. The value of a readonly input field can be submitted with the form data.

Example 2: This example describes the use of the readonly attribute in HTML.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        #heading {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 5px;
            margin-top: 5px;
        }
    </style>
</head>
 
<body>
    <div id="heading">GeeksforGeeks</div>
    <p>
        <b>Readonly property for form input fields</b>
    </p>
    <label for="email">Email:</label>
    <input type="email"
           id="email"
           name="email"
           value="GeeksforGeeks.com"
           readonly>
</body>
 
</html>

Output:

Difference between disabled & readonly attributes:

Attribute	Disabled	Readonly
Purpose	Specifies that an input element should be disabled.	Specifies that an input element should be read-only.
Styling difference	Elements with the disabled attribute will appear grayed out.	Elements with the readonly attribute will appear normally.
Value	When an element is disabled, it cannot be interacted with or submitted.	When an element is readonly, it cannot be edited but can be submitted.
Accessibility	Screen readers will announce the element as disabled or not available.	Screen readers will announce the element as read-only and can access the element content.