How to disable input type text area ?

Last Updated : 20 Mar, 2023

In this article, we get to know how to disable an input type=text by using the input disabled attribute. A disabled input is un-clickable and unusable. It is a boolean attribute. The disabled elements are not submitted in the form.

Syntax:

<input type="text" disabled>

Example 1:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML input disabled Attribute</title>
</head>
 
<body style="text-align:center">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>HTML input disabled Attribute</h2>
 
    <label>Input:
 
        <!--A disabled input-->
        <input type="text" name="value"
                value="This input field
                is disabled" disabled>
    </label>
</body>
 
</html>

Output :

Example 2: To disable an HTML textarea element, we can use the disabled attribute. Here’s an example-

Syntax :

textarea:disabled {
    background-color: gray;
      color: white;
      border: 2px blue solid;
      padding: 6px;
}

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Disabled Textarea Example</title>
    <style>
        body {
            background-color: rgb(0, 0, 0);
            text-align: center;
        }
 
        h1,
        h2 {
            color: green;
        }
 
        textarea:disabled {
            background-color: gray;
            color: white;
            border: 2px blue solid;
            padding: 6px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks !</h1>
    <h2>Disabled Textarea Example</h2>
    <textarea disabled>
          This textarea is disabled. we can't write 
          anything in this text area
      </textarea>
</body>
</html>

Description: In the above example, the body element is styled with a black background color. The textarea:disabled selector targets disabled textarea elements and sets their background color to gray and text color to white. we can also adjust these styles as needed to achieve the desired look.

Output: